refresh()JS
通过将 从 的值更新为当前目标值,并将 到 的值更新为新计算的值,重新计算由 函数基值 定义的动画属性值。
只有可动画的属性值会被重新计算,duration 和 delay 无法刷新。
返回
动画本身
可以与其他动画方法链式使用。
refresh() 代码示例
import { animate } from 'animejs';
const [ $refreshButton ] = utils.$('.refresh');
const animation = animate('.square', {
x: () => utils.random(0, 17) + 'rem',
y: () => utils.random(-1, 1) + 'rem',
rotate: () => utils.random(-360, 360, 1),
scale: () => utils.random(.1, 1.5, 2),
duration: 750,
loop: true,
onLoop: self => self.refresh()
});
const refreshAnimation = () => animation.refresh().restart();
$refreshButton.addEventListener('click', refreshAnimation);
<div class="medium row">
<div class="square"></div>
</div>
<div class="medium row">
<div class="square"></div>
</div>
<div class="medium row">
<fieldset class="controls">
<button class="button refresh">Refresh & Restart</button>
</fieldset>
</div>
#resize .large.log.row {
margin-top: 1rem;
}