今天来学习用TweenLite操作元素的各种属性，以Div为例，其他元素的操作也是一样的，只是可能一些元素有它们的特殊属性，就可能不同罢了。

 
代码里用详细注释，我就不再重复啦，大家看代码就可以啦！
 
注：要一条条撤销注释看效果哦！！！！！！！！！！
 
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title>GSAP JS基础教程--TweenLite操作元素的相关属性</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 src="../greensock/easing/EasePack.min.js" type="text/javascript"></script>

  <script type="text/javascript">

  window.onload=init;

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

  function init(){

//第一部分：操作div的二维相关属性:

//位置操作：CSS的(left top margin) 和 GSAP里的(x y) 和 js里的(offsetLeft offsetHeight)

//left和top是相对网页或元素的父类的位置来计算的坐标，而x,y则是相对元素起始位置来计算的坐标，即元素的起始位置的x,y的值为(0,0)

TweenLite.to("#rect",1,{left:500,top:200,ease:Back.easeOut});

//TweenLite.to("#rect",1,{x:300,y:50,ease:Back.easeOut});

//注意GSAP里margin-left padding-left等属性的写法要写成marginLeft paddingLeft，即不要“-”，接在“-”后的单词的首字母要大写

//padding不算是位置的操作，但为了方便，还是和margin写在一起吧

//TweenLite.to("#rect",1,{marginLeft:100,paddingTop:10,ease:Back.easeOut});

//大小操作scaleX scaleY scale width height

//注意:虽然scale（缩放比例）和width height都可以让元素放大，但是，scale会元素内的内容也一起放大，而width height只是把容器放大啦，里面的内容不大小不变

//TweenLite.to("#rect",1,{scaleX:2,scale:1.5,ease:Back.easeOut});

//TweenLite.to("#rect",1,{scale:2,ease:Back.easeOut});

//TweenLite.to("#rect",1,{width:200,height:200,ease:Back.easeOut});

//变换(transform)操作:

//其实刚才说的rotation scale x y都属于变换的操作，这里说另外的两个变换（rotation(旋转) skew（倾斜））

//TweenLite.to("#rect",1,{rotation:45,ease:Back.easeOut});

//TweenLite.to("#rect",1,{skewX:30,ease:Back.easeOut});

//TweenLite.to("#rect",1,{skewY:-30,ease:Back.easeOut});

//第二部分，其他非二维属性操作

//如果你以为GSAP只能用来移动、放大缩小一些东西来做一些小动画，那你就大错特错啦！

//来看一下下面的相关属性的操作

//边框的操作，因为前面我们用css定义的方块（rect）是没有边框的，所以我们先来设置一下它的边框，方法如下

//TweenLite.set("#rect",{border:"solid 1px #000"});//其他的属性也可以使用TweenLite.set来设置

//TweenLite.to("#rect",1,{borderWidth:10,ease:Back.easeOut});

//TweenLite.to("#rect",2,{backgroundColor:"#FF00FF",ease:Back.easeOut});//背景色

//TweenLite.to("#rect",2,{color:"#FFF",ease:Back.easeOut});//字体颜色

//TweenLite.to("#rect",1,{fontSize:24,ease:Back.easeOut});//字体大小

//行高也是可以设置的,这个一定要使用单位，不然会发生错误

//TweenLite.to("#rect",1,{lineHeight:"50px",ease:Back.easeOut});

//TweenLite.to("#rect",1,{opacity:0.5,ease:Back.easeOut});//透明度(兼容所有主流浏览器，包括IE6);

//既然说到opacity，就是一下另一个调整元素透明度的属性autoAlpha(GSAP里的，CSS里没有)。当元素的透明度为0时，它会自动把元素的display属性值设置为0，即把元素隐藏

//TweenLite.to("#rect",1,{autoAlpha:0,ease:Back.easeOut});

//第二部分就说到这里，说得不怎 么全面，也不可能说得全面，我也是小白一个，只是把学习笔记记录下来了罢了，没说到的，就请同学们自己动手尝试一下啦！如果，你在使用一个属性，学得不需 要缓动或渐变时，TweenLite依然是很有用的，你只需要使用TweenLite.set方法，就可以快速设置一个元素的多个属性，例如：

//TweenLite.set("#rect",{width:"400px",height:"400px",position:"static",margin:"0 auto"});

//第三部分，三维属性操作（rotationX rotationY rotationZ z等等,不懂这几个属性的意思的同学请百度）

//并不是所有的浏览器都支持CSS3的3D属性，可以到以下网址(http://caniuse.com/transforms3d)查看都有哪些浏览器支持3D属性

//也就是说使用之前你应该：

//设置元素的父元素的perspactive的值，

//TweenLite.set("body",{perspactive:500});

//或设置元素自身的transformPerspactive的值

//TweenLite.set("#rect",{transformPerspacity:500});

//再或者，就直接设置CSS的默认transformPerspactive的值

//CSSPlugin.defaultTransformPerspactve=500;

//好吧，我们来试一下↓

//TweenLite.to("#rect",1,{rotationX:30,ease:Back.easeOut});

//TweenLite.to("#rect",1,{rotationY:100,ease:Back.easeOut});

//TweenLite.to("#rect",1,{rotationZ:45,ease:Back.easeOut});

  }

  </script>

 </head>

 <body>

  <!--我们用一个div来模拟一个小方块-->

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

 </body>

