默认值
定义了范围的默认属性,这些属性将用于在该范围中创建的所有计时器、动画和时间轴。
接受
一个包含以下可选属性的 Object
名称 | 接受 |
---|---|
播放缓动 | 缓动名称 String | 缓动 Function |
播放速率 | 数字 |
帧率 | 数字 |
循环 | Number | Boolean |
反向 | 布尔值 |
交替 | 布尔值 |
自动播放 | 布尔值 |
持续时间 | Number | Function |
延迟 | Number | Function |
合成 | 合成类型 String | Function |
缓动 | 缓动名称 String | 缓动 Function |
循环延迟 | 数字 |
修饰符 | 修饰符 Function |
onBegin | 回调 Function |
onUpdate | 回调 Function |
onRender | 回调 Function |
onLoop | 回调 Function |
onComplete | 回调 Function |
默认设置代码示例
import { createScope, animate } from 'animejs';
const rows = utils.$('.row');
rows.forEach(($row, i) => {
createScope({
root: $row,
defaults: { ease: `out(${1 + i})` }
})
.add(() => {
animate('.square', {
x: '17rem',
loop: true,
alternate: true
});
});
});
<div class="medium row">
<div class="square"></div>
<div class="padded label">scope 1</div>
</div>
<div class="medium row">
<div class="square"></div>
<div class="padded label">scope 2</div>
</div>
<div class="medium row">
<div class="square"></div>
<div class="padded label">scope 3</div>
</div>