第一次写博文呢,这次写博客是因为应一位同学的要求,写一下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. struts2+hibernate(分页实现)

    //Dao类中实现了list集合和pagetotal方法 package zjf.strhib.Dao; import java.util.ArrayList; import java.util.Li ...

  2. SparkR(R on Spark)编程指南 含 dataframe操作

    SparkR(R on Spark)编程指南 Spark  2015-06-09 28155  1评论 下载为PDF    为什么不允许复制 关注iteblog_hadoop公众号,并在这里评论区留言 ...

  3. animation过渡效果

    References: http://developer.android.com/training/animation/index.html http://developer.android.com/ ...

  4. Android 软键盘弹出与关闭监听

    private void listenerSoftInput() { final View activityRootView = findViewById(R.id.activityRoot); ac ...

  5. ndarray的数据类型

    dtype参数 案例1: dtype(数据类型) 是一个特殊的对象,它含有ndarray , 将一块内存解释为特定数据类型所需的信息. 案例2:  利用astype 方法显式地转换其dtype 注意: ...

  6. (笔记)Linux下的静态库和动态库使用详解

    库从本质上来说是一种可执行代码的二进制格式,可以被载入内存中执行.库分静态库和动态库两种. 一.静态库和动态库的区别 1. 静态函数库 这类库的名字一般是libxxx.a:利用静态函数库编译成的文件比 ...

  7. Android 8 声音调整过程

    记录Android 8声音调整过程. frameworks\base\services\core\java\com\android\server\policy\PhoneWindowManager.j ...

  8. Eclipse初次java开发问题总结-4-Maven使用问题汇总

    Non-resolvable parent POM [INFO] Scanning for projects... [ERROR] The build could not read 1 project ...

  9. Java如何处理空堆栈异常?

    在Java编程中,如何处理空堆栈异常? 本例展示了如何使用Date类的System.currentTimeMillis()方法和Stack类的s.empty(),s.pop()方法来处理空堆栈异常. ...

  10. XML中二进制数据的处理方法

    原文链接:http://www.west263.com/www/info/22308-1.htm 在xml中,所有的数据都是以文本的形式来显示,但是二进制数据不能直接以文本格式来表示,那xml又是怎么 ...