章节
问答
课签
笔记
评论
占位
占位

3D关窗效果

第三个场景增加pageC.js与pageC.css2个文件,场景内的元素,月亮、星星、圣诞树和云的实现之前都已经讲解过了,这里不再重复。具体看下关窗的实现的与canvas版的雪花效果

关窗的同时,背景会有一个渐隐渐现的替换效果,这里会采用2张图做交替动画,一张隐藏一张显示,因此同时会有3个动画在进行

参考pageC.js与pageC.css代码区域:

背景图切换

在静态HTML布局中,给2张不同的切换节设置opacity属性控显示与隐藏的状态,

<div class="window-scene-bg"></div> //1
<div class="window-close-bg"></div> //0

在脚本代码处,同时给2个背景节点增加opacity的控制,这样达到渐隐渐现的切换效果

this.$sceneBg.transition({
    opacity: 0,
}, 3000);
this.$closeBg.transition({
    opacity: 1
}, 5000);

关窗动画

通过脚本控制给对应的“门”增加关门的样式,通过animation动画,控制元素的scale、rotateY鱼与rotateZ值的变化。

element.addClass("close").one("animationend webkitAnimationEnd", function(event) {
    complete()
 })

给左右2个门增加"close"样式控制,然后绑定一个one事件监听动画的处理完成,这样才能衔接到后续的动作了(这里需要注意animation是2组动画,需要判断下2组动画全部结束)

任务

在pageC.js文件中的31行出填入任务代码

给左右2片窗户增加开窗效果,然后监听窗户的动作完毕后调用回调函数

提示:

this.$leftWin ,this.$rightWin 是左右2个窗户元素

class=close是关窗的样式,调用了css3的动画

css3的动画事件名是:animationend

?不会了怎么办

    var count = 1;
    var complete = function() {
        ++count
        if (count === 2) {
            alert("窗户关闭")
        }
    }
    var bind = function(element) {
        element.addClass("close").one("animationend webkitAnimationEnd", function(event) {
            complete()
        })
    }
    bind(this.$leftWin)
    bind(this.$rightWin)

||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最热 最新
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?