如何为绘图效果设置动画？ （最好只有 css3）

Posted 2023-03-06

【中文标题】如何为绘图效果设置动画？ （最好只有 css3）

【英文标题】：How can I animate a drawing effect? (Preferably css3 only)

【发布时间】：2012-12-25 19:48:03

【问题描述】：

我想制作一个看起来像this 的树的绘图效果，一个像here 这样的渐进线。我宁愿只使用css3 和svg/canvas 和js。你有什么想法吗？

更多信息：

我尝试将一棵树切成小块并逐块制作外观动画，但这不是草书，因为它有很多关于同步延迟和持续时间的细节，因为每块都有不同的长度等等。所有这些都是在没有 svg 的情况下制作的。如果我可以为线条路径设置动画，我现在想要。

【问题讨论】：

What have you tried?

我试图将一棵树切成小块并逐块制作动画，但这不是草书，因为它有很多关于 sincronising 延迟和持续时间的细节，因为每一块都有不同的长度等等。所有这些都是在没有 svg 的情况下制作的。如果我可以为线条路径设置动画，我现在想这样做。

@DanOvidiuBoncut 使用更多信息更新您的问题，而不是添加大型 cmets...

【参考方案1】：

是的，看看this rendering of the Bahamas Logo using CSS 3

它描述了他的过程和技术。也可以查看源码。

还有更多可以找到here

更新：

也许这个Sencha Animator product 可能有帮助？

【参考方案2】：

您可以使用纯 SVG 来做到这一点。 SVG 为声明性动画提供了<animate> 元素。

您想要的（据我所知）是一条看起来好像是在观众眼前绘制的线。您可以为此目的使用stroke-dasharray 属性。此属性使用一系列值定义破折号模式，这些值定义破折号和间隙的长度。策略是：首先，我们有一个长度为 0 的破折号和一个至少与整个路径一样长的间隙。这意味着我们什么也看不到（或者只看到路径开始的第一个点）。最后，我们想要一个至少是路径全长的破折号。我们希望破折号逐渐变得越来越长，直到达到最终长度（完整路径的长度）。

最简单的情况是：

<svg xmlns="http://www.w3.org/2000/svg"  >
  <!-- This is the path of a spiral -->
  <path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
      stroke- stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305">
    <!-- This defines the animation: 
         The path is roughly 2305 units long, it will be drawn in 5 seconds -->
    <animate from="0,2305" to="2305,0" dur="5s"
        attributeName="stroke-dasharray" repeatCount="indefinite"/>
  </path>
</svg>

可以使用多个值（使用values 属性）而不是一个from 和一个to 值来完成更复杂的事情：

<svg xmlns="http://www.w3.org/2000/svg"  >
  <path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
   stroke- stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305">
    <animate attributeName="stroke-dasharray" dur="5s" repeatCount="indefinite" 
      values="0,2305;
              2000,305;
              2305,0"/>
  </path>
</svg>

您可以使用keyTimes 属性指定精确的时间（何时达到values 中列出的值）：

<svg xmlns="http://www.w3.org/2000/svg"  >
  <path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
   stroke- stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305">
    <animate attributeName="stroke-dasharray" dur="5s" repeatCount="indefinite" 
      values="0,2305;
              2000,305;
              2305,0" 
      keyTimes="0;.9;1"/>
  </path>
</svg>

看到这个in action on Tinkerbin。

使用 CSS3 可以完成类似的事情：

<svg xmlns="http://www.w3.org/2000/svg"  >
  <style type="text/css">
    path 
      animation-name:animateDash;
      animation-duration:5s;
      animation-iteration-count:infinite;
    
    @keyframes animateDash 
      fromstroke-dasharray:0,2305
      to  stroke-dasharray:2305,0
     
  </style>
  <path d="m 7.1428565,220.9336 c 0,0 13.6660115,54.75386 218.5714335,51.42857 C 430.61971,269.03688 478.47682,99.194335 206.69537,110.78149 -65.086093,122.36866 45.497658,213.22607 210.28635,207.29759 375.07503,201.3691 429.75297,97.468925 207.14285,82.362175 -15.467268,67.255425 64.868608,160.66909 210,153.79075 c 145.13139,-6.87834 137.69998,-93.087405 11.42857,-99.999995 -126.271412,-6.9126 -150.382292,28.03248 -24.28571,35.71428 126.09659,7.6818 72.6601,-44.83727 -5.71429,-84.2857095"
    stroke- stroke-linecap="round" fill="none" stroke="black" stroke-dasharray="0,2305"/>
</svg>

自己决定你喜欢哪种方法。