“约会”的总结

来源：互联网发布：html转xml python 编辑：程序博客网时间：2024/05/16 04:49

最近在慕课网上看到一个关于七夕言情的小短片，觉得蛮有意思的，于是自己用原生JS实现了一遍。
整个短片分为三个场景：场景一是小男孩悠闲的走在路上；场景二是小男孩去花店买花；场景三是小男孩前往桥上与小女孩约会。大致的情景如下图所示。
情景一（闲逛）：

情景二（买花）：

情景三（约会）：
这里写图片描述

分析：
整体布局：三个场景是连贯的，所以可以组织在一个“ul列表”里面，但是每次只显示一个情景，所以列表可以放在一个“div容器”当中，控制显示的宽度，而小男孩是贯穿整个场景的，不是位于某一个场景里的，所以“小男孩”可以与ul列表并列放在容器当中。
场景一：我们可以发现场景一里面除了“背景图片”和小男孩之外还有移动的“云”和“太阳”；
场景二：场景二中有“背景图片”“门”、“飞鸟”，细心的朋友会发现小男孩进花店的时候店右边墙上的灯点两个，其实这是监听到小男孩走到花店时将背景图换了；
情景三：三中有“背景图片”、“闪烁的小星星”、“荡漾的水波”及“女主角”。

根据上面的分析，可以搭出整个情景图的html结构如下：

<body>    <!-- 设置100%宽高 -->    <div id="theme" class="theme">        <ul id="content" class="content">            <li>                <div class="backgroundA">                    <img src="images/A.png" alt="图片一">                    <!-- 云 -->                    <div class="cloud">                        <div class="cloud1"></div>                        <div class="cloud2"></div>                    </div>                    <!-- 太阳 -->                    <div class="sun"></div>                </div>            </li>            <li>                <div class="backgroundB">                    <img id="imgB" src="images/B-dark.png" alt="图片二">                    <!-- 门 -->                    <div id="door" class="door">                        <img id="leftDoor" class="leftDoor" src="images/door-left.png" alt="左门">                        <img id="rightDoor" class="rightDoor" src="images/door-right.png" alt="右门">                    </div>                    <!-- 小飞鸟 -->                    <div id="bird" class="bird"></div>                </div>            </li>            <li>                <div class="backgroundC">                    <img src="images/C.png" alt="图片三">                    <!-- 小女孩 -->                    <div id="girl" class="girl"></div>                    <!-- 小星星 -->                    <div class="stars">                        <div class="star1"></div>                        <div class="star2"></div>                        <div class="star3"></div>                        <div class="star4"></div>                    </div>                    <!-- 水 -->                    <div class="water">                        <div class="water1"></div>                        <div class="water2"></div>                        <div class="water3"></div>                        <div class="water4"></div>                    </div>                </div>            </li>        </ul>        <!-- 小男孩精灵图，通过修改background-position来达到走路的效果 -->        <div id="boy" class="boy-walk"></div>    </div></body>

其中，
小男孩走路的动作、云移动、太阳落下、小鸟拍翅膀、星星闪烁、水波荡漾及男女孩转身都是通过CSS3的动画animation实现的；
小男孩向前走动、背景图片移动、门的开关及小鸟向前飞行都是通过CSS3的过渡transition实现的。
整个情景实现的难点就是在什么时候进行下一个动画，这个时候就要采用JS的事件监听，为上一个动作的完成添加过渡完成事件，addEventListener(“transitionend”,function); 表示上一动作过渡完后执行function函数。
还用到了html5中的插入音频的方法，先通过var audio = new Audio(“url”); 传入音频的地址，定义一个音频对象；然后设置是否循环播放audio.loop = loop || false; 最后设置播放audio.play();即可。

整个实现我近两天整理完成放到github上：https://github.com/DreamFJ/JavascriptDemo

0 0