关键词：
【中文标题】如何为绘图效果设置动画？ （最好只有 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>
自己决定你喜欢哪种方法。
【讨论】：
如何为导航栏设置 CAGradientLayer 动画
】如何为导航栏设置CAGradientLayer动画【英文标题】：HowtoanimateCAGradientLayerforanavigationbar【发布时间】：2019-06-2603:56:41【问题描述】：我们的导航栏使用CAGradientLayer来产生渐变效果。现在我们希望渐变颜色动态变化我们使用下面的... 查看详情
如何为 UITableView 标题视图设置动画
】如何为UITableView标题视图设置动画【英文标题】：HowtoanimateUITableViewheaderview【发布时间】：2013-05-1309:19:09【问题描述】：我需要为tableview标题视图的插入设置动画。我希望表格行在标题视图展开其框架时向下滑动。到目前为止... 查看详情
如何为 StreamBuilder 生成的小部件设置动画？
】如何为StreamBuilder生成的小部件设置动画？【英文标题】：HowtoanimatewidgetgeneratedbyStreamBuilder?【发布时间】：2019-08-0605:15:31【问题描述】：我正在尝试使用StreamBuilder生成屏幕内容。它在bloc模式下运行良好，但有一件事我正在努... 查看详情
如何为 DropShadowEffect 的不透明度设置动画？
】如何为DropShadowEffect的不透明度设置动画？【英文标题】：HowtoanimateOpacityofaDropShadowEffect?【发布时间】：2010-11-2808:44:06【问题描述】：我有一个使用以下样式的带有边框的WPF项目。计划是让发光效果在鼠标移过边框时淡入，在... 查看详情
如何为自定义视图选择设置膨胀和颜色变化的动画？
】如何为自定义视图选择设置膨胀和颜色变化的动画？【英文标题】：Howtoanimateaswellandcolorchangeforacustomviewselection?【发布时间】：2014-12-1222:51:18【问题描述】：我有自定义UIView对象的层次结构。叶视图是可选的。他们有一个isSelec... 查看详情
如何为使用 CGBitmapContextCreate() 创建的绘图画布设置背景颜色？
】如何为使用CGBitmapContextCreate()创建的绘图画布设置背景颜色？【英文标题】：HowtosetabackgroundcolorforthedrawingcanvascreatedwithCGBitmapContextCreate()?【发布时间】：2011-05-3013:04:37【问题描述】：如果我使用设备颜色空间（RGBA，因此使用alp... 查看详情
如何为 CAShapeLayer 路径和填充颜色设置动画
】如何为CAShapeLayer路径和填充颜色设置动画【英文标题】：HowtoanimateCAShapeLayerpathandfillColor【发布时间】：2013-03-2704:04:18【问题描述】：？如何为strokeEnd设置动画以显示正在绘制的路径？以及如何为填充颜色设置动画？【问题讨... 查看详情
如何为剪切路径设置动画
】如何为剪切路径设置动画【英文标题】：HowcanIanimateaClippingPath【发布时间】：2011-05-1019:52:08【问题描述】：我正在尝试为剪切路径设置动画。我从MaskAnimations(ClippingPathAnimations)InSilverlightWithoutaLineofCode读到我应该为剪辑路径设置... 查看详情
如何为 UITableViewCell 设置动画
】如何为UITableViewCell设置动画【英文标题】：HowtoanimateaUITableViewCell【发布时间】：2018-05-1102:13:30【问题描述】：我有一个UITableViewCell。当单元格进入视野时，我正在尝试为进度条设置动画。我尝试了以下方法，但它什么也没做... 查看详情
如何为所有精灵图像设置动画？
】如何为所有精灵图像设置动画？【英文标题】：Howtoanimateallspriteimages?【发布时间】：2017-09-0502:38:34【问题描述】：当您选择的图像精灵不包含一行图像时，如何为所有图像精灵设置动画？**这里的这个例子有一个单行图像**链... 查看详情
如何为标签栏的项目设置动画
】如何为标签栏的项目设置动画【英文标题】：Howtoanimatetabbar\'sitems【发布时间】：2019-03-2903:44:33【问题描述】：在我的Swift应用程序中，我有一个处理UITabBar的类。classCustomTabBar:UITabBaroverridefuncawakeFromNib()super.awakeFromNib()当用户点... 查看详情
Android：如何为viewstub设置动画？
】Android：如何为viewstub设置动画？【英文标题】：Android:howtoanimateviewstub?【发布时间】：2011-03-0723:32:37【问题描述】：如何用一些动画来膨胀视图？【问题讨论】：【参考方案1】：首先调用inflate()方法，然后在返回的视图上设置... 查看详情
如何为 CAGradientLayer 色点设置动画？
】如何为CAGradientLayer色点设置动画？【英文标题】：HowtoanimateCAGradientLayercolorpoints?【发布时间】：2018-08-2016:03:54【问题描述】：我在为CAGradientLayer角度设置动画时遇到问题。CAGradientLayer中的角度通过起点和终点属性表示。我想以... 查看详情
我如何为 innerHTML 设置动画
】我如何为innerHTML设置动画【英文标题】：howcouldIanimateinnerHTML【发布时间】：2020-10-0617:29:58【问题描述】：我希望为下面的“这是不允许的”文本设置动画。document.getElementById("ve").innerHTML=\'<pstyle="text-align:center"><h1><sp... 查看详情
您如何为视图填充的变化设置动画？
】您如何为视图填充的变化设置动画？【英文标题】：Howdoyouanimateachangeinaview\'spadding?【发布时间】：2013-08-2415:00:11【问题描述】：我想对视图填充的变化进行动画处理。翻译动画的放置位置与我要应用的填充相同。TranslateAnimatio... 查看详情
如何为“可见性：隐藏”设置动画？
】如何为“可见性：隐藏”设置动画？【英文标题】：Howtoanimate"visibility:hidden"?【发布时间】：2015-08-2201:03:39【问题描述】：这是我的问题...你能帮帮我吗？$(".button").hover(function()$(\'.class\').css(opacity:1.0,visibility:"hidden").anim... 查看详情
如何为 UIView 动画设置相同的速度
】如何为UIView动画设置相同的速度【英文标题】：HowtosetsamespeedtoUIViewanimation【发布时间】：2016-03-1117:26:53【问题描述】：我想为我的UISlider设置速度，使其移动更顺畅。这是我尝试动画的方式：UIView.animateWithDuration(6,delay:0.0,option... 查看详情
如何为底部显示的消息设置动画？
】如何为底部显示的消息设置动画？【英文标题】：Howtoanimateamessagethatappearsonbottom?【发布时间】：2015-07-2614:48:30【问题描述】：我在底部显示一条消息：Msg.qmlimportQtQuick2.4Itempropertyaliastext:mf.textanchors.fill:parentantialiasing:falseopacity:0... 查看详情