-
这个案例不算很难，但是把前端做动画的一些精髓已经讲透了。运用的技术基本就是H5+JS+CSS3，但是每个部分的实现都会有很多知识点的涉及，这里大体的总结下 自适应分辨率的问题可以采用的是JS+百分比布局处理 通过合成"雪碧图"解决图片加载与资源占用的问题 通过CSS3的animation实现帧动画，并且可以控制状态 布局除了left.top布局外，还可以使用最新的css3的transform处理 元素的变化，可以通过设置translate3d启动GPU加速 可以用CSS3的transition做渐变动画 HTML5音频的使用 采用promise可以解决异步编程的逻辑嵌套问题 代码组织的一些思路查看全部
-
老师的声音确实很像蜡笔小新查看全部
-
Hao查看全部
-
通过transition渐变的方式让人物走动查看全部
-
点击后并没有动画效果查看全部
-
jq回调函数接口 Deferred var dtd = $.Deferred(); //创建 dtd.resolve(); //成功 dtd.then() //执行回调 详细Deferred资料地址http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html查看全部
-
开门灯亮：灯亮的背景图片大小等同于灯灭的背景图片，所以加载需要时间，如果用到这个图片的时候再加载，某种情况下会出现页面闪动一下的情况来加载页面，这里就进行了预加载操作，增加了一个不存在实际意义的div中“<div class=‘b_background_preload’></div>”,以便灯开关的动作中，图片切换流畅 /////////// // 灯动画 // /////////// var lamp = { elem: $('.b_background'), bright: function() { this.elem.addClass('lamp-bright') }, dark: function() { this.elem.removeClass('lamp-bright') } };查看全部
-
实现页面与页面间的切换 一般来说要根据布局的结构，分为两种： 1.移动父容器，改变父容器的坐标 2.移动每个子容器的坐标 改变坐标的处理分为2种： 1.传统的top，left坐标修改 2.CSS3中的transform属性 transform属性向元素应用2D或3D转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜。其中会有一个值translate3d(x,y,z)是用来控制元素的位置在页面上的三轴的位置的,translate3d这里就指明了3d就是启用了3d加速，也就是启动了GPU来处理。查看全部
-
【给祖先节点上套一个限制显示区域的节点】 这样虽然是形成了横向布局与无缝拼接，不过可视区范围永远只能显示出一个主题页面的尺寸，所以我们需要再给祖先节点上套一个限制显示区域的节点 在实现上，通过CSS布局是可以直接处理的。本课程中做了自适应页面布局的处理，为了更精确页面的尺寸，这里采用JavaScript动态计算绝对的尺寸查看全部
-
一、结构的搭建与切换 页面的横向布局 页面之间的卷滚切换效果 页面切换部分的代码封装 二、小男孩的动作实现与封装 布局与自适应调整 精灵动画的实现 走路的实现 运动的状态控制 路径动画的坐标设计 三、第一幅图 太阳的结构与动画效果 云的结构与动画效果 四、第二幅图 页面布局搭建 开关门效果的实现 灯光处理 灯光效果的实现 人物进出商店的坐标计算 等待取花 鸟动画的实现 六、第三幅图 页面的布局 星星与水波 运动个轨迹处理 等待取花 鸟动画的实现查看全部
-
好像两湖的口音。湖南的？查看全部
-
用的sublime查看全部
-
'transition-timing-function':'linear'是运动的曲线，linear是速度均匀的，需要缓冲效果的可以用ease或者ease-out或者in之类的查看全部
-
好的查看全部
-
code2查看全部
举报
0/150
提交
取消