2020年新年大赛！

Question

Monkey Mutant

Asked:2020-02-02 07:44:34 +0000 UTC2020-02-02 07:44:34 +0000 UTC 2020-02-02 07:44:34 +0000 UTC

如何为类似形状的绘图设置动画？

772

我在 illustrator 中得到了这样的文字

由于 ruSO 片段没有跳过字符数，所以我将 SVG 放入 codepen

_https://codepen.io/topicstarter/pen/YBVWKx

如何制作绘图动画？

3 个回答

Voted

Alexandr_TT · Answer 1 · 2020-02-02T20:23:56Z

stroke-dashoffset由于形状轮廓具有双线，因此无法根据属性更改制作动画。它们在下图中用箭头表示。要为路径设置动画，有两个主要要求：路径必须是单一的并且不能中断。

请看下面一个类似的动画示例，但它的实现原理不同：改变圆心的半径r和位置cx

body, html {
  padding: 0;
  margin: 0;
  background: teal;
}

svg {
  display: block;
}

circle {
  animation: circles 2s alternate infinite cubic-bezier(0.5, 0, 0.5, 1);
  cy: 15;
}

circle:nth-child(4n+1) {
  fill: darkorange;
}

circle:nth-child(4n+2) {
  fill: gold;
}

circle:nth-child(4n+3) {
  fill: teal;
}

circle:nth-child(4n+4) {
  fill: tomato;
}

circle:nth-child(0) {
  animation-delay: 0s;
  cx: 61;
  r: 8.5;
}

circle:nth-child(1) {
  animation-delay: -0.15s;
  cx: 59;
  r: 9;
}

circle:nth-child(2) {
  animation-delay: -0.3s;
  cx: 57;
  r: 9.5;
}

circle:nth-child(3) {
  animation-delay: -0.45s;
  cx: 55;
  r: 10;
}

circle:nth-child(4) {
  animation-delay: -0.6s;
  cx: 53;
  r: 10.5;
}

circle:nth-child(5) {
  animation-delay: -0.75s;
  cx: 51;
  r: 11;
}

circle:nth-child(6) {
  animation-delay: -0.9s;
  cx: 49;
  r: 11.5;
}

circle:nth-child(7) {
  animation-delay: -1.05s;
  cx: 47;
  r: 12;
}

circle:nth-child(8) {
  animation-delay: -1.2s;
  cx: 45;
  r: 12.5;
}

circle:nth-child(9) {
  animation-delay: -1.35s;
  cx: 43;
  r: 13;
}

circle:nth-child(10) {
  animation-delay: -1.5s;
  cx: 41;
  r: 13.5;
}

circle:nth-child(11) {
  animation-delay: -1.65s;
  cx: 39;
  r: 14;
}

circle:nth-child(12) {
  animation-delay: -1.8s;
  cx: 37;
  r: 14.5;
}

circle:nth-child(13) {
  animation-delay: -1.95s;
  cx: 35;
  r: 15;
}

circle:nth-child(14) {
  animation-delay: -2.1s;
  cx: 33;
  r: 15.5;
}

circle:nth-child(15) {
  animation-delay: -2.25s;
  cx: 31;
  r: 16;
}

circle:nth-child(16) {
  animation-delay: -2.4s;
  cx: 29;
  r: 16.5;
}

circle:nth-child(17) {
  animation-delay: -2.55s;
  cx: 27;
  r: 17;
}

circle:nth-child(18) {
  animation-delay: -2.7s;
  cx: 25;
  r: 17.5;
}

circle:nth-child(19) {
  animation-delay: -2.85s;
  cx: 23;
  r: 18;
}

circle:nth-child(20) {
  animation-delay: -3s;
  cx: 21;
  r: 18.5;
}

circle:nth-child(21) {
  animation-delay: -3.15s;
  cx: 19;
  r: 19;
}

circle:nth-child(22) {
  animation-delay: -3.3s;
  cx: 17;
  r: 19.5;
}

circle:nth-child(23) {
  animation-delay: -3.45s;
  cx: 15;
  r: 20;
}

circle:nth-child(24) {
  animation-delay: -3.6s;
  cx: 13;
  r: 20.5;
}

circle:nth-child(25) {
  animation-delay: -3.75s;
  cx: 11;
  r: 21;
}

circle:nth-child(26) {
  animation-delay: -3.9s;
  cx: 9;
  r: 21.5;
}

circle:nth-child(27) {
  animation-delay: -4.05s;
  cx: 7;
  r: 22;
}

circle:nth-child(28) {
  animation-delay: -4.2s;
  cx: 5;
  r: 22.5;
}

circle:nth-child(29) {
  animation-delay: -4.35s;
  cx: 3;
  r: 23;
}

circle:nth-child(30) {
  animation-delay: -4.5s;
  cx: 1;
  r: 23.5;
}

circle:nth-child(31) {
  animation-delay: -4.65s;
  cx: -1;
  r: 24;
}

circle:nth-child(32) {
  animation-delay: -4.8s;
  cx: -3;
  r: 24.5;
}

circle:nth-child(33) {
  animation-delay: -4.95s;
  cx: -5;
  r: 25;
}

