手淘年货节舞龙揭幕动画实战

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

手淘用户这几天应该看到了年货节版本,不知道刚打开首页有没有被一阵锣鼓声、鞭炮声给吓倒。为了营造一种过年的气氛出来。PD们给年货节上了一个舞龙的揭幕动画,而这个任务就落在了小生的头上,为了将.gif动效在移动端上实现,着实费劲。那么今天就来介绍这个动画效果是如何实现的?

动画效果

Web动画在PC上已不是难事,而且客户端自己带的动画特效也是非常的流畅,那么要将下面这种.gif动画效果在移动端上实现,我还是第二次经历(前一次是圣诞节的揭幕动画)。

揭幕动画

一开始看到这个效果,有点心虚也有点醉了。其实最开始打算直接上.gif动效图,但使用.gif动效图存在两个问题:

  • 文件过大(帧数越多,文件越大),可有可能造成应用卡死
  • 动效与音乐的匹配

那要怎么做呢?带着尝试的心情,开始了这个动效之旅。

动效分析

整个动画分为两个场景。那么先简单剖析这两个场景:

动画首屏

揭幕动画一进来是一个静态的蒙层:

动画首屏

在这个屏有以下几个动作:

  • 默认静音按钮不选择(这个是可配置时间段),用户点击之后可以处于选中静音状态
  • 点击整个云彩开始转入动画第二场,在这个过程中第一场渐渐隐去,到达第二场
  • 点击关闭按钮,不进入动画第二场,并且整个动画蒙层关闭

动画第二场

动画第二场

动画进入到第二场时整个动画会有以下几个动作:

  • 龙会有十个舞动动作,而且它会不断重复
  • 鞭炮扭动并且逐渐消失
  • 云彩飘扬
  • 如果静音按钮没选中,在第二场中会有音乐播放,反之不会有音乐播放

动画实现原理

整个动画使用CSS Animation中的animation属性完成。在这里主要使用了animation中的steps()animation-timing-function。其实就是一个多步动画,而多步动画中最主要使用到的是雪碧图,因为雪碧图和animation中的steps()配合能让我们轻松实现下面这样的动画效果:

我样可以看到整个动画人特一直在运动,而且动作与动作之间的变动是非常的协调。

动画制作

了解了整个动画场景以及其实现原理,接下来我们看看具体制作过程又是怎么样的,并且在制作过程中碰到什么样的坑。

动画DEMO

别的先不说,先把整个动画的效果向大家展示一下,用你的手机猛扫下面的二维码:

动画DEMO

(^_^)可别被锣鼓声给吓坏了。

创建模板

把整个动画放在一个场景中,就把它称之为“舞台”吧,并且把这个舞台命名为dragon-poplayer:

<div class="dragon-poplayer"></div>

动画有两个场景,把这个场景称之为“容器”:

<div class="dragon-poplayer" id="dragon-poplayer">
    <div class="dragon-section dragon-ready-play" id="dragon-ready-play">
        <div class="dragon-play">
            <!-- 第一场景 -->
        </div>
    </div>
    <div class="dragon-section dragon-playing" id="dragon-playing">
        <!-- 第二场景 -->
    </div>
</div>

为了能让用户更好的控制整个动画,毕竟不是所有用户都喜欢,在舞台的同级,添加了一个关闭按钮:

<div id="close"></div>

前面也说过了,第一场景中主要有一个静音按钮和触发到第二场景的动作按钮(暂且把它称为播放按钮吧)。另外就是把音乐<audio>也丢在这个容器中。

为了让静音按钮更能个性化,这里采用了模拟checkbox(具体制作方法,可以参考《CSS3制作iPhone的Checkbox》)。

<div class="dragon-poplayer" id="dragon-poplayer">
    <div class="dragon-section dragon-ready-play" id="dragon-ready-play">
        <div class="dragon-play">
            <div class="music">
                <input type="checkbox" name="music" id="music-control">
                <label for="music-control">声音</label>
            </div>
            <div id="music">
                <audio src="//gw.alicdn.com/tfscom/TB1Ydd2LpXXXXaUXFXXsKFbFXXX.mp3" loop="loop" preload="load"></audio>
            </div>
        </div>
    </div>
    <div class="dragon-section dragon-playing" id="dragon-playing">
      
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/animation/dragon-dance-opening-animation.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部