安装使用

npm install animejs
import anime from "animejs";

参数说明

参数 默认值 取值 说明
delay 0 number,function(el, index, total) 动画延迟 ms
duration 1000 number,function(el, index, total) 持续时间 ms anime.stagger(200)
autoplay true boolean 自动播放
loop false number, boolean 定义动画往复循环
direction normal ‘normal’, ‘reverse’, ‘alternate’ 动画方向
easing easeOutElastic – 时间曲线
elasticity 400 number
round false number, boolean 向上舍入为x小数
begin undefined function(anime)
update undefined function(anime)
complete undefined function(anime)

动画目标对象

  1. CSS 选择器，不可使用伪元素
  2. DOM 节点或节点集合
  3. JAVASCRIPT 对象，必须包含一个数字属性
  4. 数组 
1
2
3
4
anime({
  targets: ['.el', '.el-02', '.el-03'],
  translateX: 250
});

可动画的属性

  1. CSS 属性，大多数属性会导致布局更改或重绘，优先考虑 opacity、transforms
  2. 包含数值的 JAVASCRIPT 对象属性
  3. 包含数值的 DOM 属性
  4. SVG 属性

动画赋值方式

  1. 无单位数值：原始值具有单位会自动补全
  2. 相对数值：’+=、-=、*=‘ number
  3. 颜色：#ffffff、RGBA、HSLA
  4. 强制动画以指定值开始 [50%, 100%]
  5. 函数返回值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
anime({
  targets: '.el',
  translateX: function(el) {
    return el.getAttribute('data-x');
  },
  translateY: function(el, i) {
    return 50 + (-50 * i);
  },
  scale: function(el, i, l) {
    return (l - i) + .25;
  },
  rotate: function() { return anime.random(-360, 360); },
  borderRadius: function() { return ['50%', anime.random(10, 35) + '%']; },
  duration: function() { return anime.random(1200, 1800); },
  delay: function() { return anime.random(0, 400); },
  direction: 'alternate',
  loop: true
});

关键帧

动画关键帧使用 keyframes 属性中的数组定义

1
2
3
4
5
keyframes: [
    {translateY: -40},
    {translateX: 250},
    {translateY: 40}
  ],

交错动画

anime.stagger(value, options)

  1. 基础交错
    delay: anime.stagger(100) 每个元素的延迟增加100ms

  2. 从特定值开始交错
    delay: anime.stagger(100, {start: 500}) 延迟从500ms开始，每个元素只能加 100ms

  3. 数值范围内均匀分配值
    rotate: anime.stagger([-360, 360]) 旋转将在-360deg到360deg之间均匀分布在所有元素之间

  4. 交错开始位置
    delay: anime.stagger(100, {from: 'center'})
    from：参数值（first、last、center、index）

  5. 交错顺序
    delay: anime.stagger(100, {direction: 'reverse'})

  6. 交错时间线
    delay: anime.stagger(100, {easing: 'easeOutQuad'})

  7. 网格交错

    1
    2
    3
    4
    5
    scale: [
        {value: .1, easing: 'easeOutSine', duration: 500},
        {value: 1, easing: 'easeInOutQuad', duration: 1200}
      ],
    delay: anime.stagger(200, {grid: [14, 5], from: 'center'})

  8. 网格交错方向
    anime.stagger(value, {grid: [rows, columns], axis: 'x'})

时间轴

让多个动画同步，默认时间轴中的每个动画都会在上一个动画结束时开始

1
2
var myTimeline = anime.timeline(parameters);
myTimeline.add(parameters, offset);

offset：时间偏移量

参数继承

父时间轴实例中的参数由所有子项继承

支持的参数：targets、duration、delay、endDelay、round

动画控制

play、pause、restart、reverse

  • 跳转
    animation.seek(animation.duration * (seekProgressEl.value / 100));

回调函数

update：动画开始后，每一帧都会触发
begin、complete
loopBegin、loopComplete
change、changeBegin、changeComplete

finished.then() 动画完成后返回 promise IE11 以下不支持

SVG 路径动画

  • 画线动画

anime.setDashoffset() 方法获取到SVG路径的长度并将此长度设置为SVG的stroke-dasharray值，并返回该长度再使用strokeDashoffset将SVG的stroke-dashoffset属性值在from to格式中产生动画从而创建路径绘制效果

strokeDashoffset: [anime.setDashoffset, 0]

SVG 画线原理

  1. SVG形状
  2. 形状必须有笔触 stroke、stroke-width
  3. 笔画可以虚线