案例背景
姓名
拍拍店新上线
标签
CSS3补间动画总结
表达方式
翻转动漫
需求背景
品牌推广
创造力指数
★★★★
困难
★★★★
案例欣赏
补间动画是动画的基本方法之一。 是指人为设置动画的关键状态即关键帧，关键帧之间的过渡过程只需要计算机处理和渲染的一种动画方法。
在触摸屏页面中，有几种常见的实现补间动画的方式。
一、CSS3动画
通过动画（steps() 以外的时间函数）属性在每个关键帧之间插入补间动画。
二、CSS3Transition
与动画不同，过渡只能设置初始时刻和结束时刻两个关键帧状态。
三、借助JavaScript实现动画
例如，JavaScript动画库或框架，著名的TweenJS，它是CreateJS的套件之一。 此外，Flash行业久负盛名的GreenSock推出的GSAP（GreenSockAnimationPlatform）也新推出了对Javascript动画的支持。
四、SVG动画
基于中国联通对SVG技术的友好支持，利用SVG技术实现动画也是一种可行的解决方案。
对于用Transition实现的动画来说，有一定的局限性。
引用阮一峰先生文章中的总结：
过渡的优点是易于使用，但它有几个主要限制。
(1) 转换需要通过风暴触发，因此不能在网页加载时手动发生。
(2) 转换是一次性的，除非重复触发，否则无法重复。
(3)transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两种状态。
(4) 一条转移规则只能定义一个属性的变化，不能涉及多个属性。
由于这样的限制，Transition动画在触摸屏页面上很少见到，并不意味着没有这样的动画。 例如，翻页动画的实现可以借助Javascript脚本以及transition和transform属性来实现。
（案例来自《京东：2015 JDC爆款风暴》）
（ChromeDevTool案例代码调试截图）
因此，用CSS3实现动画的亮点就在于Animation的应用。
但想要写好CSS3Animation动画，看似简单却需要掌握细节。
首先，动画流程必须提前规划好，而不是敲头编码就能实现的。
可以是与设计师沟通结果的分析，也可以是动画属性分解表。
（动画属性分解表示例，来自《常用动画制作技巧》）
或者是根据沟通和分析规划出的动画时间线。
（动画时间轴，来自《CSS3动画实践》）
其次，动画要自然，不死板。
无论是影视动画行业还是后端动画行业，都遵循同一套公式，追求同一种味道——“迪士尼大师”总结的（以下简称“十二法则”） ），至今仍受到关注并受到高度重视。 钦佩并非没有道理。
在一些优秀的触摸屏页面示例中可以找到它。
《腾讯：微众通讯》中的摩托车演示中车轮和摩托车的操控表现出“挤压和拉伸”的规律，带出颠簸的真实感。
小编强烈建议大家仔细研究这个案例，因为作者陈在振已经解释过，他的作品完全按照迪士尼动画十二原则进行编码，并且该案例已经下线。
不过，你也可以欣赏另一位同样对迪士尼12条规则有经验的EC大师的作品《排排店新开张》。
袋子的打开过程有一个向上展开的准备动作（ANTICIPATION），但展开的碎纸板有减速（SLOWOUT）的效果，拍拍店的标志以弧形（ARCS）的运动轨迹弹出。
另外，弧线运动轨迹最值得关注的地方就是页面切换的过程。
整个案例非常生动自然，充满工整感，令人惊叹。
如果你想知道如何实现才能遵守十二条规则，可以进一步阅读这篇文章，谢谢。
另外，为了让动画在控制十二规则时更加自然，动画计时函数的设计绝对是重要的一环，因为动画可以说是一种关于时间函数的运动演化过程。 如果你想写出好的动画，这篇重点介绍缓动函数的《让界面动画更自然》也许能帮到你。
动画编码完成，页面完成，你以为这就结束了吗？ 别太天真，联通终端的性能要求也是一个需要克服的坎。
Google在一篇关于动画性能渲染优化的文章中建议（抱歉，这里有墙）避免为昂贵的属性设置动画，并且每次设置动画时保持60fps。
那么css3动画案例，什么是昂贵的属性呢？ （以下为科普链接，清楚的童鞋可跳过）。
页面渲染通常的流程是JS/CSS>预估样式>布局>轮廓>渲染层组合。
其中Layout（重新排列）和Paint（重画）是整个环节中最耗时的两个环节，所以我们尽量避免这两个环节。 从性能上来说，理想的渲染管线没有布局和绘制环节，只需要渲染层的合并。
那么你怎么知道哪些 CSS 属性更改会影响这两个链接呢？ 不，下面是各个CSS属性及其影响的链接。
（这里截取部分，我们翻墙到CSSTriggers去了解更详细的内容）
在实际应用中，最容易注意的一点是css3动画案例，不要在动画开始时使用diaplay:none属性值，因为它会导致Layout和Paint链接，而切换类名已经是一个很好的方法。
另外，翻译属性值来代替上/左/右/下切换，缩放属性值来代替宽度/高度，不透明度属性来代替显示/可见性等。
此外，还有其他方法来优化动画渲染。 Google文章链接中有一系列文章分析。 小编就不炫耀了。 :
（总结开始于@邓平陈平的《H5动漫60fps之路》）
最后，重点是提前做好计划，编码时注意十二条规则，并牢记防止layout/paint的属性，搞定！
最后，由于本文主要宣传CSS3Animation，所以其余实现方法不在讨论范围：P，再见，上次见。
——我们是手指刊物，来自Bump Lab
发表评论