缓动库 TweenLite 操作元素的相关属性

2018 年 11 月 10 日 0 条评论 2.88k 次阅读 1 人点赞

 

tweenlite，是webgame开发人员比较常用的一个缓动库。

官方网站：http://www.greensock.com/tweenlite/

  • 先简单介绍它的优点吧。

1.高效，性能不会差。
2.体积小，用到项目中，你的文件大小增加了3-4k。
3.容易使用，常用的函数就那么几个

  • 入门资料

看官方的《Getting Started Tweening》就够了吧。偶尔再查阅了api就行了。tweenlite的使用非常简单

TweenLite.to(mc, 1.5, {x:100, y:200, alpha:50});

第一个参数是需要缓动的对象，第二个参数是持续时间，第三个是需要改变的对象属性。任何DisplayObject的属性都可以改变。还有很多可选的参数，比如缓动函数，最后结束时候的回调函数。

  • 说一下缓动函数，包括三种

easeIn：以零速率开始运动，然后在执行时加快运动速度
easeOut：以较快的速度开始运动，然后减慢运行速度，直至速率为零
easeInOut：方法兼有 easeIn() 方法和 easeOut() 方法的运动，开始运动时速率为零，先对运动进行加速，再减速直到速率为零。
tweenlite提供了各种类型的缓动函数，使用时直接调用即可

有人做了各个缓动函数的效果测试 http://big888.blog.163.com 如下图

  • 当你写了一个tweenlite，想重复利用时，可以调用它的相关函数
var myTween:TweenLite = new TweenLite(mc, 1, {x:100, y:100});
//pause
myTween.pause();
//resume (honors direction - reversed or not)
myTween.resume();
//reverse (always goes back towards the beginning)
myTween.reverse();
//play() (always goes forwards)
myTween.play();
//restart
myTween.restart();
//invalidate (clears out any starting values that were 
//recorded and forces the tween to re-initialize on the next render)
myTween.invalidate();
//kill the tween immediately
myTween.kill();
//kill all tweens of the mc object
TweenLite.killTweensOf(mc)
  • 如果有多个组合的动作需要播放，可以使用 TimelineLite
var myTimeline:TimelineLite = new TimelineLite();
myTimeline.append( new TweenLite(mc, 1, {x:100}) );
myTimeline.append( new TweenLite(mc, 1, {y:200}) );
myTimeline.append( new TweenMax(mc, 1, {tint:0xFF0000}) );
  • 对于多个组件施加相同的动画效果可以用
TweenMax.allTo([btn1, btn2, btn3], 1, {alpha:0, y:"100"}, 0.1);

更多的使用技巧，可以去看看官方的 《Tips and Tricks》

觉得tweenlite不够用，还可以用tweenmax，它是tweenlite的扩展，提供了更为强大的功能

 

下面一个简单的各种API案例

<!DOCTYPE html>
<html>
 <head>
  <title>缓动库-TweenLite操作元素的相关属性</title>
  <meta charset="utf-8">
  <meta name="Author" content="十三月">
  <meta name="Keywords" content="TweenLite缓动库">
  <meta name="Description" content="TweenLite缓动库">
 
  <style type="text/css">
 
  #rect{
