作用域
在 Scope 内部声明的 Anime.js 实例可以响应媒体查询、使用自定义根元素、共享默认参数并进行批量还原，从而简化响应式和组件化环境下的工作流程。
可以使用从主 'animejs' 模块导入的 createScope() 方法来创建 Scope
import { createScope } from 'animejs';
const scope = createScope(parameters);或者作为独立模块从 'animejs/scope' 子路径导入
import { createScope } from 'animejs/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>
本节内容