GSAP JS基础教程--认识GSAP JS
第一次写博文呢
,这次写博客是因为应一位同学的要求,写一下GSAP JS的一个小教程。为什么说小呢?因为它实际上就是小,只是一个入门级的小教程。如果你想问:“那你为什么不写详细一点呢?”,我想说,说.,说..,“因为我也不懂,哈哈
”,就是不懂,不骗你们,不懂就是不懂。那我那点英文水平肿么会懂呢?
<script type="text/javascript" src="你的类包的路径" ></script>
<!--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>
<div id="rect"></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;
}
duration:Number, vars:Object);
rect=document.getElementById_x_x_x_x_x("rect");
duration:Number, vars:Object);
p")等等)来代表,从而简化代码
TweenLite.to("#rect",1,{top:"400px",scale:2});//scale为缩放比例的意思
TweenLite.to("#rect",1,{left:"500px"});
TweenLite.to("#rect",1,{top:"400px",scale:2});//scale为缩放比例的意思
是为什么呢?因为我们的两号代码没有时间间隔,同时执行啦,解决办法是:为第二个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的更多相关文章
- GSAP JS基础教程--动画的控制及事件
好多天没有写无博文啦,今天无聊就再写一下! 今天要讲的是TweenLite的一些事件以及,TweenLite动画的控制,TweenMax类似,请自行参考官方文档:http://api.greensoc ...
- GSAP JS基础教程--TweenLite操作元素的相关属性
今天来学习用TweenLite操作元素的各种属性,以Div为例,其他元素的操作也是一样的,只是可能一些元素有它们的特殊属性,就可能不同罢了. 代码里用详细注释,我就不再重复啦,大家看代码就可以啦! ...
- GSAP JS基础教程--使用缓动函数
今天来了解一下缓动easeing函数. 开始,如果你还没有GSAP的类包,可以到GreenSock的官网去下载最新版本的类包,或者直接点击这里来下载 学习之前,先来准备一下: <!DO ...
- js基础系列框架:JS重要知识点(转载)
这里列出了一些JS重要知识点(不全面,但自己感觉很重要).彻底理解并掌握这些知识点,对于每个想要深入学习JS的朋友应该都是必须的. 讲解还是以示例代码搭配注释的形式,这里做个小目录: JS代码预解析原 ...
- js基础教程四之无缝滚动
前面学习了相关js的一些基础知识,这节主要针对定时器作综合运用: 无缝滚动-基础 效果演示: *物体运动基础 *让div移动起来 *offsetLeft的作用 *用定时器让物体连续移动 <sty ...
- js模版引擎handlebars.js实用教程——为什么选择Handlebars.js
返回目录 据小菜了解,对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是: ...
- Node.js入门教程:Node.js如何安装配置并部署第一个网站
前言:作为一个资深的前端开发人员,不懂的Node.js 那你绝对是不能跟别人说你是资深的前端程序猿滴! 今天洋哥就来和大家一起学习被大牛称之为前端必学的技能之一Node! 那么Node到底是什么呢? ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--JS基础语法
1.变量 定义:从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品可以是衣服.玩具.水果...等. 命名:变量名字可以任 ...
- js基础知识温习:js中的对象
在JavaScript中对象是一个无序属性的集合,其属性可以包含基本值.对象或者函数. 对象最简单的创建方式 JavaScript中创建对象最简单的方式就是创建一个Object对象的实例,然后再添加属 ...
随机推荐
- struts2+hibernate(分页实现)
//Dao类中实现了list集合和pagetotal方法 package zjf.strhib.Dao; import java.util.ArrayList; import java.util.Li ...
- SparkR(R on Spark)编程指南 含 dataframe操作
SparkR(R on Spark)编程指南 Spark 2015-06-09 28155 1评论 下载为PDF 为什么不允许复制 关注iteblog_hadoop公众号,并在这里评论区留言 ...
- animation过渡效果
References: http://developer.android.com/training/animation/index.html http://developer.android.com/ ...
- Android 软键盘弹出与关闭监听
private void listenerSoftInput() { final View activityRootView = findViewById(R.id.activityRoot); ac ...
- ndarray的数据类型
dtype参数 案例1: dtype(数据类型) 是一个特殊的对象,它含有ndarray , 将一块内存解释为特定数据类型所需的信息. 案例2: 利用astype 方法显式地转换其dtype 注意: ...
- (笔记)Linux下的静态库和动态库使用详解
库从本质上来说是一种可执行代码的二进制格式,可以被载入内存中执行.库分静态库和动态库两种. 一.静态库和动态库的区别 1. 静态函数库 这类库的名字一般是libxxx.a:利用静态函数库编译成的文件比 ...
- Android 8 声音调整过程
记录Android 8声音调整过程. frameworks\base\services\core\java\com\android\server\policy\PhoneWindowManager.j ...
- Eclipse初次java开发问题总结-4-Maven使用问题汇总
Non-resolvable parent POM [INFO] Scanning for projects... [ERROR] The build could not read 1 project ...
- Java如何处理空堆栈异常?
在Java编程中,如何处理空堆栈异常? 本例展示了如何使用Date类的System.currentTimeMillis()方法和Stack类的s.empty(),s.pop()方法来处理空堆栈异常. ...
- XML中二进制数据的处理方法
原文链接:http://www.west263.com/www/info/22308-1.htm 在xml中,所有的数据都是以文本的形式来显示,但是二进制数据不能直接以文本格式来表示,那xml又是怎么 ...