在 vanilla JS 中使用

在 vanilla JavaScript（原生 JS）中使用 Anime.js 非常简单，直接导入你需要的模块，然后开始写动画就行。

下面这个示例展示了如何在原生 JS 项目中使用 Anime.js 的方法。

原生 JS 示例代码

JavaScript + HTML：

import { animate, utils, createSpring } from 'animejs';
const [ $logo ] = utils.$('.logo.js');
const [ $button ] = utils.$('button');
let rotations = 0;
// 创建一个带有弹性效果的循环动画
animate('.logo.js', {
  scale: [
    { to: 1.25, ease: 'inOut(3)', duration: 200 },
    { to: 1, ease: createSpring({ stiffness: 300 }) }
  ],
  loop: true,
  loopDelay: 250,
});
// 让 logo 可以围绕中心点拖拽
createDraggable('.logo.js', {
  container: [0, 0, 0, 0],
  releaseEase: createSpring({ stiffness: 200 })
});
// 点击按钮让 logo 旋转
const rotateLogo = () => {
  rotations++;
  $button.innerText = `rotations: ${rotations}`;
  animate($logo, {
    rotate: rotations * 360,
    ease: 'out(4)',
    duration: 1500,
  });
}
$button.addEventListener('click', rotateLogo);