Anime.js是一款轻量级的JavaScript动画库，提供简洁而强大的API，支持CSS、SVG、DOM属性及JavaScript对象的动画效果，它能在单一HTML元素上同时处理多个CSS变换属性，实现复杂的交错动画，并提供丰富的控件和回调功能，Anime.js易于安装，通过npm或直接引入脚本文件即可使用，适用于HTML、JS、CSS和SVG的动画制作。
安装与引入
1. 安装
npm install animejs --save
2. 引入方式
原生：
<script src="anime.min.js"></script>
ES6模块：
import anime from 'animejs/lib/anime.es.js';
CommonJS：
const anime = require('animejs');
基础动画
Anime.js支持给任何对象做动画，包括div、js对象甚至数组等，以下是一些基础动画示例：
HTML结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1 {
position: absolute;
width: 50px;
height: 50px;
top: 50px;
background-color: #7FFF7F;
}
</style>
</head>
<body>
<div id="d1"></div>
<input type="button" value="播放动画" id="btn">
<script type="module">
import anime from "./anime.es.js";
let d1 = document.getElementById('d1');
let btn = document.getElementById('btn');
btn.onclick = () => {
anime({
targets: d1, // 动画目标
left: "100px", // 目标指定的属性值要变化到多少，这里是让css样式中的left变化到100px
duration: 3000 // 动画播放时间
});
};
</script>
</body>
</html>
动画目标选择器
1. 通过id选择器
let btn = document.getElementById('btn');
btn.onclick = () => {
anime({
targets: '#d1',
left: '100px',
duration: 3000
});
};
2. 通过class选择器
let btn = document.getElementById('btn');
btn.onclick = () => {
anime({
targets: '.d1',
left: '100px',
duration: 3000
});
};
可动画的目标属性
1. CSS属性
let move = () => {
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;
}
});
特殊属性与高级用法
1. 自定义缓动函数
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);
};
}
});
常见问题FAQs
1. Anime.js如何与其他库如Three.js兼容？
Anime.js可以与Three.js完美兼容，特别适用于需要复杂动画效果的场景，可以在Three.js中创建场景后，使用Anime.js控制物体的运动。
2. Anime.js的性能如何优化？
为了优化性能，建议尽量减少重绘和回流，尽可能使用CSS transforms和opacity属性，避免修改会引起布局变化的属性如width、height等，可以使用requestAnimationFrame进行动画控制，确保平滑性。
小编有话说
Anime.js作为一个轻量级且功能强大的JavaScript动画库，极大地简化了网页动画的开发过程，它不仅提供了丰富的API，还支持多种目标属性和自定义缓动函数，无论是初学者还是经验丰富的开发者，都可以通过Anime.js快速实现令人惊艳的动画效果，如果你还没有尝试过Anime.js，现在就是一个绝佳的时机！
各位小伙伴们，我刚刚为大家分享了有关“animatejs动画”的知识，希望对你们有所帮助。如果您还有其他相关问题需要解决，欢迎随时提出哦！
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/785571.html
微信扫一扫 