范围
在一个作用域内声明的 Anime.js 实例可以响应媒体查询，使用自定义根元素，共享默认参数，并批量恢复，从而简化在响应式和基于组件的环境中的工作。
作用域是使用从主 'animejs' 模块导入的 createScope() 方法创建的：
import { createScope } from 'animejs';
const scope = createScope(parameters);或者作为独立模块从 'animejs/scope' 子路径 导入：
import { createScope } from 'animejs/scope';参数
| 名称 | 接受 |
|---|---|
| parameters (opt) | Scope 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>
在本节