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

3D旋转特效(下)

旋转的原理与实现大体已经了解了,这一节我们需要把零碎的代码整合起来。具体参考右边carousel.js文件,旋转效果的样式与结构都是通过脚本代码动态生成。

定义了一个Carousel类,这里没有采用prototype原型对象,直接在构造函数中定义了this.run方法,这里一个特权方法。可以通过这个方法在外部能直接访问到内部的私有成员与方法。

在pageB.js中构造这个类,在运动的时候可以调用对应的接口,下面代码简化了部分

//旋转木马对象
var carousel = new Carousel($carousel, ...);
carousel.run()

Carousel类代码内部的通过initStyle方法构建场景与容器元素,主要是设置布局与一些3D需要的必要设置,perspective、preserve-3d等等

子节点是由3个图片构成,在render方法中需要循环生成对应的节点,需要注意rotateY角度与translateZ值的初始化处理

特权this.run方法是暴露给外部调用的接口,通过传递旋转的次数触发旋转动作

注意旋转动画是采用的transition,所以在监听这个动作事件的时候需要绑定transitionend webkitTransitionend事件,这样才能连接后面的动作了

代码布局还扩展了String.format的一个格式化方法,这个是动态生成HTML结构的的简单模版

任务

在pageB.js文件的22行处填入任务代码

点击可以调用旋转效果开始,并且每次点击旋转的面是叠加的

?不会了怎么办

 carousel.run(i++)

||

提问题

写笔记

公开笔记
提交
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

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

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

邀请您关注公众号
关注后,及时获悉本课程动态

举报

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

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?