第一次写博文呢，这次写博客是因为应一位同学的要求，写一下GSAP JS的一个小教程。为什么说小呢？因为它实际上就是小，只是一个入门级的小教程。如果你想问：“那你为什么不写详细一点呢？”，我想说，说.,说..，“因为我也不懂，哈哈”，就是不懂，不骗你们，不懂就是不懂。那我那点英文水平肿么会懂呢？

 
好吧，言归正传。首先说一下GSAP（GreenSockAnimationPlatform）的官网，点这里进入GSAP的官网，也可以点这里直接进入GSAP JS的介绍，有空详细看一下，并不需要非常好的英语水平才能看，你看博主我这个英文水平都能看懂部分，不懂的部分就多查查有道。看得懂的话就可以完全跳过我的这篇“小教程啦”，真的，我说得一定不够官方的详细、全面、好，还有可能会说错（:汗
 
好吧，这次真的要开始啦！准备好了吗？开始啦！！！
 
首先，我们先说一下工具的准备，要学习GSAP，那么我们一定要先准备一个GASP的类包啦,文章结束的时候，博主我会给出一个网盘地址，让同学本下载，当然，你也可以到GreenSock的官网（http://www.greensock.com）下载最新的版本
 
GSAP有两个版本一个为ActionScript 版本，已经在flash平台上运行多年，是一个“轻量级”、“高效率”、强大的2D动画引擎，一直深受ASer（学ActionScript的人都叫自己 ASer）的欢迎，学AS的人，没有一个说是不知道、没使用过GSAP的。
 
GSAP JS顾名思义是指GSAP的js版本，GSAP JS是GreenSock公司新出的一个2D动画引擎，可以说是AS版本的移植版，虽然功能还不够AS版本的完善，但是一样是非常强大、高效、好用的，据说它的运行速度是JQuery的20倍（想测试的同学可以点这里）。当然，这是说动画方面的，jQery也有自己的强大之处（比如jQuery强大的选择器）。
 
 
好吧，类包也准备好啦，这一次真的真的要开始啦！
 
使用之前，就像使用其他任何js类库，先要导入类包，导入方法如下：
<script type="text/javascript" src="你的类包的路径" ></script>
 
导入包的比较常用组合有两种，CSSPlugin.min.js+EasePack.min.js+TweenLite.min.js 和TweenMax.min.js 这两种组合;
TweenMax是TweenLite的子类，它承 了TweenLite所有属性和方法，同时还包含了一些常用的插件（比如CSSPlugin）,所以当你导入TweenMax时就不需要导入 CSSPlugin啦。当然因为TweenMax包含了其他的插件，所以它的“份量”会大一点，不名够TweenLite小巧，实际使用时，可根据个人需 求进行选择。
 
注：
TweenMax包含TweenLite, CSSPlugin, EasePack, TimelineLite, TimelineMax, RoundPropsPlugin, BezierPlugin, AttrPlugin,和 DirectionalRotationPlugin所以可以单独使用
 
TweenLite没有包含CSSPlugin插件（网页通过css来控制元素变化），所以不能单独使用，至少要和CSSPlugin一起用
 
下面的导入的一个示例：
<!--CDN links for the latest TweenLite, CSSPlugin, and EasePack-->

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
或
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

