Anime.js | 具有不同属性的动画

Anime.js 是一款强大的 JavaScript 动画引擎，可以用于各种动画效果的创建。 它可以让您通过简单的 JavaScript 代码快速创建自然的、流畅的动画。Anime.js 支持各种属性、缓动、循环和回调函数，使其非常灵活实用。

特性

• 简单易用：Anime.js 通过简单的代码就能创造出非常复杂的动画效果
• 支持各种属性：Anime.js 支持动画任何 CSS 属性、SVG、DOM 属性以及用户定义的 JavaScript 对象属性的各种动画效果
• 自定义缓动函数：Anime.js 支持自定义缓动函数来实现更加精细的动画效果
• 多个动画效果的链接：Anime.js 可以将多个动画效果链接起来，使您能够创建更加复杂的动画过程
• 自由控制动画：Anime.js 让您自由控制动画的方向、循环、暂停、恢复以及运动的速度

基本用法

使用 Anime.js 创建动画非常地简单，只需要包含 anime.min.js 文件，并编写简单的 JavaScript 代码即可，下面是一个例子：

// 创建一个 anime 对象来动画 <div id="mydiv"> 元素
var mydiv = document.getElementById('mydiv');
var animeObj = anime({
    targets: mydiv,
    translateX: 250,
    translateY: 50,
    scale: 2,
    duration: 2000,
    easing: 'easeInOutQuad'
});

通过这段代码，我们创建了一个 Anime.js 对象，并动画了一个 div 元素，让它向右移动 250 像素、向上移动 50 像素、放大 2 倍，并且持续 2 秒钟，并采用了定义好的缓动函数。

动画效果

下面我们来看看 Anime.js 支持哪些动画效果：

CSS 属性

您可以通过 Anime.js 动画 CSS 属性，例如：

anime({
    targets: '.box',
    width: '50%', 
    opacity: 0.7,
    rotateZ: '180deg',
    backgroundColor: '#FFF',
    color: '#000',
    borderRadius: ['0em', '2em'],
    easing: 'easeInOutQuad', 
    duration: 1000
});

SVG

Anime.js 支持动画 SVG，例如：

anime({
    targets: '#lines polyline',
    strokeDashoffset: [anime.setDashoffset, 0],
    easing: 'linear',
    duration: 1500,
    delay: function(el, i) { return i * 250 },
    direction: 'alternate',
    loop: true
});

DOM 属性

Anime.js 支持动画任何 DOM 属性，例如：

anime({
    targets: 'input[type="range"]',
    value: 100,
    duration: 1000,
    round: 1,
    easing: 'easeInOutExpo'
});

JS 对象属性

Anime.js 支持动画 JavaScript 对象的属性，例如：

// 创建一个带有两个属性的对象，并为它们设置动画效果
var myObject = { x: 0, y: 0 };
anime({
    targets: myObject,
    x: 250,
    y: 50,
    easing: 'easeInOutQuad'
});

缓动函数

缓动函数是用来控制动画的速度，Anime.js 默认提供了一些缓动函数，例如：linear、easeInQuad、easeOutQuad、easeInOutQuad 等等，您也可以自己定义缓动函数。例如：

// 定义一个缓动函数
function myBezier(x, t, b, c, d) {
    return c * (x /= d) * x * x + b;
}
// 使用上面的缓动函数进行动画
anime({
    targets: 'div',
    x: 300,
    easing: myBezier
});

多个动画效果的链接

你也可以把多个动画效果链接起来，运行多个动画过程，例如：

var mydiv = document.getElementById('mydiv');
// 依次执行三个动画效果
anime({
    targets: mydiv,
    translateX: 250,
    duration: 1000
})
.add({
    translateY: 50,
    duration: 1000,
    offset: 0
})
.add({
    scale: 2,
    duration: 1000,
    offset: 0
});

自由控制动画

Anime.js 不仅支持动画效果的创建，还支持对动画效果的自由控制，例如：

var myAnimation = anime({
    targets: '.box',
    translateX: '50vw',
    autoplay: false // 创建之后不自动播放动画
});
function playAnimation() { myAnimation.play(); }
function pauseAnimation() { myAnimation.pause(); }

通过这个例子，我们创建一个控制动画的 myAnimation 对象，通过控制该对象的 play() 和 pause() 函数，可以自由地控制动画的播放。更多功能详见 Anime.js 的文档 。

结论

Anime.js 是一个易学易用、功能丰富的 JavaScript 动画引擎，支持多种动画效果，自定义缓动函数，多个动画效果的链接以及自由控制动画，是前端开发人员必备的工具之一。