今天来了解一下缓动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都有哪些属性！

GSAP JS基础教程--使用缓动函数的更多相关文章

  1. GSAP JS基础教程--TweenLite操作元素的相关属性

    今天来学习用TweenLite操作元素的各种属性,以Div为例,其他元素的操作也是一样的,只是可能一些元素有它们的特殊属性,就可能不同罢了.   代码里用详细注释,我就不再重复啦,大家看代码就可以啦! ...

  2. GSAP JS基础教程--动画的控制及事件

    好多天没有写无博文啦,今天无聊就再写一下! 今天要讲的是TweenLite的一些事件以及,TweenLite动画的控制,TweenMax类似,请自行参考官方文档:http://api.greensoc ...

  3. GSAP JS基础教程--认识GSAP JS

    第一次写博文呢,这次写博客是因为应一位同学的要求,写一下GSAP JS的一个小教程.为什么说小呢?因为它实际上就是小,只是一个入门级的小教程.如果你想问:“那你为什么不写详细一点呢?”,我想说,说., ...

  4. JS动画之缓动函数分析及动画库

    上一篇讲了JS动画定时器相关知识,这一篇介绍下缓动函数及流行的动画库. 熟悉的图 实际使用 jquery animate()+jquery.easing插件的使用: $(selector).anima ...

  5. JS —— 轮播图中的缓动函数的封装

    轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...

  6. window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果

    window.requestAnimationFrame 概述 window.requestAnimationFrame()这个方法是用来在页面重绘之前,通知浏览器调用一个指定的函数,以满足开发者操作 ...

  7. NGUI缓动函数

    缓动函数:http://easings.net/zh-cn 研究NGUI的博客:http://dsqiu.iteye.com/category/295721

  8. iOS基本动画/关键帧动画/利用缓动函数实现物理动画效果

    先说下基本动画部分 基本动画部分比较简单, 但能实现的动画效果也很局限 使用方法大致为: #1. 创建原始UI或者画面 #2. 创建CABasicAnimation实例, 并设置keypart/dur ...

  9. Silverlight动画学习笔记(三)：缓动函数

    (一)定义: 缓动函数:可以将自定义算术公式应用于动画 (二)为什么要用缓动函数: 您可能希望某一对象逼真地弹回或其行为像弹簧一样.您可以使用关键帧动画甚至 From/To/By 动画来大致模拟这些效 ...

随机推荐

  1. redis连接超时问题排查

    连接池无法获取到连接或获取连接超时redis.clients.jedis.exceptions.JedisConnectionException: Could not get a resource f ...

  2. Jquery ThickBox的使用

    thickbox是jQuery的一个插件,其作用是弹出对话框.网页框,使用户体验度更加愉悦,下面就来简单介绍它的几种用法.声明一下:这只是个人的总结记载而已.准备工作:你需要三个文件:thickbox ...

  3. Namenode HA原理详解（脑裂）

    转自:http://blog.csdn.net/tantexian/article/details/40109331 Namenode HA原理详解 社区hadoop2.2.0 release版本开始 ...

  4. USB学习笔记连载（八）：FX2替换到FX2LP需要注意事项

    对于使用FX2的用户,可以升级到FX2LP,上述的应用笔记<AN4078-C>中就讲解了在升级中的注意事项.   必要的修改:   1.晶振的匹配电容需要更改,FX2LP是12pF,不过笔 ...

  5. Axiom3D:Ogre动画基本流程与骨骼动画

    在Axiom中,Animation类用于管理动画,在此对象中主要管理着AnimationTrack对象,此对象用于管理动画的各种类型的每一桢.在Axiom中,动画类型主要有变形动画,姿态动画,骨骼动画 ...

  6. Opengl绘制我们的小屋(四)第三人称漫游

    本节内容是在第一人称漫游上完成的,请先了解上文中第一人称漫游的实现. 这一节讲下第三人称漫游是如何实现,第三人称,简单来说,就是在你后面会跟着一台摄像机顺着你拍摄. 先看一下失败的尝试.这个方法是把人 ...

  7. elasticsearch系列三：索引详解（分词器、文档管理、路由详解（集群））

    一.分词器 1. 认识分词器  1.1 Analyzer   分析器 在ES中一个Analyzer 由下面三种组件组合而成: character filter :字符过滤器,对文本进行字符过滤处理,如 ...

  8. （原创）Python文件与文件系统系列（3）——os.path模块

    os.path 模块实现了一些操作路径名字符串的函数,可以通过 import os.path 使用该模块,不过即使仅仅 import os 也可以使用该模块的方法. 1. abspath(path) ...

  9. 一款CSS3仿Google Play的垂直菜单

    之前分享过一款非常酷的CSS3垂直下拉动画菜单,是多级菜单.今天我们来看一款也是用CSS3制作的垂直菜单,是仿Google Play的菜单,菜单项都带有可爱的小图标,可以先来看看效果图: 当然你可以在 ...

  10. Linux中的软链接与硬链接

    软链接相当于windows的快捷方式,当源文件不存在时,软链接失效. 链接是指向文件名,当指向的文件名字删除的时候,就找不到源文件了.硬链接是指向文件本身,删除一个文件名字,还是可以找到源文件的.ls ...