APP设计中的交互动画是怎么实现的?

html-css09

APP设计中的交互动画是怎么实现的?,第1张

交互动画是指在动画作品播放时支持事件响应和交互功能的一种动画,也就是说,动画播放时可以接受某种控制。这种控制可以是动画播放者的某种操作,也可以是在动画制作时预先准备的操作。这种交互性提供了观众参与和控制动画播放内容的手段,使观众由被动接受变为主动选择。最典型的交互式动画就是FLASH动画。观看者可以用鼠标或键盘对动画的播放进行控制。Flash是由macromedia公司推出的交互式矢量图和 Web 动画的标准,由Adobe公司收购。网页设计者使用Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。Flash也是存储芯片的一种,通过特定的程序可以修改里面的数据。Flash的前身是Future Wave公司的Future Splash,是世界上第一个商用的二维矢量动画软件,用于设计和编辑Flash文档。1996年11月,美国Macromedia公司收购了Future Wave,并将其改名为Flash。在出到Flash 8以后, Macromedia又被Adobe公司收购。Flash通常也指 Macromedia

Flash Player(现Adobe FlashPlayer)。其它辅助工具:photoshop,flex, illustrator等。序列帧如果过多过大容易照成一瞬间的加载卡顿现象,十分影响用户体验;序列帧过多会影响应用的包体大小,而许多渠道对包体大小都是有或多或少限制的。总结:如果仅仅是一些元素的位移,缩放,旋转,淡入淡出这类简单的动画,强烈建议由美术提供基础元素,程序实现具体动画。至于其它类型的动画就得视情况而定了。

CSS3的动画的优点:

1.在性能上会稍微好一些,浏览器会对CSS3的动画做一些优化(比如专门新建一个图层用来跑动画)

2.代码相对简单

但其缺点也很明显:

1.在动画控制上不够灵活

2.兼容性不好

3.部分动画功能无法实现(如滚动动画,视差滚动等)

JavaScript的动画正好弥补了这两个缺点,控制能力很强,可以单帧的控制、变换,同时写得好完全可以兼容IE6,并且功能强大。但想想CSS动画的transform矩阵是C++级的计算,必然要比javascript级的计算要快。另外对库的依赖也是一个很让人头疼的问题。

所以,对于一些复杂控制的动画,使用javascript会比较靠谱。而在实现一些小的交互动效的时候,就多考虑考虑CSS吧。

当鼠标经过图片,图片会逐渐放大,仿佛你距离图片越来越近,常在旅游、商品的展示页面应用。

(1)使用 scale 函数放大图片

(2)使用transition实现逐渐变化的动画。

(3)使用 overflow: hidden控制图片在图片外围盒子中。

素材:

图片一张