我正在使用Vue构建我的应用程序中的组件。该组件是一个倒计时,范围从
我知道可以通过动画
我需要在我的进度组件中创建以下动画: 动画需要根据天气以平滑的方式遵循路径。路径节点应根据时间插入/更新。
这是我的实际倒计时组件:
X
分钟到00:00
。我知道可以通过动画
svg
来实现所需的结果,但我没有必要的知识。我从未使用过任何svg
库。我需要在我的进度组件中创建以下动画: 动画需要根据天气以平滑的方式遵循路径。路径节点应根据时间插入/更新。
这是我的实际倒计时组件:
var app = new Vue({
el: '#app',
data: {
date: moment(2 * 60 * 1000)
},
computed: {
time: function(){
return this.date.format('mm:ss');
}
},
mounted: function(){
var timer = setInterval(() => {
this.date = moment(this.date.subtract(1, 'seconds'));
if(this.date.diff(moment(0)) === 0){
clearInterval(timer);
alert('Done!');
}
}, 1000);
}
});
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">{{ time }}</div>
这是进度圆的SVG:
<svg x="0px" y="0px" viewBox="0 0 90 90">
<style type="text/css">
.st0{fill:#FFFFFF;}
.st1{fill:none;stroke:#B5B5B5;stroke-miterlimit:10;}
.st2{fill:none;stroke:#408EFF;stroke-linecap:round;stroke-miterlimit:10;}
.st3{fill:#408EFF;}
</style>
<rect class="st0" width="90" height="90"/>
<circle class="st1" cx="45" cy="45" r="40"/>
<path class="st2" d="M45,5c22.1,0,40,17.9,40,40S67.1,85,45,85S5,67.1,5,45S22.9,5,45,5"/>
<circle class="st3" cx="45" cy="5" r="3"/>
</svg>
我该如何达到期望的结果?
欢迎提供任何帮助。
setInterval
是必需的,因为我的进度圆是根据时间而不是百分比工作的。此外,动画并不完美,除了路径末端没有小圆圈之外。 - Caio Kawasaki