0
点赞
收藏
分享

微信扫一扫

效果惊艳的开源动画库,不仅牛逼,还很小巧

大家好,我是​​前端实验室​​的大师兄!一名资深的互联网玩家,专注分享大前端领域技术、面试宝典、学习资料等~

新年公司派给我的第一个项目就是一个小游戏,游戏中涉及到一部分动画,今天大师兄就给大家推荐一款小巧而又强大的动画库:​​anime.js​

效果惊艳的开源动画库,不仅牛逼,还很小巧_css

介绍

​anime.js​​​是一款功能强大的​​javascript​​​动画库插件,​​anime.js​​ 可以和CSS3 属性,SVG,DOM 元素和JS 对象一起工作,制作出各种高性能,平滑过渡的动画效果。

效果惊艳的开源动画库,不仅牛逼,还很小巧_js_02

压缩完只有9kb左右,麻雀虽小,却五脏俱全。

github上也有41.5k 的star,最近的更新也在十天前

效果惊艳的开源动画库,不仅牛逼,还很小巧_css_03

安装方式

方式一:使用npm 进行安装

npm install animejs

方式二:下载anime.js 的文件包,在页面中引入anime.min.js 文件。

<script type="text/javascript" src="js/anime.min.js"></script>

使用

引入anime.js后,就可以开始来编写动画效果。

首先来编写一个弹球的动画效果,HTML代码:

<div class="wrapper">
<div class="ball"></div>
</div>

CSS代码:

body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
}
.wrapper {
height: 80vh;
width: 100%;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
border: 1px solid blue;
background-color: lightblue;
color: #444;
}

.ball {
height: 200px;
width: 200px;
position: absolute;
top: 20px;
bottom: 0;
left: calc(50% - 100px);
background-color: darkblue;
border-radius: 50%;
}

效果惊艳的开源动画库,不仅牛逼,还很小巧_前端_04

使用anime.js提供的方法来编写好基本的结构:

var bouncingBall = anime({

//code here

});

然后在里面使用anime.js提供的对应的方法来实现动画效果,比如要操纵的dom元素,动画的时间以及缓动曲线等等。

var bouncingBall = anime({
targets: '.ball',
translateY: '50vh',
duration: 300,
loop: true,
direction: 'alternate',
easing: 'easeInCubic'
});

​targets​​属性是用来指定要运动的元素,可以使用类似CSS选择器来选择元素,或者是下面几种方法来选择元素:

DOM选择方法​​document.querySelector('.ball')​​​或者是​​document.querySelectorAll('.ball')​​方法;

js数组的方式​​['.ball']​

js对象的方式​​{elementName: 'ball'}​

如果你要操作的元素有多个值或者是要操作多个元素,可以这样做:

var bouncingBall = anime({
targets: ['.ball', '.kick'],
//rest of the code
});

​translateY​​​也就是要操作元素做出变化的属性,和CSS中操作元素的方法非常相似。作为一个经常和动画打交道的前端开发人员,对于使用​​transform​​​属性来提高动画的性能想必是非常清楚的,同样在使用​​animejs​​​来编写动画效果的时候,特别涉及操作元素位置的时候也建议使用​​transform​​等属性来操作来提高动画性能。

​duration​​​即动画的运行时间。如果要延迟执行动画,可以使用​​delay​​这个参数来指定动画延迟时间。

​loop​​属性是用来定义动画是否循环运行。默认值是false,即动画只运行一次。当然也可以指定具体的数字来定义动画运行的次数或者是定义为true一只无限循环运行下次。

​direction​​​属性定义是否应该轮流反向播放动画。有三个值​​default​​​、​​alternate​​​和​​reverse​​​。​​alternate​​​表示动画应该轮流反向播放。​​reverse​​表示反方向运行。

​easing​​它是用来定义动画运行速度曲线的,与CSS3中的动画曲线一样。

在上面的代码中,实现的效果只是球的上下弹起的效果。在真实世界中,当一个球掉在地上的时候,球会受到自身的压力从而产生一个变形的效果,可以使用​​transform​​​中的​​scaleX​​来达到这个动画效果。

下面是具体代码:

var bouncingBall = anime({
targets: '.ball',
translateY: '50vh',
duration: 300,
loop: true,
direction: 'alternate',
easing: 'easeInCubic',
//new code
scaleX: {
value: 1.05, //代表缩放的值
duration: 150, // 运行时间
delay: 268 //延迟多久执行
}
});

效果惊艳的开源动画库,不仅牛逼,还很小巧_动画效果_05

动画控制

​anime.js​​​还提供了诸如​​play、pause和restart​​​方法来控制动画的执行、暂停和重新运行动画。也可以使用​​seek()​​方法来跳帧运行动画。

下面通过​​按钮​​分别来控制动画开始效果:

//新增一个button
<div class="wrapper">
<button class="btn">开始</button>
<div class="ball"></div>
</div>

//js代码获取按钮,并添加点击事件
var btn = document.querySelector('.btn')
btn.addEventListener('click', function(e) {
e.preventDefault();
bouncingBall.play();
});

效果如下:

效果惊艳的开源动画库,不仅牛逼,还很小巧_动画效果_06

上面通过两个简单的实例介绍了​​anime.js​​的一个使用方法,更多的使用方法就要靠你的想象力了。

写在最后

欢迎加入前端实验室读者交流群,群里有不少技术大神,不定时会分享一些技术要点,更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~

进群方式:在下方公众号后台,回复 111 ,按提示操作即可进群。

效果惊艳的开源动画库,不仅牛逼,还很小巧_前端_07


举报

相关推荐

0 条评论