去年年中,小派曾分享了《左飞入右飞入,这十佳H5特效你值得拥有》一文,受到了一定的欢迎。时隔一年,H5技术有了显著的发展,小派觉得有必要再次进行整理,与派友们分享。
虽然小派并非专业设计师,但仍然希望能与大家交流和探讨。
热门动画分类介绍:
以下主要从实现形式来分类介绍。
逐帧动画:
- 大众点评:[相关链接]
- New Balance:街头风格的[相关链接]
- 平安陆金所:阿宝的呼唤[相关链接]
逐帧动画是在时间轴的每帧上逐一绘制不同的内容,通过连续播放形成动画效果。虽然制作负担较大且输出文件量较大,但其灵活性高,可以表现任何想要的内容,特别适合于细腻的表演动画。
SVG描绘动画:
- 可口可乐:分享快乐128年[相关链接]
- 优迈信通:金融与互联网的碰撞[相关链接]
- 元小望:SVG练习NO.04的迷茫之旅[相关链接]
SVG描绘动画利用SVG的描边效果,实现轻巧真实的动画效果,常用于图表和科技产品展示场景。
SVG变形动画:
- 元小望:SVG变形动画初探[相关链接]
通过图形的变形展示动画效果,同样具有轻巧真实的优点。
三维动画:
- Adidas:罗斯的精彩瞬间[相关链接]
- Nike:每双球鞋背后的故事[相关链接]
三维动画具有立体感,需要用到3D处理素材和WebGL开发,为作品增添更多趣味和互动性。
热门交互方式:
联动:
- 星巴克:圣诞的温暖与你的陪伴[相关链接]
- 时尚类产品展示模板的互动体验[相关链接]
联动能让多个对象之间产生互动,增加作品的趣味性和互动性。
手势触控:
- Epub360动画播放控制Demo[相关链接]
通过手势不仅可以触发动画,还能控制动画进度,实现快进和倒退。
长按触控:
- 黄山悦榕庄的瞬间唤醒[相关链接]
- 一加手机的韩寒一步之遥[相关链接]
- Mr.u的西安听音之旅(安卓暂无法体验)[相关链接]
长按触控可以实现长按执行动作,停止则动作立即停止,是H5里比较流行的交互方式。
视差滚动:
- 万科·公园里的泉城风筝节[相关链接]
- 夏轩&杨晓婉的STAND BY ME婚礼请柬[相关链接]
视差滚动通过多层背景的不同速度移动,形成立体的运动效果,为H5长图带来出色的视觉体验。
位置触发:
- 腾讯视频的期待已久[相关链接]
位置触发指特定位置时执行动画,与视差滚动有所不同。