目录
动画过程要预先规划好,这可不是是敲敲脑壳就能码出来的事儿。
动画要自然不生硬,十二法则你值得拥有
首页 web前端 html教程 CSS3动画之补间动画_html/css_WEB-ITnose

CSS3动画之补间动画_html/css_WEB-ITnose

Jun 21, 2016 am 08:48 AM

补间动画是动画的基础形式之一,指的是人为设定动画的关键状态,也就是关键帧,而关键帧之间的过渡过程只需要由计算机处理渲染的一种动画形式。

在触屏页面中,常见的实现补间动画以下几种形式:

第一,CSS3 Animation。

通过animation(除steps()以外的时间函数)属性在每个关键帧之间插入补间动画。

第二,CSS3 Transition。

区别于animation,transition只能设定初始和结束时刻的两个关键帧状态。

第三,利用JavaScript实现动画,例如JavaScript动画库或框架,著名的 TweenJS ,它是CreateJS的其中一个套件。另外,在Flash业界久负盛名的 GreenSock 推出的GSAP(GreenSock Animation Platform)也新引入了对Javascript动画的支持。

第四,SVG 动画。

基于移动端对SVG技术的友好的支持性,利用SVG技术实现动画也是一种可行的方案。

对于利用Transition实现的动画而言,是有一定局限的。

引述阮一峰老师的文章 《CSS动画简介》 里的总结,

transition的优点在于简单易用,但是它有几个很大的局限。

(1)transition需要事件触发,所以没法在网页加载时自动发生。

(2)transition是一次性的,不能重复发生,除非一再触发。

