anime.js 中文文档，如何全面掌握这一动画库？

anime.js 中文文档：全面了解和使用

背景介绍

Anime.js 是一个轻量级的 JavaScript 动画库，具有简单而强大的API，它能够对 CSS 属性、SVG、DOM 和 JavaScript 对象进行动画处理，Anime.js 开源、免费、极小、简单易用，是开发者制作动画的得力工具，本文将详细介绍 Anime.js 的安装、引入、目标对象、可动画的目标属性以及基础参数等内容。

安装及引入

安装

使用 npm 安装 Anime.js：

npm install animejs --save

引入

在项目中引入 Anime.js：

import anime from 'animejs';

如果使用的是 TypeScript，还需要下载类型定义文件：

npm i --save-dev @types/animejs

动画的目标对象

Anime.js 支持多种类型的目标对象，包括 CSS 选择器、DOM 元素、数组和 JavaScript 对象等。

CSS 选择器

通过 CSS 选择器获取元素：

<div class="item"></div>
<el-button type="primary" @click="move">移动</el-button>
<script>
let move = () => {
    anime({
        targets: '.item',
        translateX: 250
    });
};
</script>

DOM 元素 / 元素序列

使用 DOM 节点或节点的集合作为动画目标：

let move = () => {
    let elements = document.querySelectorAll('.item');
    anime({
        targets: elements,
        translateX: 250
    });
};

数组

以数组作为动画目标：

let move = () => {
    anime({
        targets: ['.item1', '.item2'],
        translateX: 250
    });
};

可动画的目标属性

CSS 属性

对目标的 CSS 属性进行动画处理：

anime({
    targets: '.item',
    left: '240px',
    backgroundColor: 'blue',
    borderRadius: ['0%', '50%'],
    easing: 'easeInOutQuad'
});

CSS3 Transforms 属性

针对 CSS 的 transforms 属性进行动画处理：

anime({
    targets: '.item',
    translateX: 300,
    scale: 2,
    easing: 'easeInOutQuad'
});

JavaScript 对象属性

包含数值的任何 JavaScript 对象属性都可以设置动画：

var objPropLogEl = document.querySelector('.item');
var myObject = { prop1: 0, prop2: '0%' };
anime({
    targets: myObject,
    prop1: 50,
    prop2: '100%',
    easing: 'linear',
    round: 1,
    update: function() {
        objPropLogEl.innerHTML = myObject.prop1 + '    ' + myObject.prop2;
    }
});

DOM 属性

任何包含数值的 DOM 属性都可以设置动画：

anime({
    targets: '.dom-attribute-demo input',
    value: [0, 1000],
    round: 1,
    easing: 'easeInOutExpo'
});

SVG 属性

与任何其他 DOM 属性一样，包含至少一个数值的所有 SVG 属性都可以设置动画：

anime({
    targets: ['.svg-attributes-demo polygon', 'feTurbulence', 'feDisplacementMap'],
    points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96',
    baseFrequency: 0,
    scale: 1,
    loop: true,
    direction: 'alternate',
    easing: 'easeInOutExpo'
});

动画基础参数

duration（持续时间）

持续时间，默认为1000毫秒：

anime({
    targets: '.item',
    translateX: 300,
    duration: 3000
});

delay（延迟）

延迟时间，默认为0毫秒：

anime({
    targets: '.item',
    translateX: 300,
    delay: 500
});

endDelay（末端延时）

末端延时，默认为0毫秒：

anime({
    targets: '.item',
    translateX: 300,
    endDelay: 500
});

easing（时间曲线）

时间曲线，默认值为easeOutElastic(1, .5)：

anime({
    targets: '.item',
    translateX: 300,
    easing: 'linear' // 可选值：linear, cubicBezier, easeInOutSine, step(5), spring(400), elastic(400), bounce等
});

round（四舍五入）

四舍五入，当设置为1时没有小数点：

anime({
    targets: '.item',
    innerHTML: [0, 100],
    easing: 'linear',
    round: 1,
    duration: 2000
});

特殊属性

特殊属性允许为动画的每个属性定义特定参数。

var specificPropertyParameters = anime({
    targets: '#specificPropertyParameters .el',
    translateX: { value: 250, duration: 800 },
    rotate: { value: 360, duration: 1800, easing: 'easeInOutSine' },
    scale: { value: 2, duration: 1600, delay: 800, easing: 'easeInOutQuart' },
    delay: 250 // All properties except 'scale' inherit 250ms delay
});

连接多个动画（时间线）

可以使用时间线连接多个动画，一个动画完结后接着进行下一个动画：

var basicTimeline = anime.timeline();    //基本的时间线,新建后通过add增加动画
basicTimeline
    .add({targets: '#basicTimeline .square.el', translateX: 250, easing: 'easeOutExpo'})
    .add({targets: '#basicTimeline .circle.el', translateX: 250, easing: 'easeOutExpo'})
    .add({targets: '#basicTimeline .triangle.el', translateX: 250, easing: 'easeOutExpo'});

FAQs（常见问题解答）

Q1：如何在Vue3 Composition API中使用Anime.js？

A1：在Vue3 Composition API中使用Anime.js，需要确保在onMounted生命周期钩子中初始化动画，以避免setup阶段执行方法中不能获取到DOM的问题，以下是示例代码：

<template>
    <div class="bg"></div>
</template>
<script setup>
    import anime from 'animejs';
    let bgAnimate:anime.AnimeInstance;
    onMounted(() => {
        bgAnimate = anime({
            targets: '.bg',
            translateX: 250,
            easing: 'easeInOutSine'
        });
    });
</script>

各位小伙伴们，我刚刚为大家分享了有关“anime.js 中文文档”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！