动画效果
Web动画在PC上已不是难事，而且客户端自己带的动画特效也是非常的流畅，那么要将下面这种 .gif 动画效果在移动端上实现，我还是第二次经历（前一次是圣诞节的揭幕动画）。
一开始看到这个效果，有点心虚也有点醉了。其实最开始打算直接上 .gif 动效图，但使用 .gif 动效图存在两个问题：
文件过大（帧数越多，文件越大），可有可能造成应用卡死 动效与音乐的匹配那要怎么做呢？带着尝试的心情，开始了这个动效之旅。
动效分析
整个动画分为两个场景。那么先简单剖析这两个场景：
动画首屏
揭幕动画一进来是一个静态的蒙层：
在这个屏有以下几个动作：
默认静音按钮不选择（这个是可配置时间段），用户点击之后可以处于选中静音状态 点击整个云彩开始转入动画第二场，在这个过程中第一场渐渐隐去，到达第二场 点击关闭按钮，不进入动画第二场，并且整个动画蒙层关闭动画第二场
动画进入到第二场时整个动画会有以下几个动作：
龙会有十个舞动动作，而且它会不断重复 鞭炮扭动并且逐渐消失 云彩飘扬 如果静音按钮没选中，在第二场中会有音乐播放，反之不会有音乐播放动画实现原理
整个动画使用CSS Animation中的 animation 属性完成。在这里主要使用了 animation 中的 steps() 的 animation-timing-function 。其实就是一个多步动画，而多步动画中最主要使用到的是雪碧图，因为雪碧图和 animation 中的 steps() 配合能让我们轻松实现下面这样的动画效果：
我样可以看到整个动画人特一直在运动，而且动作与动作之间的变动是非常的协调。
动画制作
了解了整个动画场景以及其实现原理，接下来我们看看具体制作过程又是怎么样的，并且在制作过程中碰到什么样的坑。
动画DEMO
别的先不说，先把整个动画的效果向大家展示一下，用你的手机猛扫下面的二维码：
(^_^)可别被锣鼓声给吓坏了。
创建模板
把整个动画放在一个场景中，就把它称之为“舞台”吧，并且把这个舞台命名为 dragon-poplayer :
查看更多关于手淘年货节舞龙揭幕动画实战_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did110637