范围 V4
在 Scope 中声明的 Anime.js 实例可以响应媒体查询、使用自定义根元素、共享默认参数以及批量还原，从而简化响应式和基于组件的环境中的工作。
Scope 是使用 createScope() 函数创建的。
import { createScope } from 'animejs';
const scope = createScope(parameters);参数
| 名称 | 接受 |
|---|---|
| 参数 (可选) | Scope 参数 |
返回
范围
Scope 代码示例
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>
在本节中