超级会员免费看
本文探讨了如何利用 CSS3 动画创作出自然、吸引人的动效，从电影的角度出发，讲解关键帧、时间轴的重要性，并通过迪士尼动画原则展示了动画的感官体验和物理性能的提升。同时，文中强调了故事性在动画中的核心地位，以及性能测试和高效 CSS 属性的选择在动效开发中的关键作用。
动效开发 6：动效之效
回头看看，我们花了 5 个小节来啰唆「动效开发」的「动」：
● 如何动 —— 第 5 小节《让它动起来》
● 立体地动 —— 第 6 小节《聊一聊 3D》
● 让浏览器帮忙动 —— 第 7 小节《补间动画》
● 一帧一帧地动 —— 第 8 小节《逐帧动画》
● 让 SVG 动 —— 第 9 小节《SVG 动画》
我们花费力气去做的事情毋庸置疑是重要的，但它距离突破也许还差一点别的东西。就好比一个歌手拼命练习各种花式唱法 —— 高音、颤音、延音无所不能，但缺了情感就算不上伟大的歌手。动效开发也是一样的道理，「动」是招式是基本要求，而「效」才是真正的修炼之道。
我们思考动效之「效」，其实就是要思考如何让我们做出来的动画具备最佳的体验效果，它包括两个方面的内容：
● 感官体验 —— 如何「动」得自然、有情感、能吸引人？
● 物理性能 —— 如何「动」得更流畅？
“要写 CSS3 动画，必先学技术。要写好 CSS3 动画，还是得深入探索传统动画的精华。”
—— EC，京东凹凸实验室首席动效开发
对于「如何提升动画的体验效果」这个话题，我们不妨先以电影之眼来看看 CSS3 动画，也许能从中窥得一些门道。
订阅专栏 解锁全文
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
