文章较长,头绪较乱,请在无聊时PC端浏览。
最近一两天一直在鼓捣css动画的内容,起因是最近在阅读css揭秘一书,内容质量确实值得初学者和初级开发者一看,作者为css组委会的一名成员,里面很多demo都从优化的角度去设置css。言归正传,昨天结束了书本的最后一张,css动画,在demo的实现过程中发现了很多有趣的css动画相关的知识点,于是现在也算是对css动画的一个总结。
写在前面
本文借鉴了很多blog与网站的经验与内容,一次性将启发比较大的网址都贴出来。
阮一峰 css动画知识点介绍(偏工具,入门):http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html
js设置css animation:https://www.w3cplus.com/animation/controlling-css-animations-transitions-javascript.html
requestanimationframe 入门1:http://www.cnblogs.com/Wayou/p/requestAnimationFrame.html
requestanimationframe 入门2:http://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3%95/
一个小总结:http://imweb.io/topic/5643850eed18cc424277050e
transition
与transform是两个级别的东西,transition中文为过渡,transform中文为变形,意味着变形无时间轴,但是transition有时间轴,如果这还理解不了就简单粗暴理解为transition可以包含transform吧。 transition一般可以满足最简单的放大缩小,但是复杂一点的实现会很复杂,他的弊端阮一峰老师总结的比较全。直接copy过来了
(1)transition需要事件触发,所以没法在网页加载时自动发生。
(2)transition是一次性的,不能重复发生,除非一再触发。
(3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。
(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。
Animation
于是animation闪闪发光的登场了,重量级选手,中文名就是动画!很符合大家的预期。利用animation提供的可选参数可以实现复杂的动画,
1)多属性变化
2)无限循环
3)某一时刻停止,再次触发时从上一位置开始
4)N个关键帧(N个%而已)
5)定义结束时的状态
......
既然animation那么NB为什么还有requestanimationframe?
其实我也不知道,哈哈。最前面两篇介绍requestanimationframe的文章提供了答案。
1)animation和requestanimationframe的设置完全不同
2)requestanimationframe的动画可以更流畅,摘自requestanimationframe入门2:
内部是这么运作的:
浏览器(如页面)每次要洗澡(重绘),就会通知我(requestAnimationFrame
):小丸子,我要洗澡了,你可以跟我一起洗哦!
简单总结一下requestanimationframe的特点:
1)类似于settimeout来递归通过退出条件来执行动画,一个蛮经典的例子是requestanimationframe入门1里面的进度条demo。
2)正如上面第二条提到的,requestanimationframe是专门用来处理动画的,中文字面意思就是要求动画帧,多个高的一个要求,要求!动画!帧!要求按照帧执行动画,注定了是如丝般顺滑。
写到这里其实三种主要css动画的方式基本介绍完了。下面再扯点别的,为以后内部经验分享会打稿。
在不借助外界库的情况下,直接书写动画的方式大概有5种
1:直接更改属性例如display,或者:hover伪类,暂且称为一类动画,只是只有一帧,立即展现,生硬。
2:settimeout/interval利用js去间隔时间修改某个属性。性能肯定垃圾了,但把握好时间间隔,还是可以实现不少动画的
3:transition
4:animation
5:requestanimationframe
讲到这里其实应该明白了,前两种以后就不要使用了,请努力使用第5种去替代第2种。
最后记录几个易错点,也是踩到的坑。
1:你需要重新理解fixed属性了,并不一定是以整个屏幕为容器哦。
如果某个父元素设置了transform,可以去试试fixed的相较原点。
其实父元素设置了transform以后,子元素的position:relative/absolute/fixed都会重新基于此父元素
2: transform-origin:这个默认是元素的左上角,但是如果想实现两个元素围绕一个原点转圈,数学功底就要拿出来了,相信你一定可以解决掉的。
3: transition-timing-function与animation-timing-function都是高深的数学函数,匀速,回弹,加速,减速等效果都是通过这个时间函数来控制的。这个函数也不必去完全理解,可以在AI等矢量制图软件里面来按需调试。网上也有很多案例
4:steps属性。 animation有一个steps属性。 animation: 3s keyframesName inifinite steps(11)。 这个参数就制定了整个动画3秒内包含11帧,试想一下经典的需求是什么!
没错,是loading,如果loading有8个状态的gif图,完全可以将8个状态对应的小图拼成大png,然后设置steps(8)变化left。这样执行出来结果就不会有左右滑动的效果。
当然英文的等宽字体也可以实现typing的效果,每一帧width增加一个ch,右边的border的颜色也一直有黑>透明->黑就模仿出来了。
5:我知道你想问有gif为什么去拼png,我也知道你想问什么是ch。没关系。gif不可以设置背景透明度,且颜色位数不如png全啊,就是这么任性。其实实际生产中也不会这样用啦。 ch也是一个长度单位,与px,em,rem,vw,vh一样,兼容性也不错,ch表示一个字所代表的宽度,所以请使用等宽字体去模仿typing效果,否则每次打出的可能是半个字。。。。
最后放两个炫酷的css动画
Link1: http://lea.verou.me/css-4d/#intro
Link2: http://desandro.github.io/3dtransforms/examples/cube-02-show-sides.html
当然我也没完全理解透。哈哈,下回见