GSAP学习笔记
GSAP(Green Sock Animation Platform)是一个十分好用的js动画库,据说是as的精简版
以下是学习GSAP的一些笔记:貌似中文的文档不是很多
GSAP notes:
tl.to(obj,2,{x:100,y:100}); //添加动画片段到时间轴
tl.to([obj1,obj2,obj3],2,{alpha:0.5,y:100}); //多个对象执行相同动画? 添加动画片段
tl.from(); "从"动画片段
tl.fromTo(); "从-到"动画片段
var tween = new TweenLite(myObject, 2, {x:100, y:200});//创建一个动画片段
or even:
var tween = TweenLite.to(myObject, 2, {x:100, y:200}); //返回一个动画片段并赋值给变量 供以后调用
TweenLite.to(obj,2,{x:100,y:100});//返回一个动画片段对象 但无保存它的引用
------------------------------------------------
TweenLite.to(mc, 1, {x:100});//无延时 会马上执行的动画片段。
TweenLite.to(mc, 1, {y:50, delay:1});//延时1秒执行该动画片段 动画播放1秒
TweenLite.to(mc, 1, {alpha:0, delay:2});//延时2秒执行该动画片段 ~~形成连续的动画序列
var tl = new TimelineLite(); //创建时间轴 时间轴用于动画片段的组织和管理
tl.add( TweenLite.to(mc, 1, {x:100}) ); //往时间轴添加动画片段。
tl.add( TweenLite.to(mc, 1, {y:50}) );
tl.add( TweenLite.to(mc, 1, {alpha:0}) );
//then later, control the whole thing...
tl.pause();
tl.resume();
tl.seek(1.5);
tl.reverse();
var tl = new TimelineLite();
tl.to(mc, 1, {x:100}).to(mc, 1, {y:50}).to(mc, 1, {alpha:0}); //简写 tl.add( TweenLite.to(mc, 1, {alpha:0}) );
//create the timeline with an onComplete callback that calls myFunction() when the timeline completes
var tl = new TimelineLite({onComplete:myFunction});
//add a tween
tl.add( new TweenLite(mc, 1, {x:200, y:100}) );
//add another tween at the end of the timeline (makes sequencing easy)
tl.add( new TweenLite(mc, 0.5, {alpha:0}) );
//append a tween using the convenience method (shorter syntax) and offset it by 0.5 seconds
tl.to(mc, 1, {rotation:30}, "+=0.5");
//reverse anytime
tl.reverse();
//Add a "spin" label 3-seconds into the timeline
tl.add("spin", 3);
//insert a rotation tween at the "spin" label (you could also define the insertion point as the time instead of a label)
tl.add( new TweenLite(mc, 2, {rotation:"360"}), "spin");
//go to the "spin" label and play the timeline from there
tl.play("spin");
//nest another TimelineLite inside your timeline...
var nested = new TimelineLite();
nested.to(mc2, 1, {x:200}));
tl.add(nested);
/* ------- add() --------*/
//add a tween to the end of the timeline
tl.add( TweenLite.to(mc, 2, {x:100}) );
//add a callback at 1.5 seconds
tl.add(func, 1.5);
//add a label 2 seconds after the end of the timeline (with a gap of 2 seconds)
tl.add("myLabel", "+=2");
//add another timeline at "myLabel"
tl.add(otherTimeline, "myLabel");
//add an array of tweens 2 seconds after "myLabel"
tl.add([tween1, tween2, tween3], "myLabel+=2");
//add an array of tweens so that they are sequenced one-after-the-other with 0.5 seconds inbetween them, starting 2 seconds after the end of the timeline
tl.add([tween1, tween2, tween3], "+=2", "sequence", 0.5);
============================================================================
tl = new TimelineLite();
tl.play();
tl.pause();
tl.resume();
tl.restart();
tl.reverse();
TweenLite.to(obj,2,{x:100,y:100}); //马上执行的动画片段
TweenLite.to(obj,2,{x:100,y:100, delay:2}); //延时2秒执行
TweenLite.to([obj1,obj2,obj3],3,{alpha:0.5,y:100}); //多个对象执行相同动画片段
TweenLite.from(); //参考to();
TweenLite.fromTo();//参考to();
var tween = new TweenLite(myObject, 2, {x:100, y:200}); //创建动画片段对象 并保存到变量中
or even:
var tween = TweenLite.to(myObject, 2, {x:100, y:200}); //执行动画片段 返回动画片段对象
TweenLite.to(obj, duration, oParams);
oParams={
cssProperty...
,delay:
,ease:
,easyParams:array
,onComplete:func
,onCompleteParams:array //[mc,"param2"] ["{self}","param2"]
,useFrames:true/false
,immediateRender:true/false //是否立即渲染动画片段
,onStart:func
,onStartParams:array
,onUpdate:func
,onUpdateParams:array
,onReverseComplete:func
,onReverseCompleteParams:array
,paused:true/false //不马上执行动画片段
,overWrite:string/integer none|all|auto|concurrent|allOnStart|
}
TweenPlugin.activate(); //TweenPlugin.activate([FrameLabelPlugin, ColorTransformPlugin, TintPlugin]);
TweenLite.to(mc, 2, {x:"-=20"}) //相对值
TweenLite.killTweensOf(myobject); //从对象上删除绑定的动画片段
You can kill all delayedCalls to a particular function using TweenLite.killDelayedCallsTo(myFunction); or TweenLite.killTweensOf(myFunction);
Tween对象的公共属性(继承的属性)
var tween = TweenLite.to(obj, 1, {x:100, delay:1});
tween.target / tween.vars / tween.timeline ...
data:
defaultEase
defaultOverwrite
target
ticker
timeline
vars
Tween对象的公共方法
var tween = TweenLite.to(obj, 1, {x:100, delay:1});
tween.set(obj, vars); //设置元素样式
TweenLite(target,duration,vars); //构造函数
tween.delay(3) /
delay(number); //延时执行动画
delayedCall(delay:number, callback:fn,params:array,useFrames:boolean); //静态方法 TweenLite.delayedCall(); 延时执行函数
duration(number); //获取或设置动画片段时长
eventCallback(eventType,callback,params); //获取或设置事件处理函数
from(obj,duration,vars); //静态方法
fromTo(obj,duration,vars); //静态方法
getTweensOf(target, onlyActive); //静态方法 返回tweens 数组
invalidate(); //清除初始化数据
isActive(); //是否活动的动画片段
GSAP学习笔记的更多相关文章
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
- PHP-会员登录与注册例子解析-学习笔记
1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...
- 2014年暑假c#学习笔记目录
2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...
- JAVA GUI编程学习笔记目录
2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML学习笔记
HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...
- DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记
今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...
随机推荐
- android项目 之 记事本(12) ----- 图片的等比例缩放及给图片加入边框
本文是自己学习所做笔记.欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 在Android的UI开发中常常会遇到图片的缩放,就比方记事本,如今的图片都比較 ...
- CF# 260 A. Laptops
One day Dima and Alex had an argument about the price and quality of laptops. Dima thinks that the m ...
- windows下搭建apache+php+mysql
在windows下,apache和mysql都有自动化安装的程序,本篇则侧重从apache和php版本选择,php线程安全,apache和mysql安装启动服务,工作环境配置这几个方面来阐述windo ...
- Java中Iterator(迭代器)的用法及其背后机制的探究
在Java中遍历List时会用到Java提供的Iterator,Iterator十分好用,原因是: 迭代器是一种设计模式,它是一个对象,它可以遍历并选择序列中的对象,而开发人员不需要了解该序列的底层结 ...
- ExtJS001HelloWorld弹窗
html页面 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...
- JavaSE复习日记 : 算是个小前言吧
/* * Java也学了好久了,抽个时间整理了一下课堂笔记,也有些是我刚开始学会犯的一些错误.在这里浅谈一下JavaSE的基础内容,对我来说也是一种不错的复习方式. * * 那好,对于初学者来说,学习 ...
- [LeetCode]题解(python):133-Clone Graph
题目来源: https://leetcode.com/problems/clone-graph/ 题意分析: 克隆一个无向图.每个节点包括一个数值和它的邻居. 题目思路: 直接深度拷贝. 代码(pyt ...
- HTML+CSS笔记 CSS进阶续集
元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...
- 整理网站优化(SEO)的方案
首先,我们来确定一下seo方案的定义是什么,所谓seo方案是指针对于某个网站,在完成了解熟悉的情况下,结合自身的一套seo优化方法来制定完成符合这个网站seo推广思路和策略.接下来就了解一下新手seo ...
- Aone新拉分支
1.进入Aone新建项目 2.测试人员填huyangjun和husong 3.进入后拉分支 4.弄个日常普通环境 5.吧环境跑起,绑定Host就可以