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学习笔记的更多相关文章

  1. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  2. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  3. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  4. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  5. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  6. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. HTML学习笔记

    HTML学习笔记 2016年12月15日整理 Chapter1 URL(scheme://host.domain:port/path/filename) scheme: 定义因特网服务的类型,常见的为 ...

  9. DirectX Graphics Infrastructure(DXGI):最佳范例 学习笔记

    今天要学习的这篇文章写的算是比较早的了,大概在DX11时代就写好了,当时龙书11版看得很潦草,并没有注意这篇文章,现在看12,觉得是跳不过去的一篇文章,地址如下: https://msdn.micro ...

随机推荐

  1. android项目 之 记事本(12) ----- 图片的等比例缩放及给图片加入边框

    本文是自己学习所做笔记.欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 在Android的UI开发中常常会遇到图片的缩放,就比方记事本,如今的图片都比較 ...

  2. CF# 260 A. Laptops

    One day Dima and Alex had an argument about the price and quality of laptops. Dima thinks that the m ...

  3. windows下搭建apache+php+mysql

    在windows下,apache和mysql都有自动化安装的程序,本篇则侧重从apache和php版本选择,php线程安全,apache和mysql安装启动服务,工作环境配置这几个方面来阐述windo ...

  4. Java中Iterator(迭代器)的用法及其背后机制的探究

    在Java中遍历List时会用到Java提供的Iterator,Iterator十分好用,原因是: 迭代器是一种设计模式,它是一个对象,它可以遍历并选择序列中的对象,而开发人员不需要了解该序列的底层结 ...

  5. ExtJS001HelloWorld弹窗

    html页面 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...

  6. JavaSE复习日记 : 算是个小前言吧

    /* * Java也学了好久了,抽个时间整理了一下课堂笔记,也有些是我刚开始学会犯的一些错误.在这里浅谈一下JavaSE的基础内容,对我来说也是一种不错的复习方式. * * 那好,对于初学者来说,学习 ...

  7. [LeetCode]题解(python):133-Clone Graph

    题目来源: https://leetcode.com/problems/clone-graph/ 题意分析: 克隆一个无向图.每个节点包括一个数值和它的邻居. 题目思路: 直接深度拷贝. 代码(pyt ...

  8. HTML+CSS笔记 CSS进阶续集

    元素分类 在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1&g ...

  9. 整理网站优化(SEO)的方案

    首先,我们来确定一下seo方案的定义是什么,所谓seo方案是指针对于某个网站,在完成了解熟悉的情况下,结合自身的一套seo优化方法来制定完成符合这个网站seo推广思路和策略.接下来就了解一下新手seo ...

  10. Aone新拉分支

    1.进入Aone新建项目 2.测试人员填huyangjun和husong 3.进入后拉分支 4.弄个日常普通环境 5.吧环境跑起,绑定Host就可以