《H5页面与交互动画设计》课件——H5中的动效、动画 .pptxVIP

;随着H5产品创作越来越丰富，动画和视频的应用也越来越多样化，H5的创作大有动画化和场景视频化的趋势，表现形式主要是全屏动画或图片轮播。

全屏动画有什么优势？把动态变换的场景占满手机整屏，配上与情节环环相扣的音

效，让观众把所有的注意力放在内容上，叙事空间极大。一不留神，用户就掉进了创作者设计的故事里。动画在故事表达上有比较好的优势，可以一气呵成，在用户没来得及反应之前，通过简单的交互让用户完全代入到故事里，伴随故事情节进入尾声，一屏广告静静地跃然屏幕。只要视频长度合理，H5的体验不会轻易被中断，用户一般只需要盯着手机看，整个体验流畅而完整。同样如果在网页中缓存一连串的图片序列帧，连续播放，也能达到流动的视觉效果，同时还可以制造一系列个性化的用户体验。比如提前制作一些抠除部分图像的轮播图片，然后通过提取用户社交网站头像，把这些头像嵌入图片被抠除的部分，在H5中连续播放时用户会惊喜地发现自己也出现在了视频里，这样的生成效果，真实感极强，也很容易唤起用户的参与感。;传统的H5制作想要有绚烂的“特效”，就必须对交互进行多层次、多元素、多媒体

的设计，成本高昂，而且对手机的软硬件配置要求也相对较高，设计的元素和环节越多，越可能影响流畅性和用户体验。动画、视频的穿插设计弥补了H5技术上的不足，它包含

的语言、画面、色彩、互动体验声效、模拟交互等都可以提前设计包装，用户虽然点击互

动频次降低，但是互动的效果不差，在视频插入的前后保证H5原有的交互特性，在视频

播放过程中，依靠动作模拟，依然能够实现复杂的、炫酷的展现效果。

目前视频的呈现有垂直视频（就是能竖着手机观看的全屏视频），也有横屏视频（就是横着手机观看的全屏视频），竖屏视频更是近期H5的一个主流方向，尤其是移动端短视频、拍客、直播等火热的当下，视频“竖着拍竖着看”已成为影像呈现的新潮流。;人民日报在“两会”期间推出的首部闪卡H5《史上最牛团队这样创业》，将中国共产党比喻成一个创业团队，把中国共产党的“创业史”??酷炫的快闪形式呈现出来，文字配上昂扬的音乐背景，快闪的页面伴随鼓声夺屏而出，短短的一分多钟时间，带领用户回顾历史、展望未来。这种“燃爆”的形式和节奏拉近了党媒与年轻网友的距离，短短几天产品曝光量超过3000万。H5信息传播集纳了“碎片化”“短视频”“专业视角”及高频图片，这种方式能缓解审美疲劳，带来强烈的视觉冲击，将时事类政经资讯、严肃类政史信息进行焕然一新的呈现，如图所示。;一、H5中动画形式

当我们开始一支H5动画设计时，首先要对用户需求进行解读，明确哪些方面是应该深入研究的，哪些内容是要简单了解的，之后需要考虑更多的是，如何以最合适的形式，

深入浅出的方法向受众传达目标。;1.GIF动画

GIF图动画多用于辅助性动效，像是场景内的小道具、加载的Loading导航条等，一些比较小的元素，通常会采用这种方法来设计。它的优点在于技术含量低，而且效果相对比较丰富。其缺点是体积较大、失真率高，而且GIF动画是定型的，不可以进行操控，如图所示。;2.帧动画/序列帧动画

序列帧动画的原理更类似影像的呈现原理，常规的视频每秒是24帧，实际就是在1秒钟内播放24张连续的图片，在不同的领域对图片的要求数量也不同，带有高速摄影的

视频播放速度需要达到48帧／秒，一般的动画也要达到14～18帧数才能流畅地播放。而帧动画和GIF一样是一组图片，但不同点在于它的运动是由代码编辑的，播放的快慢是可以用代码来操控的。帧动画的好处是，可以对动画进行快慢、停顿、播放等带有交互性的操作，很多H5

复杂炫酷的主视觉，就是借助帧动画来实现的。而其弊端在于：如果动画面积过大，或过于复杂，整个页面的体量可能会非常糟糕，会影响到加载和体验的流畅度。例如，《我们之间就一个字》H5。;3.视频类动画

这类H5具有非常强的迷惑性，可以给人比较强烈的感染力！而大部分案例实际是给视频套了一个H5的外壳，在体验过程中可以加入简单交互，增加作品的趣味性。这些视频往往专为手机屏幕设计，采用微视频的呈现方式，便于用户观看。

例如，中国平安扶贫记录视频H5《我们的名字》，将扶贫过的地区的景色、人文特点、扶贫产业融合到一起，展现中国平安对祖国建设和社会发展做出的贡献，增强用户对品牌的好感度。;4.代码级动画

这部分动画主要是由前端工程师来实现的，设计师需要将演示Demo（或视频）和元

素提供给前端工程师并协同他们完成最后效果，设计师虽不需写代码，但仍需要对实现方式有大致了解。动画设计时，当用户用手去操作时，如果能够使界面的动态走向更贴合