目录
动画过程要预先规划好,这可不是是敲敲脑壳就能码出来的事儿。
动画要自然不生硬,十二法则你值得拥有
首页 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脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

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

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? 公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验? Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

如何使用HTML5表单验证属性来验证用户输入? 如何使用HTML5表单验证属性来验证用户输入? Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

如何高效地在网页中为PNG图片添加描边效果? 如何高效地在网页中为PNG图片添加描边效果? Mar 04, 2025 pm 02:39 PM

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

HTML5中跨浏览器兼容性的最佳实践是什么? HTML5中跨浏览器兼容性的最佳实践是什么? Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

< datalist>的目的是什么。 元素? < datalist>的目的是什么。 元素? Mar 21, 2025 pm 12:33 PM

本文讨论了html< datalist>元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

> gt;的目的是什么 元素? > gt;的目的是什么 元素? Mar 21, 2025 pm 12:34 PM

本文讨论了HTML< Progress>元素,其目的,样式和与< meter>元素。主要重点是使用< progress>为了完成任务和LT;仪表>对于stati

我如何使用html5< time> 元素以语义表示日期和时间? 我如何使用html5< time> 元素以语义表示日期和时间? Mar 12, 2025 pm 04:05 PM

本文解释了HTML5< time>语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

< meter>的目的是什么。 元素? < meter>的目的是什么。 元素? Mar 21, 2025 pm 12:35 PM

本文讨论了HTML< meter>元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了< meter>从< progress>和前

See all articles