-
实现页面与页面间的切换 一般来说要根据布局的结构，分为两种： 1.移动父容器，改变父容器的坐标 2.移动每个子容器的坐标 改变坐标的处理分为2种： 1.传统的top，left坐标修改 2.CSS3中的transform属性 transform属性向元素应用2D或3D转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜。其中会有一个值translate3d(x,y,z)是用来控制元素的位置在页面上的三轴的位置的,translate3d这里就指明了3d就是启用了3d加速，也就是启动了GPU来处理。查看全部
-
CSS3引入了一个新的属性Transform: transform 属性向元素应用 2D 或 3D 转换，该属性允许对元素进行旋转、缩放、移动或倾斜。其中有一个值translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的，translate3d这里指明了3d就是启用了3d加速，即启动GPU来处理，性能更强； transition可以设置一些具体的参数，比如动画执行的时间，变化的算法、动画延时等等。 注意：transform属性是静态属性，不是动画属性，一旦写到style里面，将会直接显示作用，无任何变化过程。 简单的一句话描述就是： 通过设置transition的一些参数，让translate3d这个属性发生变化。查看全部
-
可以查看全部
-
本课程中做了自适应页面布局的处理，为了更精确页面的尺寸，这里采用JavaScript动态计算绝对的尺寸v查看全部
-
一般来说运动的状态都是需要可控的，这样才方便我们做进一步的操作。 【animation的暂停方式】 CSS3的animation直接提供一个animation-play-state的样式来控制动画的暂停处理。增加一个控制暂停样式，写动画样式的时候特别注意下不同浏览器的兼容性，加上对应的前缀 .pauseWalk { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; } 只需要在对应的有animation动画人物元素节点上，通过动态增加删除这个样式就可以控制这个精灵的开始与暂停了，非常简单 transition的暂停方式 至于transition，一般来说要暂停的地方都是一开始就程序设定好的目标点，因此这个其实是不需要控制的，这个也没办法控制，这个是一个动画过渡的效果，浏览器只提供了一个动画结束的回调。当然可以有一个变通的办法，做一个强制改变目标过渡值的处理 如何操作： 具体可以看右边的代码块，暂停方法内transition强制做了一个设置left坐标的处理，达到一个暂停的效果，但是这样是有问题的，下一次的启动必须等上一次动画的时间结束 不难看出animation要比transition强大多了查看全部
-
【给祖先节点上套一个限制显示区域的节点】 这样虽然是形成了横向布局与无缝拼接，不过可视区范围永远只能显示出一个主题页面的尺寸，所以我们需要再给祖先节点上套一个限制显示区域的节点 在实现上，通过CSS布局是可以直接处理的。本课程中做了自适应页面布局的处理，为了更精确页面的尺寸，这里采用JavaScript动态计算绝对的尺寸查看全部
-
动画主要知识点查看全部
-
jq回调函数接口 Deferred 步骤： var dtd = $.Deferred(); //创建 dtd.resolve(); //成功 dtd.then() //执行回调查看全部
-
CSS Sprites在国内很多人叫CSS精灵，其实这个技术不新鲜，原理就是：靠不断的切换图片让人感觉视觉上不断在变化，例如gif动画之类的效果查看全部
-
页面布局与切换是一个整体，我们想调用切换的时候，并不关心其内部处理的手段，所以我们只需要提供一个可以调用的接口就可以，新建一个Swipe.js文件，内部定义一个Swipe工厂方法，内部会产生一个swipe的滑动对象，暴露了scrollTo的接口查看全部
-
页面布局与切换是一个整体，我们想调用切换的时候，并不关心其内部处理的手段，所以我们只需要提供一个可以调用的接口就可以，新建一个Swipe.js文件，内部定义一个Swipe工厂方法，内部会产生一个swipe的滑动对象，暴露了scrollTo的接口查看全部
-
封装，即隐藏对象的属性和实现细节，仅对外公开接口。查看全部
-
一、结构的搭建与切换 页面的横向布局 页面之间的卷滚切换效果 页面切换部分的代码封装 二、小男孩的动作实现与封装 布局与自适应调整 精灵动画的实现 走路的实现 运动的状态控制 路径动画的坐标设计 三、第一幅图 太阳的结构与动画效果 云的结构与动画效果 四、第二幅图 页面布局搭建 开关门效果的实现 灯光处理 灯光效果的实现 人物进出商店的坐标计算 等待取花 鸟动画的实现 六、第三幅图 页面的布局 星星与水波 运动个轨迹处理 等待取花 鸟动画的实现查看全部
-
一、结构的搭建与切换 页面的横向布局 页面之间的卷滚切换效果 页面切换部分的代码封装 二、小男孩的动作实现与封装 布局与自适应调整 精灵动画的实现 走路的实现 运动的状态控制 路径动画的坐标设计 三、第一幅图 太阳的结构与动画效果 云的结构与动画效果 四、第二幅图 页面布局搭建 云的结构与动画效果 四、第二幅图 页面布局搭建 开关门效果的实现 灯光处理 灯光效果的实现 人物进出商店的坐标计算 等待取花 鸟动画的实现 六、第三幅图 页面的布局 星星与水波 运动个轨迹处理 等待取花 鸟动画的实现查看全部
-
这是纪录哪个节吗？查看全部
举报
0/150
提交
取消