AppCan动画和变形实用技术.docxVIP

2012正益无线(北京)科技有限公司 zhaoqinghua  [AppCan 动画和变形]  目录  TOC \o 1-5 \h \z \u  HYPERLINK \l _Toc327202619 简介  PAGEREF _Toc327202619 \h 3  HYPERLINK \l _Toc327202620 动画  PAGEREF _Toc327202620 \h 3  HYPERLINK \l _Toc327202621 变换  PAGEREF _Toc327202621 \h 4  HYPERLINK \l _Toc327202622 参数  PAGEREF _Toc327202622 \h 5  HYPERLINK \l _Toc327202623 案例分析  PAGEREF _Toc327202623 \h 5  Ver0.1赵庆华2012-06-04Ver0.3赵庆华2012-06-09Ver0.5赵庆华2012-06-11 简介 CSS3中为了提高网页表现力和替代Flash的部分功能，新增了CSS动画和变换两个非常强大的功能。他们都是对元素CSS本身效果属性变化添加中间效果动画的强大功能。动画(animation)常用于展示一个预定制好的动画效果来取代Flash动画和GIF动画，而变换(transition)更多的用于。变换常用于为元素从一种状态变化为另一种状态时添加动画效果。由于手机中Android和iOS使用的都是webkit引擎，因此我么使用的CSS定义都参照WEBKIT 的定义。 动画 一个动画是由多个关键帧组成，这些关键帧定义了动画过程中呈上起下的关键点。在CSS3中，动画的关键帧是由@-webkit-keyframes来定义的，在这个标签里，我们可以按照动画的执行顺序，依次添加关键帧的描述。同时我们为这一组关键帧添加一个名称，使其可以被CSS定义类所引用。例如(摘自W3CSCHOOLS) @-webkit-keyframes mymove /* Safari and Chrome */{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-duration -webkit-animation-timing-function -webkit-animation-delay -webkit-animation iteration-count -webkit-animation direction; 上述定义描述了动画的全局属性 -webkit-animation-name:动画关键帧组的名字，例如之前例子中的mymove -webkit-animation-duration:定义了动画的执行时间，刚才的例子中，我们定义了关键帧0%、25%...100%几个点的效果。duration就是从0%到100%的执行时间。 -webkit-animation-timing-function:定义了动画的执行速度。动画执行时，并不一定按照一个固定速度执行。我们使用多种预置速度变化属性来控制动画，还可以通过设定一个贝塞尔曲线来定义动画的执行速度变化。 -webkit-animation-delay:定义了动画的延迟启动时间。常用在多个元素进行组合动画的时候，可以让一个元素的动画晚于其他元素一定时间才开始。 -webkit- HYPERLINK /cssref/css3_pr_animation-iteration-count.asp \t _top animation-iteration-count:定义了动画的执行次数，从1次到无限次都可以进行定义。 -webkit- HYPERLINK /cssref/css3_pr_animation-iteration-count.asp \t _top animation-direction:定义了动画的执行方向。一般情况下，动画从头执行到尾顺序执行，有时我们需要动画往复执行。这种情况下，有一种方法是，直接定义关键帧把从初始到终点再从重点到初始的关键帧都定义一遍，这个就比较费神了。另一种