circle:nth-child(34) {
  animation-delay: -5.1s;
  cx: -7;
  r: 25.5;
}

circle:nth-child(35) {
  animation-delay: -5.25s;
  cx: -9;
  r: 26;
}

circle:nth-child(36) {
  animation-delay: -5.4s;
  cx: -11;
  r: 26.5;
}

circle:nth-child(37) {
  animation-delay: -5.55s;
  cx: -13;
  r: 27;
}

circle:nth-child(38) {
  animation-delay: -5.7s;
  cx: -15;
  r: 27.5;
}

circle:nth-child(39) {
  animation-delay: -5.85s;
  cx: -17;
  r: 28;
}

circle:nth-child(40) {
  animation-delay: -6s;
  cx: -19;
  r: 28.5;
}

circle:nth-child(41) {
  animation-delay: -6.15s;
  cx: -21;
  r: 29;
}

circle:nth-child(42) {
  animation-delay: -6.3s;
  cx: -23;
  r: 29.5;
}

circle:nth-child(43) {
  animation-delay: -6.45s;
  cx: -25;
  r: 30;
}

circle:nth-child(44) {
  animation-delay: -6.6s;
  cx: -27;
  r: 30.5;
}

circle:nth-child(45) {
  animation-delay: -6.75s;
  cx: -29;
  r: 31;
}

@keyframes circles {
  to {
    transform: translate(5%, 50%);
  }
}

 <svg viewbox="0 -5 70 70">  
  <circle /><circle /><circle /><circle /><circle />
  <circle /><circle /><circle /><circle /><circle />
  <circle /><circle /><circle /><circle /><circle />
  <circle /><circle /><circle /><circle /><circle />
  <circle /><circle /><circle /><circle /><circle />
  <circle /><circle /><circle /><circle /><circle />
  <circle /><circle /><circle /><circle /><circle />
  <circle /><circle /><circle /><circle /><circle />
  <circle /><circle /><circle /><circle /><circle />
</svg>

来源 @web-tiki

Alexandr_TT · Answer 2 · 2020-02-03T03:19:10Z

⦵ 使用 unicode 字符⦵ 作为圆圈

并且动画可以沿着路径绘制任何形状。

<animate dur="40s" repeatCount="5" attributeName="startOffset" values="0%;200%;0%"/>

.container {
   width:100%;
   height:100%;
   }

<div class="container" >
  <svg  viewBox="0 0 600 400">
 
  <defs>
   <linearGradient id="LG" >
    <stop offset="20%" stop-color="green"/>
	<stop offset="40%" stop-color="crimson"/>
	<stop offset="100%" stop-color="gold"/>
  </linearGradient> 
     <linearGradient id="LG2"  x2="10%" y2="100%">
    <stop offset="70%" stop-color="dodgerblue"/>
	<stop offset="100%" stop-color="yellowgreen"/>
  </linearGradient>
  </defs>
  <rect width="100%" height="100%" fill="url(#LG2)" />
 <path id="pathChain" d="m40 110c17.6-37.3 78.8-31.6 120-30 31.6 1.2 58.4 27.9 90 30 88.1 5.8 188.1-101.2 260-50 57.6 41.1 72.8 153.7 30 210C476.9 352.9 291.9 393.8 230 310 179.2 241.3 380.3 149.5 335.9 76.4 303.6 23.1 198.8 12.5 149 66.3 89.9 130 206.9 286 130 300 61.1 312.6 10 173.4 40 110Z" stroke="grey" fill="none"/> 

 <text  font-size="40"  fill="url(#LG)" >
 <textPath id="result"    xlink:href="#pathChain">
 <tspan >&#10677;  </tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan> 
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan> 
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan>
 <tspan dx="-45">&#10677;</tspan> 
<animate  dur="30s" repeatCount="5" attributeName="startOffset" values="0%;85%;0%"/> 
</textPath>
</text>			
		
</svg>  
</div>

Stranger in the Q · Answer 3 · 2020-08-25T16:22:51Z

Stranger in the Q

2020-08-25T16:22:51Z2020-08-25T16:22:51Z

你可以先隐藏所有的圆圈，然后一个一个地显示出来，结果是这样的：

fetch('https://codepen.io/topicstarter/pen/YBVWKx.html')
  .then(r => r.text())
  .then(html => {
    document.body.innerHTML += html;
    document.querySelectorAll('ellipse').forEach((e,i) => 
      setTimeout(() => e.classList.add('visible'), i*10))
  });

ellipse {
  opacity: 0;
  transition: 100ms;
}

ellipse.visible{
  opacity: 1;
}

<script>
</script>

2

如何为类似形状的绘图设置动画？

根据浏览器窗口的大小调整背景图案的大小

理解for循环的执行逻辑

复制动态数组时出错（C++）

Or and If,elif,else 构造[重复]

如何构建支持 x64 的 APK

如何使按钮的输入宽度？

如何显示对象变量的名称？

如何循环一个函数？

LOWORD 宏有什么作用？

从字符串的开头删除直到并包括一个字符

如何为类似形状的绘图设置动画？

3 个回答

相关问题