1.2 动效应用

优秀的动效设计在提升产品体验、用户黏性方面的积极作用有目共睹，已然成为Web、APP产品交互设计和界面设计必不可少的元素。

1.2.1 移动APP动效

动效在移动APP方面有着广泛的应用。如果说界面布局可以组织操作界面元素的静态位置，那么动效可以组织操作界面元素在时间维度和空间维度上的演进。当动效引入时间维度后，界面的跳转、操作的反馈、信息内容的呈现等每一个交互的展现形式都更富有效性；当动效引入空间维度后，层次的表现、空间的拓展、3D的展现才得以体现。

动效不仅可以清楚地展示产品的细节，让用户更直观地了解一款产品的核心特征、用途、使用方法等，还可以有效地展示产品设计师的设计思想，让用户一目了然，节约沟通成本。

1.2.2 Web网站动效

随着Web前端设计技术HTML5、CSS4、jQuery、JavaScript的发展和融合，以及支持这些技术各种浏览器的升级，Web动效已经不仅仅是网页设计的润滑剂了，它的功能更多地体现在了交互逻辑、视觉渲染和创新实践上，上能引人注目，下能潜移默化。下面是一些Web网站动效的例子，详细参考网页https://www.jiesc.net/tag/3d。

（1）CSS+jQuery 3D动效的图书。通过CSS与jQuery结合，实现了图书的360度翻转效果和图书打开的过渡效果，书的封面、背面、书脊等部分都制作完成，如图1-1所示。

（2）CSS+jQuery 3D动效海盗船。该动画分两部分，一个是用CSS3绘制的海盗船外观，船帆会迎风抖动；另一个是海面动画，船只在海面上迎风前行，非常逼真，如图1-2所示。

图1-1 3D效果的图书

图1-2 3D动效海盗船

（3）CSS3打造3D立体的视觉效果。CSS3实现模拟iPhone样式的菜单，菜单整体呈现3D立体的视觉效果，如图1-3所示。

（4）CSS+jQuery 3D星球天体运行动画。绘制了一颗较大的星球，然后在大星球周围有一圈很小的陨石区域，这些陨石会围绕着星球不停地旋转，而且配合黑色的背景，带有很强烈的3D视觉效果，如图1-4所示。

（5）CSS+jQuery打造3D房间模型动画。房间里有电视机、沙发、书柜、灯具以及一个人物模型，这些模型都是在Canvas上绘制而成，更重要的是，这款3D动画可以利用HTML5特性读取本地麦克风和摄像头，这样就可以通过摄像头将你自己投影到电视机上，看上去挺神奇的，如图1-5所示。

（6）CSS3实现3D折叠二级下拉菜单。这是一款外观非常炫酷的CSS3 3D下拉菜单，它的特点是主菜单的背景和页面背景非常融合，看上去就像菜单嵌入在页面中一样。并且当鼠标滑过菜单项时，会展开3D样式的二级子菜单，同时子菜单会产生摇晃折叠的动画效果，看起来十分炫酷，而这一切都是纯CSS3实现，如图1-6所示。

图1-3 模拟iPhone立体菜单

图1-4 3D星球天体运行动画

图1-5 3D房间模型动画

图1-6 3D折叠二级下拉菜单