animejs 是一个功能强大的 JavaScript 动画库，它提供了简单易用的 API 来创建复杂的动画效果。中文文档详细介绍了其使用方法和各种功能。
Anime.js 是一个轻量级且功能强大的 JavaScript 动画库，它提供了简单而强大的 API，可以用于对 CSS 属性、SVG、DOM 和 JavaScript 对象进行动画处理，以下是 Anime.js 的一些关键特性和使用示例：
安装与引入
1、通过 npm 安装：
npm install animejs --save
2、在项目中引入：
import anime from 'animejs'; // 如果你在使用 TypeScript，还需要下载类型定义文件 npm i --save-dev @types/animejs
3、手动下载并包含：
可以从官网或 GitHub 上下载最新版本的anime.min.js，然后在 HTML 文件中引入：
<script src="path/to/anime.min.js"></script>
基本使用
Anime.js 的基本用法非常简单，只需创建一个对象并传入目标元素和动画属性即可，让一个元素水平移动 250px：
anime({
targets: '.item',
translateX: 250,
});
动画目标
Anime.js 支持多种目标选择，包括 CSS 选择器、DOM 元素、JavaScript 对象等。
1、CSS 选择器：
let move = () => {
anime({
targets: '.item',
translateX: 250
});
};
2、DOM 元素或节点序列：
let move = () => {
let elements = document.querySelectorAll('.item');
anime({
targets: elements,
translateX: 250
});
};
3、数组：
let move = () => {
anime({
targets: ['.item1', '.item2'],
translateX: 250
});
};
可动画的属性
Anime.js 可以动画化多种属性，包括 CSS 属性、SVG 属性、DOM 属性等。
1、CSS 属性：
anime({
targets: '.item',
left: '240px',
backgroundColor: 'blue',
borderRadius: ['0%', '50%'],
easing: 'easeInOutQuad'
});
2、CSS3 transforms 属性：
anime({
targets: '.item',
translateX: 300,
scale: 2,
easing: 'easeInOutQuad'
});
3、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;
}
});
4、DOM 属性：
anime({
targets: '.dom-attribute-demo input',
value: [0, 1000],
round: 1,
easing: 'easeInOutExpo'
});
5、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'
});
动画参数
Anime.js 提供了丰富的动画参数，以满足不同的需求。
1、duration：持续时间，默认为 1000 毫秒。
anime({
targets: '.item',
translateX: 300,
duration: 3000
});
2、delay：延迟时间，默认为 0 毫秒。
anime({
targets: '.item',
translateX: 300,
delay: 500
});
3、easing：时间曲线，默认为easeOutElastic(1, .5)，可选值包括linear、三次贝塞尔曲线、弹簧、弹跳、台阶等。
anime({
targets: '.custom-easing-demo .el',
translateX: 270,
direction: 'alternate',
loop: true,
duration: 2000,
easing: function(el, i, total) {
return function(t) {
return Math.pow(Math.sin(t * (i + 1)), total);
}
}
});
4、round：四舍五入，当设置为 1 时，数值没有小数点。
anime({
targets: '.item',
innerHTML: [0, 100],
easing: 'linear',
round: 1,
duration: 2000
});
特殊属性
可以使用 Object 作为值为动画的每个属性定义特定参数。
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
});
时间线（Timeline）与串连动画
Anime.js 提供了时间线功能，可以将多个动画串联起来。
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' });
还可以在新建时间线时设置通用参数：
var timelineParameters = anime.timeline({ direction: 'alternate', loop: true });
timelineParameters
.add({ targets: '#timelineParameters .square.el', translateX: [{ value: 80 }, { value: 160 }, { value: 250 }], translateY: [{ value: 30 }, { value: 60 }, { value: 60 }], duration: 3000 })
.add({ targets: '#timelineParameters .circle.el', translateX: [{ value: 80 }, { value: 160 }, { value: 250 }], translateY: [{ value: 30 }, { value: -30 }, { value: -30 }], duration: 3000, offset: 200 })
.add({ targets: '#timelineParameters .triangle.el', translateX: [{ value: 80 }, { value: 250 }], translateY: [{ value: -60 }, { value: -30 }, { value: -30 }], duration: 3000, offset: 400 });
参数继承示例：
var noOffset = anime.timeline({ autoplay: true });
noOffset.add({ targets: '.no-offset', translateX: -100, translateY: -100, scale: 2, background: '#FF1461' }, { begin: function() { console.log('noOffset animation 1 began')}, complete: function() { console.log('noOffset animation 1 completed')} })
.add({ targets: '.no-offset', translateX: -100, translateY: 100, scale: 3, background: '#18FF92' }, { begin: function() { console.log('noOffset animation 2 began')}, complete: function() { console.log('noOffset animation 2 completed')} })
.add({ targets: '.no-offset', translateX: 100, translateY: 100, rotate: 120, scale: 4, background: '#5A87FF' }, { begin: function() { console.log('noOffset animation 3 began')}, complete: function() { console.log('noOffset animation 3 completed')} })
.add({ targets: '.no-offset', translateX: 100, translateY: -100, scale: 5, background: '#FBF38C' }, { begin: function() { console.log('noOffset animation 4 began')}, complete: function() { console.log('noOffset animation 4 completed')} })
.add({ targets: '.no-offset', translateX: 100, translateY: -100, scale: '+=8', background: '#FBF38C' }, { begin: function() { console.log('noOffset animation 5 began')}, complete: function() { console.log('noOffset animation 5 completed')} });
Anime.js 还有内置的时间间隔系统，可以轻松实现复杂的跟随和重叠动画。
var path = anime.path('.motion-path-demo path');
anime({
targets: '.motion-path-demo .el',
translateX: path('x'),
translateY: path('y'),
rotate: path('angle'),
easing: 'linear',
duration: 2000,
loop: true
});
Q1：如何在Vue中使用Anime.js？
A1：在Vue中使用Anime.js，你可以通过以下方式引入并使用：
<template>
<div class="bg"></div>
</template>
<script setup>
import anime from 'animejs'; // 如果提示 “anime具有隐式any类型”，可以使用下一行的 “//@ts-ignore”屏蔽
let bgAnimate; //@ts-ignore
onMounted(() => {
bgAnimate = anime({
targets: '.bg',
translateX: 250,
easing: 'easeInOutSine'
});
});
</script>
到此，以上就是小编对于“animejs中文文档”的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位朋友在评论区讨论，给我留言。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/788054.html
微信扫一扫 