</html>

GSAP JS基础教程--TweenLite操作元素的相关属性的更多相关文章

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

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

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

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

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

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

  4. js基础之DOM中元素对象的属性方法

    在 HTML DOM (文档对象模型)中,每个部分都是节点. 节点是DOM结构中最基本的组成单元,每一个HTML标签都是DOM结构的节点. 文档是一个    文档节点 . 所有的HTML元素都是    ...

  5. Xamarin.FormsShell基础教程（9）Shell相关类体系

    Xamarin.FormsShell基础教程(9)Shell相关类体系 在Shell中,最为主要的类是Shell类.Shell类实现了大多数应用程序所需的基本UI功能的页面.除此以外,常用的类还有Sh ...

  6. 【2017-03-28】JS基础、DOM操作

    一.JS基础 1.javascript功能 ⑴进行数据运算 ⑵控制浏览器功能 ⑶控制元素的属性.样式.内容 2.javascript位置和格式 可以放在html页的任意位置,也可以创建一个以js结尾的 ...

  7. js基础总结01 --操作DOM

    1.选择对象 通过id来选择绑定一个dom节点 :document.getElementById('p1'): 通过类名来绑定一个类数组的对象集合,:document.getElementsByCla ...

  8. [Selenium With C#基础教程] Lesson-02 Web元素定位

    作者:Surpassme 来源:http://www.jianshu.com/p/cfd4ed1daabd 声明:本文为原创文章,如需转载请在文章页面明显位置给出原文链接,谢谢. 使用Selenium ...

  9. 用JQuery操作元素的style属性

    可以直接利用css()方法获取元素的样式属性,JQuery代码如下: 1 $("p").css("color");  //获取p元素的样式颜色 无论color属 ...

随机推荐

  1. js学习（一）-动态添加、修改、删除对象的属性和方法

    //-----------------------js代码--------------------------- function class1(){ } //-------------------- ...

  2. Ogre GpuProgram分析

    和前面讲解的Compositor一样,GpuProgram也对应一种资源文件,意思我们可以直接写一个文件来完成,不需要了解相关的类. 但是就和winform一样,直接拖控件能完成大部分工作,假如如果需 ...

  3. logbook日志系统

    python中替代logging的日志系统. 不过比之前的logging难理解. 先上打印到屏幕上的代码和存到日志文件中的代码: #!/usr/bin/env python3 # -*- coding ...

  4. vs2015配置mysql数据库时，mysql.data、mysql.data.entity、EntityFramework的安装错误问题

    vs2015连接mysql数据库常见问题 最近在vs2015用asp.net开发一个网站,要连接mysql数据库,于是百度了一下相关配置的文章,有好几篇文章说了相关步骤,但是我装的时候还是遇到了问题, ...

  5. AFNetWorking能做什么

    AFNetwork是一个轻量级的网络请求api类库.是以NSURLConnection, NSOperation和其它方法为基础的. 以下这个样例是用来处理json请求的: NSURL *url = ...

  6. FastFel解析一个公式的步骤

    FastFel 查看源码后,理解的运算步骤: 1) 创建一个 FelEngine,FelEngine fel = new FelEngineIml(); 2) 将表达式 exp 解析成为一个节点树 F ...

  7. Springmvc 的post请求的json格式参数

    背景: 这两天在项目中遇到了一个问题.我的环境是springmvc4.1.9,写了几个可以用ajax请求的接口(ajax.jsonp 调用正常).突然一时兴起就用 HTTP 请求的工具(比如火狐浏览器 ...

  8. iOS7以上: 实现如“日历”的 NavigationBar

    第一步,隐藏导航栏底部的分割线 如何隐藏导航栏底部的分割线(shadow image/ hairline)? navigationBar.clipsToBounds = YES; //隐藏 navig ...

  9. JAVA构造方法与方法是啥意思，方法重载方法覆盖俗谈

    构造函数跟构造方法是一样的,只是称呼不同; C语言里叫函数,Java里叫方法. 成员方法必须有返回类型即使是没有返回,也要写上void 构造方法没有返回类型,而且和类名一样!一个类里面,一看就知道了譬 ...

  10. EJB里的问题解答

    1.什么是EJB? EJB即Enterprise JavaBean是JavaEE应用的业务层技术标准,以这项技术开发的组件叫做EJB组件. EJB架构师一个用于开发和部署基于组件的分布式业务应用的组件 ...