anime.js的学习小结

最新推荐文章于 2025-06-23 10:06:32 发布

黑月DM

最新推荐文章于 2025-06-23 10:06:32 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：学习文档文章标签： anime.js

本文链接：https://blog.youkuaiyun.com/qq_32109661/article/details/84935352

学习文档专栏收录该内容

2 篇文章

订阅专栏

本文介绍Anime.js动画库的引入方式及基本用法，通过一个简单DEMO展示如何使用Anime.js实现div元素的旋转、变色和字号变化动画。讲解了targets、CSS属性、rotate、duration、loop和easing等关键配置选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、关于anime.js的引入

$ npm install animejs
# OR
$ bower install animejs

import anime from 'animejs'

或者直接引用anime.js文件

<!-- 本地下载引入js文件 -->
<script src="anime.min.js"></script>
<!-- CDN在线引入 -->
<script type="text/javascript" src="https://cdn.bootcss.com/animejs/2.2.0/anime.min.js" ></script>

2、简单DEMO

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>简单DEMO</title>
        <style>
            .demo{
                width: 200px;
                height: 200px;
            }
        </style>
	</head>
	<body>
		<div class="demo">DEMO</div>			
		<script type="text/javascript" src="https://cdn.bootcss.com/animejs/2.2.0/anime.min.js" ></script>
		<script>
			const animationDemo = anime({
				targets: '.demo', 
    			backgroundColor: [
                    { value: "#5F9EA0", duration: 700 },
                    { value: "#3A5FCD", duration: 300 }
                ],		
    			fontSize: [
                    { value: "32px", duration: 700 },
                    { value: "64px", duration: 300 }
                ],
			  	rotate: 360,
			  	borderRadius: 8,
			  	duration: 1000,
			  	loop: false,
			  	easing: 'easeInOutSine'
			})
		</script>
	</body>
</html>

这是一个简单的demo，实现.demo这个div同时旋转360度，变色与字号变大的动画。当然，这个动画过于粗糙，非常难看，通过这个简单的例子讲一下anime.js的简单用法

首先调用动画的基本是anime()这个方法，在方法内进行配置即可实现一个简单动画

1.targets：实现动画的目标，可以是

css选择器如：'div','#el path';
DOM元素如： document.querySelector('.item')
节点列表如： document.querySelectorAll('.item')
对象
数组如：['div', '.item', domNode]

2.一些CSS属性

使用一些CSS属性值的设置即可实现动画，比如：

// value：属性值；duration：持续时间；delay：延迟时间
backgroundColor: [
                    { value: "#5F9EA0", duration: 700 },
                    { value: "#3A5FCD", duration: 300, delay: 1000}
                ],

这个动画就是前0.7s背景色为“#5F9EA0”，1s时才将颜色开始变为“#3A5FCD”，持续0.3s。

很多属性都可以用，可以自己试试

3.rotate：旋转，后面是度数，当然你可以不写，默认为0

4.borderRadius：这个不需要解释了

5.duration：动画执行时间

6.loop：是否循环执行动画，默认是false

7.easing：动画执行函数，这个怎么说呢，就是动画在执行过程中不同阶段的不同执行速度

具体效果参看这个网站