默认值
定义作用域的默认属性,这些属性随后会应用于在该作用域内创建的所有 Timer(计时器)、Animation(动画)和 Timeline(时间轴)。
接受
一个包含以下可选属性的 Object(对象)
| 名称 | 接受 |
|---|---|
| playbackEase | 缓动名称 String(字符串) | 缓动 Function(函数) |
| 播放速率 | 数字 |
| 帧率 | 数字 |
| 循环 | Number(数字) | Boolean(布尔值) |
| 反向 | 布尔值 |
| 交替 | 布尔值 |
| 自动播放 | 布尔值 |
| 持续时间 | Number(数字) | Function(函数) |
| 延迟 | Number(数字) | Function(函数) |
| composition | 合成类型 String(字符串) | Function(函数) |
| ease | 缓动名称 String(字符串) | 缓动 Function(函数) |
| 循环延迟 | 数字 |
| modifier | 修改器 Function(函数) |
| onBegin | 回调 Function(函数) |
| onUpdate | 回调 Function(函数) |
| onRender | 回调 Function(函数) |
| onLoop | 回调 Function(函数) |
| onComplete | 回调 Function(函数) |
defaults 代码示例
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>