尝试用svg实现简单的动画效果。关于Svg的具体知识点本文不再赘述，仅结合所举实例的需求点对实现思路进行讲解。先明确一下具体要求：白轨需要从起点到终点旋转，由用户的成长值决定。动画效果如下：如果没有效果，请点这里。动画可以分为两部分：粉色圆形轨道和粉色圆形尾巴。绘制粉色圆轨迹的相关代码：使用path画一个半径为100的圆，起点M11010，右半圆a1001000010200，左半圆a1001000010-200，闭合路径Z。对SvgPaths不了解的同学建议自行科普~M=movetoL=linetoH=horizo??ntallinetoV=verticallinetoC=curvetoS=smoothcurvetoQ=quadraticBelziercurveT=smoothquadraticBelziercurvetoA=ellipticalArcZ=closepath可以优先考虑理解arcAa:Arxryx-axis-rotationlarge-arc-flagsweep-flagxyarxryx-axis-rotationlarge-arc-flagsweep-flagdxdy路径后如何添加画线效果画了？请注意stroke-dasharray和stroke-dashoffset。属性stroke-dasharray控制stroked-dashlines的patternpattern；属性stroke-dashoffset指定从破折号图案的路径开始的距离。当stroke-dashoffset偏移量为路径长度时，粉红色拖尾完全不可见，逐渐将偏移量减小为0使其完全渲染。这就像在热狗上挤果酱，应该从左到右。但是您从右侧向右侧挤压，抵消了热狗的长度。热狗上没有果酱，只能通过减少offset来添加。路径长度指定stroke-dasharray，表示操作空间为整个热狗。友情提示如何获取路径长度：varpathLength=$('path')[0].getTotalLength();画一个粉红色的圆形尾巴尾巴可以用一张图片来画：也可以使用渐变绘制：添加尾部动画：动画路径，执行时间、速度曲线等属性要和粉圈轨迹保持一致~控制动画的结束位置再次明确具体要求：白色轨迹需要从起点到终点旋转，由用户成长决定价值。假设轨迹线的长度占圆的总长度的百分比已知，如何控制动画结束位置？根据百分比算出描线的长度，然后巴拉巴拉算出坐标点……数学不好的，绕一圈吧。可以控制动画执行的次数repeatDur...vartotalTime=3;varpercent=0.8;varrunAnimate=function(){vardurTime=totalTime*percent;$circleAnimate[0].setAttribute('repeatDur',durTime+'s');$tailAnimate[0].setAttribute('repeatDur',durTime+'s');$circleAnimate[0].beginElement();$tailAnimate[0].beginElement();};本例源码demo作者：我的小喵后花园：https://sunmengyuan.github.io...我的github：https://github.com/sunmengyuan