position:absolute;
width:50px;
height:50px;
top:300px;
left:50px;
background-color:blue;
  }
  </style>
 
 <!--使用之前记得导入包（下面的路径改成你们的包的路径）-->
 <script src="../js/TweenLite.min.js" type="text/javascript"></script>
  <script src="../js/Plugins/CSSPlugin.min.js" type="text/javascript"></script>
  <script src="../js/easing/EasePack.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  window.onload=init;
 
  //之所以把代码写在onload函数里，是因为页面没加载之前是读取不到网页的节点的
  function init(){
 
//第一部分：操作div的二维相关属性:
//位置操作：CSS的(left top margin) 和 GSAP里的(x y) 和 js里的(offsetLeft offsetHeight)
//left和top是相对网页或元素的父类的位置来计算的坐标，而x,y则是相对元素起始位置来计算的坐标，即元素的起始位置的x,y的值为(0,0)
TweenLite.to("#rect",1,{left:500,top:200,ease:Back.easeOut});
//TweenLite.to("#rect",1,{x:300,y:50,ease:Back.easeOut});
 
 
//注意GSAP里margin-left padding-left等属性的写法要写成marginLeft paddingLeft，即不要“-”，接在“-”后的单词的首字母要大写
//padding不算是位置的操作，但为了方便，还是和margin写在一起吧
//TweenLite.to("#rect",1,{marginLeft:100,paddingTop:10,ease:Back.easeOut});
 
 
//大小操作scaleX scaleY scale width height
//注意:虽然scale（缩放比例）和width height都可以让元素放大，但是，scale会元素内的内容也一起放大，而width height只是把容器放大啦，里面的内容不大小不变
//TweenLite.to("#rect",1,{scaleX:2,scale:1.5,ease:Back.easeOut});
//TweenLite.to("#rect",1,{scale:2,ease:Back.easeOut});
//TweenLite.to("#rect",1,{width:200,height:200,ease:Back.easeOut});
 
 
//变换(transform)操作:
//其实刚才说的rotation scale x y都属于变换的操作，这里说另外的两个变换（rotation(旋转) skew（倾斜）） 
//TweenLite.to("#rect",1,{rotation:45,ease:Back.easeOut});
//TweenLite.to("#rect",1,{skewX:30,ease:Back.easeOut});
//TweenLite.to("#rect",1,{skewY:-30,ease:Back.easeOut});
 
 
 
 
 
//第二部分，其他非二维属性操作
//如果你以为GSAP只能用来移动、放大缩小一些东西来做一些小动画，那你就大错特错啦！
//来看一下下面的相关属性的操作
 
//边框的操作，因为前面我们用css定义的方块（rect）是没有边框的，所以我们先来设置一下它的边框，方法如下
//TweenLite.set("#rect",{border:"solid 1px #000"});//其他的属性也可以使用TweenLite.set来设置
//TweenLite.to("#rect",1,{borderWidth:10,ease:Back.easeOut});
 
//TweenLite.to("#rect",2,{backgroundColor:"#FF00FF",ease:Back.easeOut});//背景色
//TweenLite.to("#rect",2,{color:"#FFF",ease:Back.easeOut});//字体颜色
//TweenLite.to("#rect",1,{fontSize:24,ease:Back.easeOut});//字体大小
//行高也是可以设置的,这个一定要使用单位，不然会发生错误
//TweenLite.to("#rect",1,{lineHeight:"50px",ease:Back.easeOut});
//TweenLite.to("#rect",1,{opacity:0.5,ease:Back.easeOut});//透明度(兼容所有主流浏览器，包括IE6);
//既然说到opacity，就是一下另一个调整元素透明度的属性autoAlpha(GSAP里的，CSS里没有)。当元素的透明度为0时，它会自动把元素的display属性值设置为0，即把元素隐藏
//TweenLite.to("#rect",1,{autoAlpha:0,ease:Back.easeOut});
 
//第二部分就说到这里，说得不怎 么全面，也不可能说得全面，我也是小白一个，只是把学习笔记记录下来了罢了，没说到的，就请同学们自己动手尝试一下啦！如果，你在使用一个属性，学得不需 要缓动或渐变时，TweenLite依然是很有用的，你只需要使用TweenLite.set方法，就可以快速设置一个元素的多个属性，例如：
//TweenLite.set("#rect",{width:"400px",height:"400px",position:"static",margin:"0 auto"});
 
 
 
 
 
 
 
//第三部分，三维属性操作（rotationX rotationY rotationZ z等等,不懂这几个属性的意思的同学请百度）
//并不是所有的浏览器都支持CSS3的3D属性，可以到以下网址(http://caniuse.com/transforms3d)查看都有哪些浏览器支持3D属性
 
//也就是说使用之前你应该：
//设置元素的父元素的perspactive的值，
//TweenLite.set("body",{perspactive:500});
//或设置元素自身的transformPerspactive的值
//TweenLite.set("#rect",{transformPerspacity:500});
//再或者，就直接设置CSS的默认transformPerspactive的值
//CSSPlugin.defaultTransformPerspactve=500;
 
//好吧，我们来试一下↓
//TweenLite.to("#rect",1,{rotationX:30,ease:Back.easeOut});
//TweenLite.to("#rect",1,{rotationY:100,ease:Back.easeOut});
//TweenLite.to("#rect",1,{rotationZ:45,ease:Back.easeOut});
  }
  </script>
 </head>
 
 <body>
  <!--我们用一个div来模拟一个小方块-->
  <div id="rect">测试</div>
 </body>
</html>

 

 

© 著作权归作者所有

雷雷

这个人太懒什么东西都没留下

文章评论（0）

(Spamcheck Enabled)