作用域 V4
在作用域内声明的 Anime.js 实例可以响应媒体查询，使用自定义根元素，共享默认参数，并进行批量还原，从而简化响应式和基于组件环境下的工作。
作用域通过 createScope() 函数创建。
import { createScope } from 'animejs';
const scope = createScope(parameters);参数
| 名称 | 接受 |
|---|---|
| 参数 (可选) | 作用域参数 |
返回
作用域
作用域代码示例
import { animate, utils, createScope } from 'animejs';
createScope({
mediaQueries: {
isSmall: '(max-width: 200px)',
reduceMotion: '(prefers-reduced-motion)',
}
})
.add(self => {
const { isSmall, reduceMotion } = self.matches;
if (isSmall) {
utils.set('.square', { scale: .5 });
}
animate('.square', {
x: isSmall ? 0 : ['-35vw', '35vw'],
y: isSmall ? ['-40vh', '40vh'] : 0,
loop: true,
alternate: true,
duration: reduceMotion ? 0 : isSmall ? 750 : 1250
});
});<div class="iframe-content resizable">
<div class="large centered row">
<div class="col">
<div class="square"></div>
</div>
</div>
</div>
本节内容