anime.js

常用参数

属性	类型	说明	默认值
targets	String / Node节点	DOM元素选择器，也可以是类名、id、标签名等字符串	null
duration	Number	动画运行时间，单位是毫秒	1000
delay	Number	动画开始运行延迟多少时间，单位是毫秒	0
endDelay	Number	在动画结束时添加一些额外的时间	0
easing	String	动画运行速率，更多值可参考文档	easeOutElastic(1, .5)
direction	String	定义动画的方向，normal：动画进度从 0 到 100%，reverse：动画进度从 100% 变为 0%，alternate：动画进度从 0% 到 100% 然后回到 0%
loop	Number / true	设置为具体数字，表示循环几次；设为true，表示无限循环
autoplay	Boolean	true：允许自动播放，false：默认动画是暂停的	false

anime支持操作DOM节点和js对象与数组，任何css属性都可以被动画化，支持时间轴控制动画等。更多参数值可以参考文档

svg动画

javascript

const motionPath = document.querySelector('#motion-path'); // 获取svg图像的oath标签
const path = anime.path(motionPath); // 将SVG的DOM转化为anime所需的路径
anime({
  targets: '.ball',
  translateX: path('x'), // 返回 SVG 路径的 x 轴值 单位：px
  translateY: path('y'), // 返回 SVG 路径的 y 轴值 单位：px
  rotate: path('angle'), // 返回 SVG 路径的角度值 单位：deg
  duration: 3000, // 动画运行时间
  easing: 'linear', // 动画运行速率
  loop: true, // 是否循环动画
  direction: 'alternate', // 动画运行100%后，反方向运行
});

anime的svg动画需要将svg图形插入DOM节点。如果希望用户看不到svg图像，可以使用svg图像不可见即可。

时间轴动画

javascript

const tl = anime.timeline({
    duration: 500,
    easing: 'easeOutExpo',
    loop: true
  });

  tl
  .add({
    targets: '.item1',
    translateY: 260,
    // 重写easing单个元素
    easing: 'spring',
  })
  .add({
    targets: '.item2',
    translateY: 260,
  }, '+=1')
  .add({
    targets: '.item2',
    rotate: 180
  }, '+=1')
  .add({
    targets: '.item3',
    translateY: 260,
    scale: 2,
    complete: (anim) => {
      anime.remove('.item2');
    }
  }, '+=1')

item1、item2、item3依次运动，运动结束，item2就移出动画序列，然后重复执行动画。

类型	OFFSET	示例	说明
String	'+='	'+=200'	在上一个动画结束后 200 毫秒开始
String	'-='	'-=200'	在上一个动画结束前 200 毫秒开始
String	Number	100	从 100 毫秒开始，与时间轴中的动画所处的位置无关

完整示例

html


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .g-svg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .g-wrap {
      position: relative;
      width: 400px;
      height: 160px;
      margin: auto;
    }

    .ball {
      position: absolute;
      left: -30px;
      top: -20px;
      width: 40px;
      height: 40px;
      clip-path: polygon(0 0, 100% 50%, 0 100%);
      background: linear-gradient(#fc0, #f0c);
    }
  </style>
</head>

<body>
  <svg class="g-svg" width="400" height="160" xmlns="http://www.w3.org/2000/svg">
    <path id="motion-path" d="M 10 80 C 80 10, 130 10, 190 80 S 300 150, 360 80" stroke="black" fill="transparent" />
  </svg>
  <div class="g-wrap">
    <div class="ball"></div>
  </div>
</body>
<script src="https://unpkg.com/animejs@3.0.1/lib/anime.min.js"></script>
<script>
  const motionPath = document.querySelector('#motion-path');
  const path = anime.path(motionPath);
  anime({
    targets: '.ball',
    translateX: path('x'),
    translateY: path('y'),
    rotate: path('angle'),
    duration: 3000,
    easing: 'linear',
    loop: true,
    direction: 'alternate',
  });
</script>
</html>

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrap {
      width: 400px;
      height: 300px;
      border: 1px solid #333;
      display: flex;
      justify-content: space-around;
      margin: 0 auto;
    }
    .item {
      width: 40px;
      height: 40px;
      border-radius: 100%;
      background: linear-gradient(#fc0, #f0c);
      text-align: center;
      line-height: 40px;
      color: #fff;
    }
    .item2 {
      border-radius: 0%;
    }
  </style>
</head>
<body>
<div class="wrap">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
</div>
<script src="https://unpkg.com/animejs@3.2.1/lib/anime.min.js"></script>
<script>
  const tl = anime.timeline({
    duration: 500,
    easing: 'easeOutExpo',
    loop: true
  });

  tl
  .add({
    targets: '.item1',
    translateY: 260,
    // 重写easing单个元素
    easing: 'easeInOutBounce',
  })
  .add({
    targets: '.item2',
    translateY: 260,
  }, '+=1')
  .add({
    targets: '.item2',
    rotate: 180
  }, '+=1')
  .add({
    targets: '.item3',
    translateY: 260,
    scale: 2,
    complete: (anim) => {
      anime.remove('.item2');
    }
  }, '+=1')
</script>
</body>
</html>

anime.js ​

常用参数 ​

svg动画 ​

时间轴动画 ​

完整示例 ​

anime.js

常用参数

svg动画

时间轴动画

完整示例