《不福不行》H5贺卡四大特效解析

年前的时候，Epub360平台“dodo设计”创作的H5贺卡《这张贺卡 不福不行》很受大家欢迎，很多派友好奇里面的特效是怎么实现的？特别是其中的“手写变粒子”特效。这里，对该案例四大特效及实现方法进行简要介绍，期待对大家有所帮助。

在正式解析前，大家先来体验下该作品。

这张贺卡 不福不行

扫描二维码，立即感受

1.页面转场动画

在第二页向上滑动时，触发红色“蛋壳”放大铺满整个屏幕，自然的过渡成为第三页的背景。

实现方法其实很简单，第一步，在Epub360编辑器里设置红色蛋壳图片的放大触发动画，放大倍数以能铺满整个屏幕为准，放大动画结束后跳转页面；第二步，设置向上滑屏时触发这个放大动画即可。

2.引线燃烧动画

SVG描绘动画与烟花序列的曲线运动模拟出鞭炮引线燃烧动画。

3.视角变化

写完福字，视角变为大场景。随着烟花从地上上移到天空，视角也随之从平视到仰视，这里是用“Epub360状态组组件"控制背景图片的位移和烟花序列的播放来实现的整个效果，效果很赞。

4.手写变烟花粒子特效

写福字其实就是画板组件的运用，写完的“福”字，如何让粗实线条变成烟花粒子风格呢？这里其实在画板的上方盖了一个作者称为“筛子”的遮罩，十分的形象。我们看到的其实是透过筛子大大小小的孔后面的画板，视觉上就会有烟花的粒子的效果了，是不是就很简单了呢。

小结

本文主要目的是拓宽派友们的思路，功能都是一样的，如何组合起来玩出不同创意，想法很重要。期待此文对大家有所帮助，看完后不妨做一个试试看！

注：为了便于我们撰写，“dodo设计”还授权了我们复制该作品，特此感谢。