H5热门动画和交互大合集，已偷偷收藏
去年年中时，小派整理分享了《还在左飞入右飞入，快来学学这十佳H5特效》一文，比较受欢迎。如今时隔一年，H5有了较大的发展，小派觉得有必要重新整理，以飨派友。
小派非专业设计师，不足之处，欢迎吐槽。
热门动画：
下面主要从实现形式分类
逐帧动画
逐帧动画是只在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。 因为逐帧动画的帧序列内容不一样，不但给制作增加了负担而且最终输出的文件量也很大，但它的优势也很明显：逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容，而它类似与电影的播放模式，很适合于表演细腻的动画。例如：人物或动物急剧转身、 头发及衣服的飘动、走路、说话以及精致的3D效果等等。
注：上面第一H5是派友晗萧模仿原版用Epub360制作而成，第三支由派友“三人游”创作。
SVG描绘动画
->>优迈信通：金融碰撞互联网
SVG描绘动画，简而言之，就是让SVG的描边像是有人绘制一样的动画效果。动画轻巧不失真，在图表、科技产品展示场景应用广泛。
注：上面第二支和第三支H5为Epub360平台作品，分别由“哇喔创意”和元小望创作。
SVG变形动画
SVG变形动画，主要表现是图形的筋骨变换，同样具有轻巧不失真的优点。
三维动画
对于三维动画，简单理解，就是有立体感的动画，不是二维的。
上作品是源代码开发的，首先要用3D处理素材，需要程序员进行WebGL方面的开发，里面用到了3D引擎，这块Epub360暂不支持～
热门交互：
联动
->>星巴克：有你，圣诞很温暖
->>时尚类产品展示模板
联动是指代关联多个对象后，其中一个对象的动作，会带动其它关联对象做出相应的动作。H5里如果用上了联动，一般会提升作品互动和趣味性。
手势触控
手势不仅触发，还能控制动画进度，可以快进和倒退。对照案例，应该也比较容易理解。
长按触控
->>黄山悦榕庄：唤起这一刻
->>Mr.u：听，西安（安卓暂无法体验）
这个和上面有点类似，保持长按，另一个动作才执行，如果停止，另一个动作就立即停止。在H5里比较流行的玩法是长按播放视频，不过目前长按播放视频在安卓手机里玩不了，可以用长按播放序列帧来代替，就像上面第一个作品。
注：第三支H5为Epub360平台作品，由Mr.u创作。
视差滚动
视差滚动指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验，在H5长图里应用很广泛。
注：上面两支H5为Epub360平台作品，分别由派友Maroon和Rap_hael创作。
位置触发
位置触发是指滑到某个位置时，才开始执行动画。这个和视差滚动有些区别，视差滚动页一打开时，里面的动效就开始加载执行了。
上面就是小派整理总结的H5热门动画和交互，欢迎吐槽。其中大部分特效用我们Epub360就可以轻松实现，期待大家的佳作。
注：题图素材来自H5广告资讯站 一张图揭秘传统广告与H5广告的差别
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）