appcan动画和变形

《appcan动画和变形》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、2012正益无线(北京)科技有限公司zhaoqinghua[AppCan动画和变形]目录简介3动画3变换4参数5案例分析5Ver0.1赵庆华2012-06-04Ver0.3赵庆华2012-06-09Ver0.5赵庆华2012-06-11简介CSS3中为了提高网页表现力和替代Flash的部分功能，新增了CSS动画和变换两个非常强大的功能。他们都是对元素CSS本身效果属性变化添加中间效果动画的强大功能。动画(animation)常用于展示一个预定制好的动画效果来取代Flash动画和GIF动画，而变换(transition)更多的

2、用于。变换常用于为元素从一种状态变化为另一种状态时添加动画效果。由于手机中Android和iOS使用的都是webkit引擎，因此我么使用的CSS定义都参照WEBKIT的定义。动画一个动画是由多个关键帧组成，这些关键帧定义了动画过程中呈上起下的关键点。在CSS3中，动画的关键帧是由@-webkit-keyframes来定义的，在这个标签里，我们可以按照动画的执行顺序，依次添加关键帧的描述。同时我们为这一组关键帧添加一个名称，使其可以被CSS定义类所引用。例如(摘自W3CSCHOOLS)@-webkit-keyframesmym

3、ove/*SafariandChrome*/{0%  {top:0px;}25% {top:200px;}50% {top:100px;}75% {top:200px;}100%{top:0px;}}上述例子中,我们定义了动画在开始0%时元素元素所在顶部坐标为0px，25%时顶点为之变为200px,其他定义相同。但这些关键帧只是定义了动画的各个关键点，而动画的整体属性例如执行时间、执行次数还需要专门进行描述。-webkit-animation: -webkit-animation-name-webkit-animation-

4、duration-webkit-animation-timing-function-webkit-animation-delay-webkit-animationiteration-count-webkit-animationdirection;上述定义描述了动画的全局属性-webkit-animation-name:动画关键帧组的名字，例如之前例子中的mymove-webkit-animation-duration:定义了动画的执行时间，刚才的例子中，我们定义了关键帧0%、25%...100%几个点的效果。duration

5、就是从0%到100%的执行时间。-webkit-animation-timing-function:定义了动画的执行速度。动画执行时，并不一定按照一个固定速度执行。我们使用多种预置速度变化属性来控制动画，还可以通过设定一个贝塞尔曲线来定义动画的执行速度变化。-webkit-animation-delay:定义了动画的延迟启动时间。常用在多个元素进行组合动画的时候，可以让一个元素的动画晚于其他元素一定时间才开始。-webkit-animation-iteration-count:定义了动画的执行次数，从1次到无限次都可以进行定

6、义。-webkit-animation-direction:定义了动画的执行方向。一般情况下，动画从头执行到尾顺序执行，有时我们需要动画往复执行。这种情况下，有一种方法是，直接定义关键帧把从初始到终点再从重点到初始的关键帧都定义一遍，这个就比较费神了。另一种方法是只需要定义从初始到终点的关键帧，然后设定direction为alternate。这时，动画在运行的奇数次顺序执行，而偶数次则迹向执行。-webkit-animation-play-state:定义了动画的执行状态是运行还是暂停。我们可以通过JS修改这个属性来时动画暂

7、停和恢复运行通过定义关键帧组和定义动画的整体属性，我们可以为一个DOM元素设定其自身的动画效果，使其按照定义好的参数执行。通过为多个DOM元素设定动画，我们可以很容易的实现出更复杂的组合动画。看到上面的定义参数，其实和Flash的动画基本原理都是相同的。变换上一节介绍了CSS3的动画，但动画是一组预置好的效果，但是在很多时候，并不能预先定义好动画。例如实现随机的星空效果。在这种要求下每一颗行星都有自己的出现点、消失点、亮度变化、移动速度。这时，我们就可以使用JS来控制其变换属性来实现。另外变化更强调于两个状态之间的变化，配合

8、CSS选择类可以非常容易实现一些特殊效果。-webkit-transition: -webkit-transition-property-webkit-transition-duration-webkit-transition-timing-function-webkit-transiti