动画学习之Animate.css的使用与解析
近况
近期生活比较单一。
const 提升自己 = true;while( 提升自己 ) {写码...看书...思考...睡觉}
既单一也充实,单一使我平静,充实使我保持向上的感觉,希望自己真难做到“持续学习,保持思考,不断进步”。
最近看到腾讯ISUX团队的一篇博客《H5动效的常见制作手法》,里面简单介绍了现在H5开发中实现动画效果的几种方式(GIF,逐帧动画,css3,canvas,svg,video…),实际的内容不多,但对我多少有点启发意义,感兴趣的同学不妨看看。
作为一只前端小菜鸟,前端的各个细分领域都能吸引到我,于是看了上面的博客后,挑了最感兴趣的CSS3动画来学习。对于CSS3动画,我第一个想起的就是animate.css,于是便有了这篇博客。
快速上手animate.css
animate.css的主页简单明了,能演示各个动画的效果,目的也很简单,“just-add-water css animations”。那天好奇去搜索了一下作者Daniel Eden,真是酷到不行。
不多说,直接上学习资料:
官方github
估计读完github里面的README.md之后就不用往下看了吧,对于animate.css的用法早已了然于心,如果你还有兴趣,想看看我这个无聊的博主能写些什么东西,希望不会让你失望。
一,静态使用动画(很绕吧…)
引用animate.css
给需要动画的元素添加class
<!-- animated是必须添加的;bounce是动画效果;infinite从语义来看也秒懂,无限循环,不添加infinite默认播放一次 --> <div class="animated bounce infinite">动画</div>
刷新页面就能看到动画这两个字在上下蹦。done,静态使用就这么简单
总结一下场景和优缺点吧,优点是简单呀,添加个类名就一劳永逸了,一行js代码都不用写,缺点是不能人为控制开始和停止。我能想到的场景:
①loading动画
②新开页面某些元素动一次,能吸引用户注意(如注册按钮等)
二,动态使用
掌握了上述用法之后,动态使用也不过小菜一碟。基本思路如下:
给动画对象添加类,然后监听动画结束事件,一旦监听到动画结束,立即移除前面添加的类。
这样一来,想什么时候开始和结束动画都随你了。对于这种用法(也是实际开发中最多的用法),官方给出了jQuery的封装:
//扩展$对象,添加方法animateCss$.fn.extend({animateCss: function (animationName) {var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';$(this).addClass('animated ' + animationName).one(animationEnd, function() {$(this).removeClass('animated ' + animationName);});}
});//使用示例:
$('#yourElement').animateCss('bounce');
因为手上有个小项目没用jQuery这么高大上的库,于是自己写了个js原生的实现,也扩展了一些功能:
//animate("选择器","动画","次数","时延")function animate(seletor, animation_name, count, delay) {var target = document.querySelectorAll(seletor)var timer = null;timer = setInterval( function() {target.forEach( function(x) {x.className += " animated " + animation_name;x.addEventListener("animationend", function(){x.className = x.className.replace(" animated " + animation_name, "");});} )count --;if( count <= 0 ) {clearInterval( timer );}}, delay)}//使用示例animate('.haha', "bounce", 2, 1000);
上面的代码也就是个半成品:
- 只监听了”animationend”事件,兼容性不好(可多次调用addEventListener监听其他事件);
- 先延时,再执行(将回调函数封装一下,先调用回调函数一次,再进入间隔循环)
源码解析
源码只有一份animate.css,相对简单,下面主要说说三个关键类。
一,animated
设置了动画时长和动画执行前后元素应该怎样应用样式(animation-fill-mode)
.animated {-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-animation-fill-mode: both;animation-fill-mode: both;
}
二,infinite
设置了动画次数(无限次)
.infinite {-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;
}
三,动画类名(如:bounce)
设置使用的动画,及一些动画的初始化属性。
.bounce {-webkit-animation-name: bounce;animation-name: bounce;-webkit-transform-origin: center bottom;transform-origin: center bottom;
}@keyframes bounce {from, 20%, 53%, 80%, to {-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}40%, 43% {-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform: translate3d(0, -30px, 0);transform: translate3d(0, -30px, 0);}70% {-webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);-webkit-transform: translate3d(0, -15px, 0);transform: translate3d(0, -15px, 0);}90% {-webkit-transform: translate3d(0,-4px,0);transform: translate3d(0,-4px,0);}
}
总的来说实现的原理比较简单,业务组织也很明确,就是三个类,比较有意思的是去研究各个动画的keyframes是怎样的,很有意思(细节远比我想象的要多),例如上面那个bounce动画,从关键帧就能看出很多细节,随意蹦两下那么粗糙。
自定义选项
这个放在最后是因为看了源码之后很自然就无师自通懂得怎么自定义了,例如想用css来控制动画次数等。
#yourElement {-vendor-animation-duration: 3s;-vendor-animation-delay: 2s;-vendor-animation-iteration-count: infinite;
}
else
内联元素(如a标签)不支持bounce动画。
动画学习的最大感悟是,好想去学动画设计呀,好动感。
该博客比较浅显,适合茶余饭后随便读读。
动画学习之Animate.css的使用与解析相关推荐
- 前端进阶必学必会动画学习之Animate.css的使用与解析:一个强大而酷炫的CSS3动画库Animate.css使用方法教程
简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut). ...
- 元素出现在页面时,添加动画,配合animate.css使用
我工作中经常遇到这样的需求:当某个元素出现在页面中时给他加一些动画,于是封装了一个配合animate.css使用的添加动画的函数.为了使用起来方便.哈哈,现在把他总结一下放到这里. 功能:某个元素出现 ...
- css 动画 重播,javascript – Animate.CSS重播?
我有一个使用Animate.CSS的动画,如果用户愿意,我想重播,但我尝试的不起作用.这是代码: HTML: Replay JS: var $j = jQuery.noConflict(); $j(& ...
- 使用animate实现页面过度_很多人都在使用的开源CSS动画效果库——animate.css
介绍 animate.css是一堆很酷,有趣且跨浏览器的动画,供你在项目中使用.非常适合强调,主页,滑块和一般的加水效果. animate.css v4正在进行许多改进和重大更改,包括CSS自定义属性 ...
- Vue07---vue中的css动画原理及animate.css使用
目录 一.transition过渡动画原理 二.使用keyframes关键帧 三.在vue中使用animate.css 同时使用过渡和动画 一.transition过渡动画原理 当元素被transit ...
- 超棒的跨浏览器纯CSS动画实现 - Animate.css
为什么80%的码农都做不了架构师?>>> 日期:2012-8-12 来源:GBin1.com 在线演示 本地下载 通常情况下如果需要生成web动画效果的话,我们肯定会考虑使 ...
- wow.js+animate.css实现滚动加载动画
迅雷官网有这种效果: 迅雷网络-关于我们迅雷是全球领先的共享计算与区块链技术创新企业,公司成立于2003年,基于深耕十几年.获得国际专利的P2SP下载加速技术优势,面向个人用户和企业用户打造了丰富的下 ...
- Animate.css介绍
Animate.css简介 animate.css 动画库,预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出 ...
- Animate.css
使用过几次Animate.css,现在来记录一下用法,方便以后直接使用 首先是官网地址 :https://daneden.github.io/animate.css/ 非常好用的CSS库, 只需要引入 ...
最新文章
- MML命令_华为TD-LTE后台常用MML命令操作
- android adapter排序,Android BindingAdapter执行顺序?
- Kibana停止kibana的方法命令:找到5601端口对应的进程ID 把此进程进行kill即可
- HDU多校1 - 6959 zoto(莫队+树状数组/值域分块)
- 依据imu姿态角计算z轴倾角_1. 姿态的表示方法
- python2版本选择_win下安装python2和python3双版本之全美教程
- zend studio怎么连接mysql?
- [转载] 说说 Python 字典结构的 get() 方法
- Visual Paradigm 教程[UML]:如何在UML中绘制组件图?
- 【编程题目】寻找丑数
- CAN FD实战之CAN FD应用领域及CAN迁移至CAN FD的策略
- arcgis软件界面字体太小
- linux spi flash id,SPI读flash的ID问题
- 芭蕉树上第十二根芭蕉--opencv配置问题
- 【tensorflow学习】Ftrl学习
- Vue实现图形化积木式编程(十一)
- 整理的子模块设置清单
- 高防IP的特点跟高防CDN的优势
- HBase常见热点问题及几种解决方案
- PERVASIVE 软件介绍