热点资讯 手机站

webkit webApp开发技术要点总结:动画过渡

webkit webApp开发技术要点总结:动画过渡

  这是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开发技术要点总结:动画过渡.doc》
将本文的Word文档下载到电脑,方便收藏和打印
推荐度:
点击下载文档

【webkit webApp开发技术要点总结:动画过渡】相关文章:

手机屏幕显示热点资讯怎么关闭锦集五篇08-03

打开屏幕就是热点资讯(合集3篇)08-03

网络热点资讯范文(精选4篇)08-03

新闻热点资讯(通用6篇)08-03

安徽行政区划调整地图03-04

2015安徽行政区划调整03-04

SEO关键词排名技巧,网站排名轻松上百度首页03-04

罗锦:图片工作者必看!非常重要的图片无损编辑03-04

作文范文《窗外风景》03-04

安徽行政区划调整最新消息03-03