defaults
定义 Scope 默认属性,这些属性随后用于该作用域内创建的所有 Timer, Animation 和 Timeline 。
接受
一个具有以下可选属性的对象:
| 名称 | 接受 |
|---|---|
| playbackEase | 缓动名称 String | 缓动 Function |
| playbackRate | Number |
| frameRate | Number |
| loop | Number | Boolean |
| reversed | Boolean |
| alternate | Boolean |
| autoplay | Boolean |
| duration | Number | Function |
| delay | Number | Function |
| composition | 组合类型 String | Function |
| ease | 缓动名称 String | 缓动 Function |
| loopDelay | Number |
| modifier | 修饰符 Function |
| onBegin | 回调 函数 |
| onUpdate | 回调 函数 |
| onRender | 回调 函数 |
| onLoop | 回调 函数 |
| onComplete | 回调 函数 |
默认代码示例
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>