我不怎么会说话，直接来一个小实例好啦，边做边解说！
我们来做一个简单的小方块移动动画吧：
1）先来创建一个小方块（用div来做）；
<div id="rect"></div>
2）写一下div的样式，让它看起来更像一个方块；
.rect{

//元素的position根据需求来设置

//如果position为static，关于元素的坐标的操作将会无效，但对于元素的width,height的操作还是会被执行

//如果position为absolute或fixed或relative时，对于元素的坐标的宽高的操作都能生效

//试着改变下面的position属性来看一下效果

position:absolute;

width:100px;

height:100px;

background-color:blue;

top:300px;

left:50px;

}
3)开始写代码，让方块动起来;
这里使用的TweenLite(使用记得导入包，TweenMax的使用方法类似)
TweenLite的构造方法是这个样子的：TweenLite(target:Object,
duration:Number, vars:Object);
target为要操作的dom对象；
duroation为整个动画的持续时间;
vars为一个自属性集合对象，可以是一个属性如：{left:"500px"},或多个属性如：{left:"500px",top:"200px",width:"200px"}
好了，下面我们先来花1秒钟把刚才创建的方块的横坐标移动到500像素的位置吧！方法如下：
var
rect=document.getElementById_x_x_x_x_x("rect");
TweenLite.to(rect,1,{left:“500px”});
上面两行代码也可以简单地写成：TweenLite.to("#rect",1,{left:"500px"});
TweenLite并不依赖jQuery，但我们还可以利用jQuery强大的选择器来简化TweenLite创建动画的代码，
比如上面的代码可以通过id名来（#rect）来简化动画的创建过程，当我们导入jQuery时,我们还可以使用
元素的类（例如：".rect"）等来代表元素，从而简化代码；
不知道有没有说清楚，简单地说
TweenLite(target:Object,
duration:Number, vars:Object);
target对象可以用jQuery的选择器选择出来的对象（例如：$("#element"),$(".abd"),$("#element
p")等等）来代表，从而简化代码
 
4）扩展；
好啦，光让方块向右移动一下不过瘾？那我们再让方块向下移动100像素，同时把它的宽设为原来的两倍，我们可以这样写：
TweenLite.to("#rect",1,{top:"400px",scale:2});//scale为缩放比例的意思
好啦，把这话代码添加到原来的代码中去，变成：
TweenLite.to("#rect",1,{left:"500px"});

TweenLite.to("#rect",1,{top:"400px",scale:2});//scale为缩放比例的意思
这个样子，运行看看！
这个会变成方块向坐标（500，400）移动，并同样放大两倍。
这
是为什么呢？因为我们的两号代码没有时间间隔，同时执行啦，解决办法是：为第二个TweenLite设置一个延时时间（delay），延时多久呢？因为第
一个动画的持续时间为1秒，所以我们第二动画就等它一秒，等第一个动画播放完再开始吧，也就是说延时1秒，修改后的代码是这样子的：
TweenLite.to("#rect",1,{top:"400px",scale:2，delay:1});//scale为缩放比例的意思
以及今天的完整代码：
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

　　<head>

　　　　<title> New Document </title> <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;

　　　　　　background-color:blue;

　　　　　　top:300px;

　　　　　　left:50px;

　　　　}

　　　　</style>

　　　　<script type="text/javascript" src="greensock/plugins/CSSPlugin.min.js"></script>

　　　　<script type="text/javascript" src="greensock/TweenLite.min.js"></script>

　　　　</head>

　　<body>

　　　　<div id="rect"></div>

　　　　<script type="text/javascript">

　　　　　　TweenLite.to("#rect",1,{left:"500px"}); TweenLite.to("#rect",1,{top:"400px",scale:2,delay:1});

　　　　</script>

　　</body>

</html>
好啦，今天就先说到这吧，困了，修改天有空，有心情再断续！

