animation - 如何在 SVG.js 中暂停循环动画?
问题描述
我有一个看起来像这样的循环动画:
foreground.animate(1000, '>').stroke({ opacity: 0, width: 34 }).loop();
我想在每个循环中加入 800 毫秒的延迟。特别是在每次笔画动画到{ opacity: 0, width: 34 }
. 我尝试在动画中添加延迟:
foreground.animate(1000, '>', 800).stroke({ opacity: 0, width: 34 }).loop();
…但这只是延迟了第一个循环。然后我尝试添加delay()
:
foreground.animate(1000, '>').stroke({ opacity: 0, width: 34 }).delay(800).loop();
……但这也只会增加一次延迟。
是否可以让每个循环在每个循环开始时包含 800 毫秒的延迟?
解决方案
如果我理解正确,实现此目的的一种方法是将动画相关代码放在一个函数中,并在每个动画结束时调用该函数:
function cycle() {
this.stroke({width: 0, opacity: 1})
.animate(1000, '>', 800)
.stroke({opacity:0, width: 34})
.after(cycle);
}
然后我们可以使用cycle.apply(foreground)
getthis
成为被转换的元素并开始动画:
var draw = SVG('content').size(500, 300)
var circle = draw.circle(100).attr({ fill: 'steelblue' }).move(200,20)
cycle.apply(circle);
function cycle() {
this.stroke({width: 0, opacity: 1})
.animate(1000, '>', 800)
.stroke({opacity:0, width: 34})
.after(cycle);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.5/svg.js"></script>
<div id="content"></div>
推荐阅读
- android - 将参数传递给嵌套的导航架构组件图
- html - Html 文本对媒体标签没有反应
- python - All permutations where 0/1 are added to each column of a dataframe row
- python - 按下不同小部件中的按钮后如何更新小部件?
- gradle - kotlin sourcesJar to debug library
- mysql - sqlite3,如何在第二行的位置插入值
- android - 如何解决“无法更新应用程序(错误代码:901)”错误?
- react-native - 在 React Native ScrollView 中获取图像的可见区域
- java - 如何在 java struts 框架中搜索带撇号的名称
- swift - Download audio and play in AVAudioPlayer