(3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。

(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。

囿于这样的局限,在触屏页面中很少见到Transition动画的身影,但是并不意味着没有,譬如翻页动画的实现可以利用Javascript脚本配合transition与transform属性来实现。

案例截图来源于 《京东:2015JDC燃爆事件》

对应的 Chrome Dev Tool 代码调试截图

所以,利用CSS3实现动画的重头戏都在于 Animation 的运用。

然而想写好CSS3 Animation动画需要花费一些力气,这是看似简单实则需要把握好细节的活儿。

动画过程要预先规划好,这可不是是敲敲脑壳就能码出来的事儿。

可以是一张把与设计师沟通的结果加之分析输出一张动画属性分解表。

动画属性分解表示例,来源于 《常见动效制作手法》

又或者是根据沟通分析规划出来的动画时间轴。

动画时间轴,来源于《CSS3动画实践》

动画要自然不生硬,十二法则你值得拥有

不管是在影视动画界,还是前端动画界里遵循的都是同一套配方,追求同样的味道——「迪士尼九老」总结的 十二黄金动画法则 (以下简称“十二法则”),一直沿用至今、备受推崇不是没有道理的。

在一些优秀的触屏页面案例里,可以追寻到它的踪迹。

案例截图来源于《腾讯:微众银行》中的摩托车 demo

作者对轮子和摩托车的处理就体现出“挤压和拉伸”的法则,带出颠簸的现实感。

小编是非常推荐大家去认真研究这个案例的,因为作者陈在真就此说明过他的这部作品就完全是遵循迪士尼动画十二原则所码出来的。

但是很可惜,案例已经下线了。

不过,你还可以欣赏到另一位对迪士尼十二法则同样有心得的大神EC的作品 《拍拍小店全新上线》 。

案例截图来源于 《拍拍小店全新上线》

盒子的打开过程就带有一个往上展开预备动作(ANTICIPATION),并且展开撒开的碎彩纸带有慢出(SLOW OUT)的效果,拍拍小店的logo弹出符合弧形(ARCS)的运动轨迹。

除此之外弧形运动轨迹最为明显的地方就是页面切换的过程。

整个案例处处都非常生动自然、利落感满满,令人赞叹。

如果你想了解怎么去实现才能够符合十二法则,可以进一步阅读这篇文章 《The Guide To CSS Animation: Principles and Examples》 喔,不谢。

另外,在把控十二法则时为了动画更加自然,时间函数(animation-timing-function)的设计绝对是举足轻重的一环,因为动画可以说是一种关于时间函数的运动演变过程。要码好动画,这篇关注介绍缓动函数的 《让界面动画更自然》 说不定能够助你一臂之力。

码好了动画,做好了页面,以为就此结束了吗?不要太天真,移动端对性能的要求也是一道需要迈过的坎儿。

Google在有关动画性能渲染优化的文章 《动画 | Web Fundamentals - Google Developers》 (对不起,这里有道墙)中提出建议:

避免为开销大的属性设置动画,要让每次在设置动画时必须注意保持 60fps。

那么,哪些是开销大的属性呢?(下面是科普环节,清楚的童鞋可以跳过)。

页面渲染的一般过程为JS > CSS > 计算样式 > 布局 > 绘制 > 渲染层合并。

其中, Layout(重排)和Paint(重绘)是整个环节中最为耗时的两环 ,所以我们尽量避免着这两个环节。从性能方面考虑,最理想的渲染流水线是没有布局和绘制环节的,只需要做渲染层的合并即可。

那怎么知道哪些CSS属性的改变是会影响这两个环节的呢?诺,下面就是各CSS属性与其影响的环节。

截图来源于 CSS Triggers ,更为详细地翻墙去拿吧

在实际的应用里,最为简单的一个注意点就是,触发动画的开始不要用diaplay:none属性值,因为它会引起Layout、Paint环节,通过切换类名就已经是一种很好的办法。

// 根据类名触发动画.active {	 &.flow_away {		.mobile,		.ground,		.platform,		.words {		  -webkit-animation: flowAwayUp ease .5s forwards;		  animation: flowAwayUp ease .5s forwards;		}	}}
登录后复制

还有就是,translate属性值来替换top/left/right/bottom的切换,scale属性值替换width/height,opacity属性替换display/visibility等等。

除此之外,对动画渲染的优化还有其他方式,上面贴出Google文章链接就有一系列的文章解读,小编就不卖弄按下不表了,这里顺便抛出前辈对这方面相关的总结:

总结来源于@登平登平的《H5动画60fps之路》

最后总结下要点就是

  • 事先做好规划
  • 码的时候注意十二法则
  • 谨记避免导致layout/paint的属性

搞定!

最后的最后,由于本文主推的是CSS3 Animation,其余的实现方式不在讨论范围内:P,拜拜,下次再见。

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

HTML容易为初学者学习吗? HTML容易为初学者学习吗? Apr 07, 2025 am 12:11 AM

HTML适合初学者学习,因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓,易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高,可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML,CSS和JavaScript的角色:核心职责 HTML,CSS和JavaScript的角色:核心职责 Apr 08, 2025 pm 07:05 PM

HTML定义网页结构,CSS负责样式和布局,JavaScript赋予动态交互。三者在网页开发中各司其职,共同构建丰富多彩的网站。

HTML中起始标签的示例是什么? HTML中起始标签的示例是什么? Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

了解HTML,CSS和JavaScript:初学者指南 了解HTML,CSS和JavaScript:初学者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

Gitee Pages静态网站部署失败:单个文件404错误如何排查和解决? Gitee Pages静态网站部署失败:单个文件404错误如何排查和解决? Apr 04, 2025 pm 11:54 PM

GiteePages静态网站部署失败:404错误排查与解决在使用Gitee...

网页批注如何实现Y轴位置的自适应布局? 网页批注如何实现Y轴位置的自适应布局? Apr 04, 2025 pm 11:30 PM

网页批注功能的Y轴位置自适应算法本文将探讨如何实现类似Word文档的批注功能,特别是如何处理批注之间的间�...

HTML,CSS和JavaScript:Web开发人员的基本工具 HTML,CSS和JavaScript:Web开发人员的基本工具 Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构,使用标签如、等。2.CSS控制网页样式,使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互,通过事件监听和DOM操作。

如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果? 如何用CSS3和JavaScript实现图片点击后周围图片散开并放大效果? Apr 05, 2025 am 06:15 AM

实现图片点击后周围图片散开并放大效果许多网页设计中,需要实现一种交互效果:点击某张图片,使其周围的...

See all articles