-
这里的取值采用jQuery的offset处理的，注意下position与offset的取值不同点，.offset()是相对于文档（document）的当前位置,.position()是相对于父级元素的位移，一个元素可以嵌套多个position所以这里要特别注意下。查看全部
-
element.css({ transition: 'transform 5000ms linear', transform: 'translateX(-' + (width * 2) + 'px)' //设置页面X轴移动 }); });查看全部
-
转换，动画，音频，查看全部
-
页面切换部分的代码封装查看全部
-
整个效果都是以小男孩走路为前提，在三个主题页面中切换并在每个主题页面中会有不同的效果呈现 我们可以这样理解，效果上 页面主题会滚动 小男孩会走动 通过二者的速率变化，可以让用户产生一个视觉上的错觉，也可以称为视觉差，感觉就是人物在不断走路前行 从页面的效果，考虑页面整体布局结构应该需要这样 页面是一个横向的 包含了3个主题页面 页面之间是无缝拼接的 页面还要能滚动 布局上很好处理，我们做3个块级元素，每一个块元素代表一个主题页面的容器节点。然后设置一个父容器是3个块元素的宽，通过float处理，这样就形成了一个横向的3个无缝拼接的页面查看全部
-
这样人才会站在图中的路上$boy.css({ top: pathY - boyHeight + 25 });查看全部
-
鸟动画的实现 飞鸟动画也跟小男孩动画一样，通过精灵与transition的组合实现 在页面增加一个鸟的HTML结构 <div class="bird"></div> CSS布局比较简单，通过background-position加载精灵图，做动画的元素都是需要设置position：absolute这样才能独立漂浮文档流，让页面的重绘更少 图片变化部分采用的是CSS3的animation，通过设置animation-timing-function: step-start;马上跳到动画每一帧结束的状态，这样就让动画执行一帧一帧的切换效果 @-webkit-keyframes bird-slow { 0% { background-position: -182px 0px; } 50% {background-position: 0px 0px;} 75% {background-position: -91px 0px;} 100% {background-position: -182px 0px;} } 以上是4个变化点，但是实际上我们只有3张图，0% 100%是最后一帧，这是因为设置step-start了的缘故，注意下这个写法就可以了 移动部分就很简单，我们移动left或者right的值，距离就是一个页面单位，注意下正负取值 具体的实现，可以参考下源码部分查看全部
-
注意下position与offset的取值不同点，.offset()是相对于文档（document）的当前位置,.position()是相对于父级元素的位移，一个元素可以嵌套多个position所以这里要特别注意下。scale是一个缩放效果查看全部
-
小男孩部分代码的封装 前端充斥着大量的异步操作，动画就是异步的逻辑，七夕主题的整个设计都是以小男孩走路为主线。在走到不同的路段就会有不同的操作，走路是通过CSS3的transition与animation结合完成的，所以针对这类异步的处理我采用了jQuery的Deferred封装起来。 除此之外，在整个结构中都是采用面向接口编程，简单的说就是将行为分布在各个对象中，并让这些对象自己各自负责自己的行为。那么小孩男的整个行为逻辑我都将会封装成一个独立的对象，通过接口调用 说了半天，我们看右边的代码最直接，我单独用了个BoyWalk.js把小男孩的动作给封装了起来，暴露了walkTo、stopWalk、setColoer三个接口，提供给外部调用。 接口的命名与数量是需要根据具体的业务逻辑的需要，随着人物的动作变化的增加，接口也会增加 以小男孩走路为变化，不同的路段有不同的速率与距离，所以会提供一个走路的walkTo接口给外部。在第三章的时候我把走路动作的一些细节与实现都分解了一遍，这里主要看下怎么融入Deferred的处理 index.html中的代码调用，可以这样理解： 生成一个小男孩对象 开始走路，2秒走到页面的20%的距离 完成了设置一个颜色效果 继续走路，走到40%的区域 完成了设置一个颜色效果 继续走路，走到60%的区域 完成了设置一个颜色效果 通过加入Deferred的处理，让我们的流程就跟同步一样，这件事完成了就开始下一件事,非常合适人类的线性编程的逻辑，之后的整个流程都会基于then的方式书写查看全部
-
运动的状态控制 通过CSS3的animation与transition的结合实现了人物的走路的效果。一般来说运动的状态都是需要可控的，这样才方便我们做进一步的操作。 animation的暂停方式 CSS3的animation直接提供一个animation-play-state的样式来控制动画的暂停处理。增加一个控制暂停样式，写动画样式的时候特别注意下不同浏览器的兼容性，加上对应的前缀 .pauseWalk { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; } 只需要在对应的有animation动画人物元素节点上，通过动态增加删除这个样式就可以控制这个精灵的开始与暂停了，非常简单 transition的暂停方式 至于transition，一般来说要暂停的地方都是一开始就程序设定好的目标点，因此这个其实是不需要控制的，这个也没办法控制，这个是一个动画过渡的效果，浏览器只提供了一个动画结束的回调。当然可以有一个变通的办法，做一个强制改变目标过渡值的处理 如何操作： 具体可以看右边的代码块，暂停方法内transition强制做了一个设置left坐标的处理，达到一个暂停的效果，但是这样是有问题的，下一次的启动必须等上一次动画的时间结束 不难看出animation要比transition强大多了查看全部
-
transition与animation用的很多，这里简单的描述下不同点，transition需要事件触发，animation可以直接自动触发，而且功能上更为强大，包括可以设置不同时间段的动画规则，还有状态的控制，事件等等。查看全部
-
页面切换部分的代码封装 封装，即隐藏对象的属性和实现细节，仅对外公开接口。 封装的目的是增强安全性和简化编程，使用者不必了解具体的实现细节，而只是要通过外部接口，以特定的访问权限来使用类的成员 这个主题案例，我采用的是面向接口编程的写法，简单的说就是将行为封装分布在各个对象中，并让这些对象自己各自负责自己的行为，这也是面向对象设计的一个优点 就拿页面切换的效果来说，在某一时刻，元素A需要让页面进行切换，那么元素A不需要关心页面是怎么切换的，它只能要调用到一个接口方法能让页面切换就行了 基于这样的理论，我们就开始改造一下页面切换的零碎的代码块 页面布局与切换是一个整体，我们想调用切换的时候，并不关心其内部处理的手段，所以我们只需要提供一个可以调用的接口就可以，新建一个Swipe.js文件，内部定义一个Swipe工厂方法，内部会产生一个swipe的滑动对象，暴露了scrollTo的接口 JavaScript中没有抽象类与接口的支持，所以很大程度上实现封装都是靠闭包去模拟 具体我看看右边代码块Swipe.js的实现 与index.html中调用查看全部
-
position与offset的取值不同点，.offset()是相对于文档（document）的当前位置,.position()是相对于父级元素的位移查看全部
-
区别transition与animation的使用 transition需要事件触发，animation可以直接自动触发，而且功能上更为强大，包括可以设置不同时间段的动画规则，还有状态的控制，事件等等。查看全部
-
/*主体部分*/ #content { width : 60%; height : 60%; top : 20%; left : 20%; overflow : ?; position : absolute; border : 1px solid #ccc; } /*使content在页面居中*/查看全部
举报
0/150
提交
取消