GSAP JS基础教程--使用缓动函数

今天来了解一下缓动easeing函数。


开始，如果你还没有GSAP的类包，可以到GreenSock的官网去下载最新版本的类包，或者直接点击这里​来下载

学习之前，先来准备一下：
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>GSAP JS基础教程--使用缓动函数</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">

  <!--
  *@author AIJ
  *@email 1058514799@qq.com
  *@date 2013-6-28
  -->
  
  <style type="text/css">
 
  #rect{
position:absolute;
width:50px;
height:50px;
top:300px;
left:50px;
background-color:blue;
  }
  </style>

 <!--使用之前记得导入包（下面的路径为俺的包的路径，改成你们的包的路径就行啦）-->
 <script src="../greensock/TweenLite.min.js" type="text/javascript"></script>
  <script src="../greensock/Plugins/CSSPlugin.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  window.onload=init;

  //之所以把代码写在onload函数里，是因为页面没加载之前是读取不到网页的节点的
  function init(){

  </script>
 </head>

 <body>
  <!--我们用一个div来模拟一个小方块-->
  <div id="rect"></div>
 </body>
</html>

 


准备好啦？下面直接来开始吧！
先来说一下之前没说的easing吧：
1）什么是easing？
easing就是缓动的意思，那什么是缓动？缓动是一种非匀速的线性运动，“缓”的意思有缓冲的意思，表示一种点与点之间的速度的变化，通常表现为随着距离越来越近速度越来越慢，或随着距离越来越近速度越来越快的样子。当然也有加速运动，先加速后减速等;

2)如何使用easing？
在上一章的学习中，我们已经学习使用了两个包
TweenLite.min.js和CSSPlugin.min.js
类似的，要使用easing，只要导入相应的包（EasePack.min.js）就好啦，像这样子↓↓↓
 
注：EasePack.min.js在easing文件夹下


3)常用的easing函数：
这里只说一下常用的几个easing函数，其他的easing函数就请同学们自己学习啦！

点这里查看
​
我们在上一节课的基础上加上easeing函数后看看效果：

使用方法很容易，只需要在TweenLite的vars对象中添加ease属性就行啦（不懂的话就直接看一下下面的代码就懂啦！）：

（一句句复制下面代码到上面的init函数中运行看看）

1、Power1.easeIn    Power1.easeInOut    Power1.easeOut

TweenLite.to("#rect",1,{left:"500px",ease:Power1.easeIn});
TweenLite.to("#rect",1,{left:"500px",ease:Power1.easeInOut});
TweenLite.to("#rect",1,{left:"500px",ease:Power1.easeOut});

 

相应还有Power2  Power3 Power4等等，同学们可以一个个试试


2、Back.easeIn    Back.easeInOut    Back.easeOut
使用方法一样：
TweenLite.to("#rect",1,{left:"500px",ease:Back.easeIn});
TweenLite.to("#rect",1,{left:"500px",ease:Back.easeInOut});
TweenLite.to("#rect",1,{left:"500px",ease:Back.easeOut});

 


3、常用的还有Strong 、Bounce和Elastic，使用方法也是一样的，同学就自己一个个试试吧，认真观察每个的函数的效果



今天就这样啦，自己多动手，试试！！！！！！！！！

下节课会说下使用TweenLite用操作元素的各种属性,会以div元素为例，有兴趣的同学自己先看一下div都有哪些属性！
posted @ 2013-07-26 16:51  Tiac  阅读(2719)  评论(0)  编辑  收藏  举报