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对象的实例,然后再添加属 ...
随机推荐
- js json处理 双引号
在数据传输流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象 JSON字符串: var str1 = '{ "name": "cxh", ...
- ASP.NET CORE 开发路线
.NET CORE 开发路线图,时刻提醒自己
- 将Web项目War包部署到Tomcat服务器
1. 配置Java运行环境 1.1 下载并安装JDK 从官网上下载最新的JDK:http://java.sun.com/javase/downloads/index.jsp ,下载后安装,选择想把JD ...
- Qt Creator设置多核编译(-j8参数)
In the qtcreator go to the "Projects tab" and set "Make arguments" as you like: ...
- Axure RP Pro 7.0 注册码
用户名:aaa注册码:h624pifAqt7It5e8boKkML+Y4RjDX5xknP4k7QktJYQoxsvv7VUS7hBCv/2ef45P
- Spring系列-JDBC实例
前言:spring沾过一点点,但细节不了解,实例能力也不行,决定从头学起吧. 没有理论,只有实例代码,理论自行百度多的很的很 帖一下项目整体架构: 1.数据库建表 CREATE TABLE `cust ...
- 推荐一个不错的关于Excel数据统计分析的公众号
- (笔记)linux 进程和线程的区别
进程:进程是程序执行时的一个实例,即它是程序已经执行到课中程度的数据结构的汇集.从内核的观点看,进程的目的就是担当分配系统资源(CPU时间.内存等)的基本单位. 线程:线程是进程的一个执行流,是CPU ...
- MySQL存储过程、触发器 小例子
一.存储过程 语法: CREATE PROCEDURE([[IN |OUT |INOUT ] 参数名 数据类形...]) BEGIN ... END 参数: IN 输入参数 表示该参数的值必须在调用存 ...
- c#中的对象生命周期
无论是指类型的变量或是类类型的变量,其存储单元都是在栈中分配的,唯一不同的是类类型的变量实际上存储的是该类对象的指针,相当于vc6中的CType*,只是在.net平台的语言中将指针的概念屏蔽掉了.我们 ...