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都有哪些属性!
上一篇:用C写一个简单的推箱子游戏(一)


下一篇:C# - 接口的继承