GSAP JS基础教程--认识GSAP JS的更多相关文章

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

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

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

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

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

    今天来了解一下缓动easeing函数. 开始,如果你还没有GSAP的类包,可以到GreenSock的官网去下载最新版本的类包,或者直接点击这里​来下载 学习之前,先来准备一下:     <!DO ...

  4. js基础系列框架：JS重要知识点（转载）

    这里列出了一些JS重要知识点(不全面,但自己感觉很重要).彻底理解并掌握这些知识点,对于每个想要深入学习JS的朋友应该都是必须的. 讲解还是以示例代码搭配注释的形式,这里做个小目录: JS代码预解析原 ...

  5. js基础教程四之无缝滚动

    前面学习了相关js的一些基础知识,这节主要针对定时器作综合运用: 无缝滚动-基础 效果演示: *物体运动基础 *让div移动起来 *offsetLeft的作用 *用定时器让物体连续移动 <sty ...

  6. js模版引擎handlebars.js实用教程——为什么选择Handlebars.js

    返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...

  7. Node.js入门教程：Node.js如何安装配置并部署第一个网站

    前言:作为一个资深的前端开发人员,不懂的Node.js 那你绝对是不能跟别人说你是资深的前端程序猿滴! 今天洋哥就来和大家一起学习被大牛称之为前端必学的技能之一Node! 那么Node到底是什么呢? ...

  8. 二、JavaScript语言--JS基础--JavaScript进阶篇--JS基础语法

    1.变量 定义:从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服.玩具.水果...等. 命名:变量名字可以任 ...

  9. js基础知识温习：js中的对象

    在JavaScript中对象是一个无序属性的集合,其属性可以包含基本值.对象或者函数. 对象最简单的创建方式 JavaScript中创建对象最简单的方式就是创建一个Object对象的实例,然后再添加属 ...

随机推荐

  1. spinlock一边连逻辑一边连控制器

    本文来自:我爱研发网(52RD.com) - R&D大本营详细出处:http://www.52rd.com/Blog/Archive_Thread.asp?SID=7179 spinlock的 ...

  2. Playing FPS Games with Deep Reinforcement Learning

    论文不同点: (1)用两套网络分别实现移动和射击. (2)使用LSTM来处理不完全信息. 疑问: (1)为什么对于射击使用RNN,对导航却没有使用RNN.一般来说,当我们看见视野里面有敌人的时候,我们 ...

  3. 如何进行Java EE性能测试与调优

    性能测试的目标 性能测试不同于功能测试,不是对与错的检验,而是快与慢的衡量.在进行真正的性能测试之前要先搞清楚目标: 1. 在确定的硬件条件下,可以支持的并发数越大越好,响应时间越快越好.具体需要达到 ...

  4. 【转】【Html】Vuejs2.0学习之二（Render函数,createElement，vm.$slots，函数化组件，模板编译，JSX）

    1.Render函数 所以直接来到Render,本来也想跳过,发现后面的路由貌似跟它还有点关联.先来看看Render 1.1 官网一开始就看的挺懵的,不知道讲的是啥,动手试了一下,一开头讲的是Rend ...

  5. JDBC排序数据实例

    在本教程将演示如何在JDBC应用程序中,从数据库表中查询数据记录,在查询语句中将使用asc和desc关键字按升序或降序对记录进行排序.在执行以下示例之前,请确保您已经准备好以下操作: 具有数据库管理员 ...

  6. 利用CA私钥和证书创建中间CA

    本文借助实验环境下创建的root CA私钥和证书进一步创建中间CA.为了便于区分,我们将创建中间CA(intermediate CA)的CA称为根CA(root CA). 关于如何使用OpenSSL创 ...

  7. POI写docx文件table中的单元格水平、垂直对齐

    核心示例代码 垂直对齐 XWPFTableCell cell = table.getRow(i).getCell(j); cell.setVerticalAlignment(XWPFTableCell ...

  8. .net MVC 单页面 多个(行)数据修改

    一 /// <summary> /// 参数信息分页请求,前台要设置Form,这样可以当前页多值修改 /// </summary> /// <returns>< ...

  9. php模拟post提交请求与调用接口

    /** * 模拟post进行url请求 * @param string $url * @param string $param */ function request_post($url = '', ...

  10. 各大引擎矩阵的矩阵存储方式 ----行矩阵 or 列矩阵

    OpenGL  里面的矩阵 float  m[16]; OpenGL中的矩阵是这样的 m[0] m[4] m[8] m[12] m[1] m[5] m[9] m[13] m[2] m[6] m[10] ...