H5热门动画和交互大合集

去年年中时，小派整理分享了《还在左飞入右飞入，快来学学这十佳H5特效》一文，比较受欢迎。如今时隔一年，H5有了较大的发展，小派觉得有必要重新整理，以飨派友。

小派非专业设计师，不足之处，欢迎吐槽。

热门动画：

下面主要从实现形式分类

逐帧动画

->>大众点评：我们之间就一个字

->>New Balance：谁在街头怀疑一切

->>平安陆金所：阿宝@你 快来帮忙

逐帧动画是只在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样，不但给制作增加了负担而且最终输出的文件量也很大，但它的优势也很明显：逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容，而它类似与电影的播放模式，很适合于表演细腻的动画。例如：人物或动物急剧转身、 头发及衣服的飘动、走路、说话以及精致的3D效果等等。

 

——《帧动画》逐百度百科

注：上面第一H5是派友晗萧模仿原版用Epub360制作而成，第三支由派友“三人游”创作。

SVG描绘动画

->>可口可乐：分享快乐128年

->>优迈信通：金融碰撞互联网

->>元小望：SVG练习NO.04_描述迷茫

SVG描绘动画，简而言之，就是让SVG的描边像是有人绘制一样的动画效果。动画轻巧不失真，在图表、科技产品展示场景应用广泛。

注：上面第二支和第三支H5为Epub360平台作品，分别由“哇喔创意”和元小望创作。

SVG变形动画

->>元小望：SVG变形动画小试

SVG变形动画，主要表现是图形的筋骨变换，同样具有轻巧不失真的优点。

三维动画

->>Adidas：罗斯·决不凋谢

->>Nike：每双球鞋都有一个故事

对于三维动画，简单理解，就是有立体感的动画，不是二维的。

上作品是源代码开发的，首先要用3D处理素材，需要程序员进行WebGL方面的开发，里面用到了3D引擎，这块Epub360暂不支持～

热门交互：

联动

->>星巴克：有你，圣诞很温暖

->>时尚类产品展示模板

联动是指代关联多个对象后，其中一个对象的动作，会带动其它关联对象做出相应的动作。H5里如果用上了联动，一般会提升作品互动和趣味性。

手势触控

->>Epub360动画播放控制Demo

手势不仅触发，还能控制动画进度，可以快进和倒退。对照案例，应该也比较容易理解。

长按触控

->>黄山悦榕庄：唤起这一刻

->>一加手机：1步1步看清韩寒

->>Mr.u：听，西安（安卓暂无法体验）

这个和上面有点类似，保持长按，另一个动作才执行，如果停止，另一个动作就立即停止。在H5里比较流行的玩法是长按播放视频，不过目前长按播放视频在安卓手机里玩不了，可以用长按播放序列帧来代替，就像上面第一个作品。

注：第三支H5为Epub360平台作品，由Mr.u创作。

视差滚动

->>万科·公园里：泉城首届风筝节

->>夏轩&杨晓婉：STAND BY ME 婚礼请柬

视差滚动指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验，在H5长图里应用很广泛。

注：上面两支H5为Epub360平台作品，分别由派友Maroon和Rap_hael创作。

位置触发

->>腾讯视频：这一幕你期待已久

位置触发是指滑到某个位置时，才开始执行动画。这个和视差滚动有些区别，视差滚动页一打开时，里面的动效就开始加载执行了。

上面就是小派整理总结的H5热门动画和交互，欢迎吐槽。其中大部分特效用我们Epub360就可以轻松实现，期待大家的佳作。