效果惊艳的开源动画库,不仅牛逼,还很小巧
大家好,我是老鱼!一名资深的互联网玩家,专注分享大前端领域技术、面试宝典、学习资料等~
新年公司派给我的第一个项目就是一个小游戏,游戏中涉及到一部分动画,今天就给大家推荐一款小巧而又强大的动画库:anime.js
介绍
anime.js
是一款功能强大的javascript
动画库插件,anime.js
可以和CSS3 属性,SVG,DOM 元素和JS 对象一起工作,制作出各种高性能,平滑过渡的动画效果。
压缩完只有9kb左右,麻雀虽小,却五脏俱全。
github上也有41.5k 的star,最近的更新也在十天前
安装方式
方式一:使用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%;
}
使用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 codescaleX: {value: 1.05, //代表缩放的值duration: 150, // 运行时间delay: 268 //延迟多久执行}
});
动画控制
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();
});
效果如下:
上面通过两个简单的实例介绍了anime.js
的一个使用方法,更多的使用方法就要靠你的想象力了。
效果惊艳的开源动画库,不仅牛逼,还很小巧相关推荐
- AE 动画直接变原生代码:Airbnb 发布开源动画库 Lottie
原文 Airbnb 发布的 Lottie 是一个面向 iOS.Android 和 React Native 的开源动画库. 简单来说,就是可以直接利用 AE 导出的 JSON 动画文件,将其解析为原生 ...
- Ai绘画工具有哪些?推荐这7款效果惊艳的AI绘画神器
2022虽然不是ai绘图这项技术诞生的时间,但却是到目前为止最爆火出圈的绘图元年. AI绘图(AI painting)就是以文生图(text2image),属于跨模态生成(Cross-modal ge ...
- android动画帧率_Android动画进阶—使用开源动画库nineoldandroids
前言 Android系统支持原生动画,这为应用开发者开发绚丽的界面提供了极大的方便,有时候动画是很必要的,当你想做一个滑动的特效的时候,如果苦思冥想都搞不定,那么你可以考虑下动画,说不定动画轻易就搞定 ...
- Facebook开源动画库 POP-POPBasicAnimation运用
动画在APP开发过程中还是经常出现,将花几天的时间对Facebook开源动画库 POP进行简单的学习:本文主要针对的是POPBasicAnimation运用:实例源代码已经上传至gitHub,地址:h ...
- html5 游戏 动画设计,11款效果惊艳的HTML5动画应用
11款效果惊艳的HTML5动画应用 来源:极客头条 HTML5真的很棒,我们这个网站也每天在为大家分享很多炫酷而实用的HTML5和CSS3应用.今天要分享的有很多效果惊艳而且好玩的HTML5动画应用, ...
- 10款效果惊艳的HTML5应用和源码
HTML5已经越来越流行起来了,尤其是移动互联网的发展,更是带动了HTML5的迅猛发展,我们也是时候学习HTML5了,以防到时候落伍.今天给大家介绍10款效果惊艳的HTML5应用,方便大家学习,也将应 ...
- 吴恩达斯坦福CS230第一名:图像超级补全,效果惊艳(附代码)
[新智元导读]图像修复(Image inpainting)是一个已经被广泛研究的计算机视觉问题,即恢复图像中缺失的部分.斯坦福大学CS230课程的Mark Sabini等人提出"Image ...
- Lottie安卓开源动画库使用
碉堡的Lottie Airbnb最近开源了一个名叫Lottie的动画库,它能够同时支持iOS,Android与ReactNative的开发.此消息一出,还在苦于探索自定义控件各种炫酷特效的我,兴奋地就 ...
- 抖音、Tiktok危机!谷歌AI短视频生成模型,效果惊艳了
文 | 梦晨 Pine(发自凹非寺) 源 | 量子位 内容生成AI进入视频时代! Meta发布「用嘴做视频」仅一周,谷歌CEO劈柴哥接连派出两名选手上场竞争. 第一位Imagen Video与Meta ...
最新文章
- cordova contacts测试
- STM32 基础系列教程 32 – Ethnet+Lwip
- 【论文复现与改进】针对弱标注数据多标签矩阵恢复问题,改进后的MCWD算法,让你的弱标注多标签数据赢在起跑线上
- java.library.path属性在代码中设置不生效问题
- 嘉年华回顾丨杜小勇教授带你解密One Size Does not Fit All?
- Linux 内核源码(kernel source)路径
- CentOS7 配置免密登陆
- mysql 执行查询_MySQL执行一个查询的过程
- Gram matrix(格拉姆矩阵)
- 开关灯(c语言数据结构习题)
- 卷积神经网络工作原理
- 华光职业学院计算机专业,关于给予张庆俊等同学省高校计算机一级 考试成绩优秀奖励的通知...
- 直连线和交叉线的区别
- ImToken 钱包的研究
- 百度是如何给每个人免费提供2TB存储空间的?
- QT基于mysql数据库的链接-全网最强万能通用法
- Pytorch张量(Tensor)复制
- 名编辑电子杂志大师教程 | 阅读量浏览量统计
- 二维码详解(QR Code)
- OpenCV-判断OpenCV摄像头是否断开