动效开发 1:让它动起来
在现实生活中,人们的大脑习惯了被动态的东西所吸引,适当的动画效果可以为网页添加有价值的交互和反馈,提升用户的情感体验。
情感设计的主要目标是促进人与人之间的沟通,即便媒介是网页。一旦我们在这方面做得到位,电脑本身将回归背后,而网页的个性化将因此得到凸显。
—— Aarron Walter,Designing For Emotion 一书的作者
动画效果是情感设计的重要手段,从本小节开始,我们将为大家介绍「H5 开发」的第四个重要的能力 —— 「动画效果开发」,简称「动效开发」,即综合利用 JavaScript、CSS(3)、SVG、Canvas 等多种 Web 技术手段开发出动人的网页动态效果。
回想下我们第 1 小节提及的 「H5 开发」三角形能力模型,「动效开发」处在三角形的上部,毫无疑问这项能力越强,在此岗位中的竞争力越大。
动效开发 —— 先「动」而后「效」,为网页添加动态元素的方法有很多:
● GIF、Flash —— 廉颇老矣,尚能饭否?
● 视频 —— 可远观而不可亵玩焉
● CSS3 结合 JavaScript —— 当红小生
我们将把重心放在 CSS3 动画上面,因为 CSS3 在现如今的网页动效开发中占据着最为重要的一席,作为老大哥 CSS 的补充