header_v0.7.32

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

229天前发布

原创文章 / 平面 / 教程
意派 原创,如需商业用途或转载请与意派联系,谢谢配合。

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

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


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


这张贺卡 不福不行


8021589bdab3a801219c775976ce.jpg


扫描二维码,立即感受


1.页面转场动画


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


9a8e589bdacea801219c77ef87d1.jpg


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


2.引线燃烧动画


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


771a589bdb09a801219c779a8796.jpg


3.视角变化


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


748c589bdb25a801219c77d8526f.jpg


4.手写变烟花粒子特效


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


246e589bdb4da801219c77d9cf68.jpg


小结


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


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


0
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功