返回

svg实现拼多多金猪助力buffer动画

Created By ZOU on May 27 2020

最近在做公司项目的时候有个需求是在头像上加光圈进度条的效果,类似拼多多里金猪助力buffer的动画,刚开始的时候是准备让设计支持的,做一个json文件,我直接使用就行(详见lottie动画在vue项目中的使用),但是后来想着自己用svg试着做一做,但是之前并没有写过svg,于是去百度了一下(面向百度编程 XD)。

经过查阅一系列资料,终于把效果完成了,如下:

效果看起来很简单,代码如下:

<svg viewBox="0 0 108 108" class="avatar__buffer">
<defs>
<linearGradient y2="0.4" x2="0" y1="0" x1="0" id="svg_13">
<stop offset="0" stop-color="#f2d061"/>
<stop offset="1" stop-color="#ea7b21"/>
</linearGradient>
<pattern id="patter-0" height="1" width="1" patternContentUnits="objectBoundingBox">
<image height="1" width="1" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../assets/avatar-coin.png"></image>
</pattern>
</defs>
<circle id="donut-graph" class="t2" r="50" cy="54" cx="54" stroke-width="4" stroke="rgba(255,255,255, .52)" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
<circle id="donut-graph2" class="t1" r="50" cy="54" cx="54" stroke-width="4" stroke="url(#svg_13)" stroke-linejoin="round" stroke-linecap="round" fill="none" stroke-dasharray="314.16" stroke-dashoffset="314.16">
<animate attributeName="stroke-dashoffset" id="a1" from="314.16" to="0" dur="1.5s" repeatCount="indefinite" />
</circle>
<path d="m104,54c0,27.62431 -22.37569,50 -50,50c-27.62431,0 -50,-22.37569 -50,-50c0,-27.62431 22.37569,-50 50,-50c27.62431,0 50,22.37569 50,50z" stroke-width="0" stroke-linejoin="round" stroke-linecap="round" fill="none" id="theMotionPath" ></path>
<circle fill="url(#patter-0)" r="5">
<animateMotion dur="1.5s" repeatCount="indefinite">
<mpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#theMotionPath"></mpath>
</animateMotion>
</circle>
</svg>

效果基本全是通过svg实现的。

实现原理是通过svg创建路径,并且通过animateMotion让图片按照路径进行运动,路径我是通过svg在线编辑器可视化编辑出来的。总体效果还算满意。

标签: svg