这是Webkit中最具创新力的特性:使用过渡函数定义动画。
-webkit-animation: title infinite ease-in-out 3s;
animation 有这几个属性:
-webkit-animation-name://属性名,就是我们定义的keyframes
-webkit-animation-duration:3s //持续时间
-webkit-animation-timing-function: //过渡类型:ease/linear(线性)/ease-in(慢到快)/ease-out(快到慢)/ease-in-out(慢到快再到慢)/cubic-bezier
-webkit-animation-delay:10ms //动画延迟(默认0)
-webkit-animation-iteration-count://循环次数(默认1),infinite 为无限
-webkit-animation-direction: //动画方法:normal(默认 正向播放);alternate(交替方向,第偶数次正向播放,第奇数次反向播放)
这些同样是可以简写的。但真正让我觉的很爽的是keyframes,它能定义一个动画的转变过程供调用,过程为0%到100%或from(0%)到to(100%)。简单点说,只要你有想法,你想让元素在这个过程中以什么样的方法改变都是很简单的。
-webkit-transform: 类型(缩放scale/旋转rotate/倾斜skew/位移translate)
scale(num,num) 放大倍率。scaleX 和scaleY(3),可以简写为:scale(* , *)
rotate(*deg) 转动角度。rotateX 和rotateY,可以简写为:rotate(* , *)
Skew(*deg) 倾斜角度。skewX 和skewY,可简写为:skew(* , *)
translate(*,*) 坐标移动。translateX 和translateY,可简写为:translate(* , *)。
实现模拟弹出消息框(Alert)的例子:
①定义过渡(在段中描述keyframes):
@-webkit-keyframes DivZoom
{
0% { -webkit-transform: scale(0.01) }
60% { -webkit-transform: scale(1.05) }
80% { -webkit-transform: scale(0.95) }
100% { -webkit-transform: scale(1.00) }
}
.sZoom { -webkit-animation: DivZoom 0.5s ease-in-out }
(很容易看懂,将元素从缩小的0.01倍--很小但不能为0倍,放大到1.05 倍,再缩小到0.95倍,最后到1倍即正常大小。整个过渡过程事件为0.5秒,动画方法为ease-in-out,即慢到快再到慢,默认只进行1次过渡。这正是大家经常看到的 iPhone 弹出的提示信息的动画效果!)
②定义元素(在<body>段中):
<div id="layerH"style="-webkit-border-radius:14px; border:2px solid #FFF;-webkit-box-shadow:0px 2px 4px #888;position:absolute; left:24px; top:106px;<br>width: 256px; height: 268px; padding-left: 8px; padding-right: 8px;color: #FFFFFF; text-shadow: 1px 1px 1px #000; text-align: center;background-color: RGBA(32,48,96,0.9); background-image:url("BG-Msg.png"); background-repeat:no-repeat; z-index: 1; visibility: hidden; "> <p><span style="font-size: 16pt; font-weight: bold">使用说明</span></p> <hr noshade size="1"> <div id="HelpText"style="height: 120px">说明文字</div> <hr noshade size="1"> <form name="formV"method="POST"> <input type="button"value="确认"name="B1"style="width: 100%; height: 40px; font-size: 14pt; ont-weight: bold; color: #FFFFFF; text-shadow: 0px -1px 1px #000;" onclick=" layerH.style.visibility="hidden""> </form> </div>
③启动动画(在 java 定义的函数中)
function pHelp()
{
layerH.style.visibility = "visible"
layerH.style.cssText = "-webkit-animation-delay: " + Math.random() + "ms"
layerH.className = "sZoom"
}
(这个启动函数就很好理解了。但是为什么要使用-webkit-animation-delay这句呢?因为当一个元素过渡显示完成后,若其样式没有变化,下一次将无法进行过渡动画显示。我们巧妙的利用其动画延迟时间定义,使其有所变化,就避免了上述问题。其中使用随机数函数Math.random(),产生一个大于0小于的随机数。当然,延迟零点几毫秒,用户是不会察觉的。)
推荐:webkit webApp开发技术要点总结:使用特殊链接
webkit webApp开发技术要点总结:双手指滑动事件
webkit webApp开发技术要点总结:事件
【webkit webApp开发技术要点总结:动画过渡】相关文章:
手机屏幕显示热点资讯怎么关闭锦集五篇08-03
打开屏幕就是热点资讯(合集3篇)08-03
网络热点资讯范文(精选4篇)08-03
新闻热点资讯(通用6篇)08-03
安徽行政区划调整地图03-04
2015安徽行政区划调整03-04
作文范文《窗外风景》03-04
安徽行政区划调整最新消息03-03