anime.js方法

删除目标

从正在运行的动画或时间轴中删除目标。
targets参数接受与targets 属性相同的值。

anime.remove(targets)

anime({
  targets: '.remove-demo .el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutQuad'
});

document.querySelector('.remove-el-button').addEventListener('click', function() {
  anime.remove('.remove-demo .line:nth-child(2) .el');
});

获取值

返回元素的原始值。

anime.get(target, propertyName, unit);

由于anime.js使用getComputedStyle来访问原始CSS，因此返回值几乎总是'px'单位。第三个（可选）参数转换所需单位的值。

anime.get(domNode, 'width', 'rem');

CSS transforms : Only inlined values can be accessed.

var logEl = document.querySelector('.get-value-demo-log');
var el = document.querySelector('.get-value-demo .el');

logEl.innerHTML = '';
logEl.innerHTML += '".el" width is :
';
logEl.innerHTML += '"' + anime.get(el, 'width', 'px') + '"';
logEl.innerHTML += ' or "' + anime.get(el, 'width', 'rem') + 'rem"'

设定值

立即将值设置为指定的目标。

anime.set(targets, {property: value});

anime.set('.set-value-demo .el', {
  translateX: function() { return anime.random(50, 250); },
  rotate: function() { return anime.random(0, 360); },
});

随机数

返回特定范围内的随机整数。

anime.random(minValue, maxValue);

function randomValues() {
  anime({
    targets: '.random-demo .el',
    translateX: function() {return anime.random(0, 270);
    },
    easing: 'easeInOutQuad',
    duration: 750,
    complete: randomValues
  });
}

randomValues();

tick

使用外部requestAnimationFrame循环播放动画。

animation.tick(time)

不要忘记将autoplay参数设置为false以防止anime.js内置RAF循环启动。

var animation = anime({
  targets: '.tick-demo .el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutQuad',
  autoplay: false
});

function loop(t) {
  animation.tick(t);
  customRAF = requestAnimationFrame(loop);
}

requestAnimationFrame(loop);

运行的对象

返回当前正在运行的所有活动anime.js实例的Array。

anime.running

var runninLogEl = document.querySelector('.running-log');

anime({
  targets: '.running-demo .square.el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  easing: 'linear'
});

anime({
  targets: '.running-demo .circle.el',
  translateX: 270,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutCirc'
});

anime({
  targets: '.running-demo .triangle.el',
  translateX: 270,
  direction: 'alternate',
  easing: 'easeInOutQuad',
  loop: true,
  update: function() {
    runninLogEl.innerHTML = 'there are currently ' + anime.running.length + ' instances running';
  }
});