分类: greenSock预览模式: 普通 | 列表

 

我打算做一个GSAP动画库的技术培训,有这方面需要的朋友,可以Q我:258754 。

培训这套神器的入门知识。并可长期在群里咨询问题。人均200元以内,限15人,半天或1天时间 ,大家能接受否?场地我尽量找赞助,其它费用自理。 时间暂未定,集中大家意见。

简介:
GSAP是前端动画领域的最强神器!早在FLASH时期,就已经是AS编程首选的动作库。进入H5时代以来,它全面转型,为HTML页面提供JS动画的强劲支持---用大白话讲,就是用它可以搞定一切HTML动画,可完整替代FLASH。做为世界级成熟产品,他各项性能指标完美,教程齐备。具体数据可以查看它的官网:http://greensock.com。里面提供了它与各种原生动画、JQUERY等主流动画库的比较数据。
 
培训必要性:
GSAP只有英文教程!因此很多朋友觉得有语言门槛。
另外因为它的产品体系太大(不同的产品、插件、函数、参数),很多人搞不清具体的对应关系。
一些复杂度较高用法,必须要积累一点的实战经验。
 
关于我:
我从FLASH时代起,就开始学习这个库,并翻译多篇文字及教程,发表在天地会及个人博客上。
我购买了官方99美元的年度会员,因此拥有所有收费插件。
站内所有例子,基本上我都有过研究,并在多个项目中使用。
 
我预想的课程体系
 
课程 描述 时间
GSAP产品体系
这个工具是做什么用的
如何查阅官网学习
整个体系概述,产品、插件、函数、参数的关系--快速串讲
如何部署
40分钟
TweenMax/lite系列 较易掌握的单线动画体系,基本能实现常用动画功能---相当于一个或数个演员 60分钟
TimelineMax/lite系列 复杂动画、多时间线---相当于很多演员的整剧  60分钟
SVG插件
概述众多插件功能
SVG基础知识、遮罩
详讲MorphSVGPlugin(相当于FLASH形变动画)、DrawSVGPlugin(相当于描线动画)、BezierPlugin(相当于FLASH引导线路径动画)
60分钟
其它有价值的工具 Draggable、SplitText等 20分钟
集中答疑 学习者讲出自己心目中的动画形式,老师拆分为公式,并讲解动画思路 60分钟
 
总时间:5小时
 
培训方式:
我来现场集中培训半天左右,可掌握这个库的最基础用法,并可长期在群里咨询问题。
分类:greenSock | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 850

 我刚花646元人民币(99美元)购买了一个greesnsock(绿袜子) ShockinglyGreen帐号,得到MorphSVGPlugin等收费SVG插件包。------别找了,网上没有免费的。GSAP(HTML)以及AS3版本的所有收费插件,均包含在内。

 
很方便制作:矢量路径动画(沿复杂曲线开动的火车)、矢量变形动画(猫头 秒变 狗头)、旗帜飘扬、复杂的飞字等,
详细演示地址:http://greensock.com/club/(可能要翻墙)
 
以上动画都是完全基于HTML/svg/tweenmax,效果流畅,类似FLASH。
我是greensock(GSAP/TweenMax/TweenLite)的资深用户,也是天地会的老会员,目前GS平台产品的中文资料,很多都是来自我的推荐和翻译(天地会、本人博客contactu.cn)。
 
有需要分享的朋友,我开价200元人民币每套。技术方面问题,欢迎咨询本人。本人QQ 258754,接受QQ或邮件咨询。
 
分类:greenSock | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 811

生肖抽奖动画示例-TimelineMax/staggerTo

 
谁能写出更短代码?
 

查看更多...

分类:greenSock | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 3176

 昨天群友发出一个网站中有一个导航条出场效果,挺有味道。于是花了2小时模仿成功,我作品在此:

http://258754.com/m/zgl/TweenMax_3D_transform.HTML

 

原站在此:http://cswzs.csjinmaohui.com///?nsukey=r1DXSmigepQZpFjQItTf9pGeJpxXjmi5G9oWsiOr85FYnOU5yWXU4Idy48Cy79MIFo934MArZBDCRHDMCXezpA%3D%3D

GSAP范例在此:http://greensock.com/css3/

----------------------------------------------------------------

不查不知道,原来GSAP有如此强大的CSS动画功能,尤其是对于仿3D变换的支持。只是GS官网上的文章虽多,但源码较少,辗转stackoverflow.com找到一些相应的源码。

我个人比较喜欢GSAP来替代CSS动画,GS官网上说是GSAP的时间轴TWEEN类动画,无论是从代码效率还是代码简练度上,都远超CSS动画。至少后者是属实的。这6句代码,如果有用CSS写,会写上一大版。

Javascript代码
  1. <script src="js/jquery.min.js"></script>  
  2. <script src="js/TweenMax.min.js"></script>  
  3.   
  4. <script>  
  5. TweenMax.fromTo($(".a2"), .3, {scale:.5,alpha:0}, {scale:1,alpha:1});  
  6. TweenMax.fromTo($(".a1"), 2, {rotationY:-90}, {rotationY:0,transformOrigin:"right center",transformPerspective:500,ease:Elastic.easeOut,delay:0.3});  
  7. TweenMax.fromTo($(".a3"), 2, {rotationY:90}, {rotationY:0,transformOrigin:"left center",transformPerspective:500,ease:Elastic.easeOut,delay:0.3});  
  8.   
  9. TweenMax.fromTo($(".a4"), 2, {rotationX:-90}, {rotationX:0,transformOrigin:"center 0% 00px",transformPerspective:500,ease:Elastic.easeOut,delay:0.9});  
  10. TweenMax.fromTo($(".a5"), 2, {rotationX:-90}, {rotationX:0,transformOrigin:"center 0% 00px",transformPerspective:500,ease:Elastic.easeOut,delay:1.1});  
  11. TweenMax.fromTo($(".a6"), 2, {rotationX:-90}, {rotationX:0,transformOrigin:"center 0% 00px",transformPerspective:500,ease:Elastic.easeOut,delay:1.2});  
  12. </script>  

 

分类:greenSock | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1789

昨天一个网站项目的实际需求:当点击“购买”按钮后,当前货物“飞向”侧边的购物车。设计要求,飞行轨迹必须是一条“曲线”。

----------------------------------------------------

配置信息:

BezierPlugin插件可以很好的解决这个问题。这是greensock.com提供的GreenSock Animation Platform (GSAP)库的一个插件,位置在:com.greensock.plugins,我测试使用的JS有:

<script src="http://cdn.bootcss.com/gsap/1.9.7/TweenMax.min.js"></script>

<script src="http://cdn.bootcss.com/gsap/1.9.7/easing/EasePack.min.js"></script>

<script src="http://cdn.bootcss.com/gsap/1.9.7/plugins/BezierPlugin.min.js"></script>

TweenMax-tween核心库

EasePack-缓动库,如果没有特别缓动,可不加载

BezierPlugin-贝塞尔曲线库,必须

----------------------------------------------------

拟合输出曲线时代码示例--可用于绘制曲线,要结合canvas等绘制引擎:

//输入input:

var beziers = BezierPlugin.bezierThrough([{x:0, y:0}, {x:250, y:400}, {x:500, y:0}]);

//输出output:

{

x:[{a:0, b:0, c:125, d:250}, {a:250, b:375, c:500, d:500}],

y:[{a:0, b:0, c:400, d:400}, {a:400, b:400, c:0, d:0}]

}

--------------------------------------------------------

曲线运动示例----结合TweenMax可直接产生曲线运动

//起点坐标不用放到代码中,以下三个点分别是第2点,第3点及终点

TweenMax.to(document.getElementById("myp"), 5, {bezier:[{left:100, top:250}, {left:300, top:0}, {left:500, top:400}], ease:Power1.easeInOut});

-------------------------------------------------------------------------------------

本插件还有更丰富的功能调用,比如随曲线调整角度、旋转、可拟合除了坐标之外的任何值(比如透明度、角度),详细说明如下(英文):

http://api.greensock.com/js/com/greensock/plugins/BezierPlugin.html

分类:greenSock | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 5334

TweenMax+CSS3仿3d光环旋转特效

 昨天在http://browser.qq.com/mac/看到了一个很酷的光环环绕效果。查了下代码,他是用CSS3的animation做的。我对那个不太熟,今天试着用TweenMax模拟了一下,效果类似。支持IE9及现代浏览器。

 
分类:greenSock | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1974

Greensock尚无开发LiquidStage for js的进度

 我觉得JS网站开发非常需要的东西,所以邮件咨询了他们一下:

 

 

carl:

目前我正在学习js平台的动画开发。

我想知道,greensock是否有计划开发“JS框架下的”LiquidStage以及TransformAroundPointPlugin。我觉得很多网站开发者会需要这些。

 


 今天一早收到回复:

 

Hi,

 

We've had a few requests and we are thinking about it. Currently we are not actively developing these tools as we have a number of other priorities for the platform.

 

Thanks for your support and interest.

 

Best,

 

Carl

 

查看更多...

分类:greenSock | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2622

用tweenMax定义跨浏览器的alpha透明度

 今天试着用jquery写了个表达式:

Javascript代码
  1. $(".content").css({  
  2.   
  3.         'alpha':0,  
  4.   
  5.         });  

结果发现在chrome中无法改变透明度。查了一下资料,发现chrome只支持这样的写法:

Javascript代码
  1. opacity:0;  

有时候真懒得去分辨这些不同浏览器的语法,想起tweenMax号称跨浏览器的性能,于是试验了一下:

Javascript代码
  1. TweenMax.to($(".content"),0, {alpha:0});    

 

成了!很方便!

查看更多...

分类:greenSock | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1977

greensock_plugins常用功能中文简介

 com.greensock.plugins是greensock库中,与tweenLite/TweenMax等tween类搭配使用的组合功能。虽然号称是插件,但是功能真的很强。有小而精练的功能,也有象运动模拟这样的的大块头功能,这些都需要使用者慢慢的探索。这里只列出了自己常常使用的一些,让大家能少读几行英文...

查看更多...

Tags: greensock_plugins

分类:greenSock | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 8858

 GSAP-JS是完全由GSAP平台的AS版本进化出来的,针对HTML平台的JS动画。根据我目前的学习进度,感觉到它已经把很多常用的动画结构,用简练的语法进行了包含。这方面,比使用原生JS或是JQ,有更大的优势。

这里有一个由原站下载的范例包,可以供大家起步学习...

查看更多...

Tags: GSAP-JS

分类:greenSock | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3055

今天收到来自于gs的邮件回复,本人获得greensock赠送的"Shockingly Green"收费帐号,作为在中国为他们传播产品知识的小小鼓励。

我的邮件原文:

 

来自于中国的greensock产品推广建议

 

你好greensock.

 

我是一名来自中国的flash-AS3开发者,38岁。大概在三年前开始使用你们的产品,我非常喜欢。因此我仔细的阅读了API说明文档(API Documentation),并试用了几乎所有的产品,包括tweenmax,timelinemax,layout,loading,plugins等。目前我已经开始试用你们的GSAP-JS产品。

 

中国现在有近14亿人口,但AS开发水平总体还比较低--JS编程也一样。事实上,GS平台(除了tweenlite以外的部分),被中国开发者所知甚少。另外,中文开发者的英文水平普遍不高,greensock.com上很好的教程和文档,不容易被他们读懂。

 

在中国,虽然有一些人仍然习惯于“免费”,但是对好的产品的付费程度,越来越高。如果能有比较多的中文教程及合适的价格,我想GS会从中国市场得到大量的付费用户。

-----------------------------------------------------------

 

出于对你们产品的喜爱,我在自己的博客和中国国内一些主要开发者论坛上,撰写了不少关于greensock产品的文章。通过google或是中国最大的搜索引擎baidu.com(占有国内70%以上的搜索份额)可以查询到,在中国话覆盖的网站上,很多关于GS的文章来自于我的写作。

 

我主要在这些网站上写作:

我的博客上关于GS的栏目:http://contactu.cn/default.asp?cateID=11

中国国内最大的as/flash/air开发者论坛:www.9ria.com

另一个国内开发者论坛的FLASH版块:http://bbs.blueidea.com/forum-4-1.html

 

我一些文章的链接:

http://bbs.9ria.com/thread-95958-1-1.html

http://bbs.9ria.com/thread-71580-1-1.html

http://bbs.9ria.com/thread-101888-1-1.html

http://bbs.9ria.com/thread-103248-1-1.html

http://bbs.9ria.com/thread-106400-1-1.html

http://bbs.9ria.com/thread-106138-1-1.html

 

--------------------------------------------------------------

 

我想得到如下帮助:

 

1、能否提供一个“Club GreenSock members”资格?以方便我节省资金,更方便的了解GS的产品线。

2、是否方便在你们的网站某处,提及我的博客的链接(www.contactu.cn),以进一步提升我网站的权威度及搜索引擎排名。

3、期待你能提供更好的合作方式。

 

谢谢。期待你的回复。

dudu

 


gs回复:

 

Hi Du,

 

Jack forwarded me your kind email. We are very grateful for your efforts to bring GreenSock knowledge to the Chinese.

We love seeing our users take the initiative to help others.

 

As a token of our appreciation you have been awarded you a Shockingly Green Club GreenSock Membership. Your account has already been upgraded, just log in to your account page https://www.greensock.com/account/  and grab all the bonus plugins and tools. I have a feeling you will really love SplitTextfield.

 

As for linking to your articles, right now the best thing would be to just post in our forums (which have very high Google page rank).

We have a dedicated thread for GSAP Javascript tutorials which gets a good deal of attention:

http://forums.greensock.com/topic/7281-tutorials/

 

We are launching a new site sometime soon, perhaps as interest grows we can explore more ways of working with you and more of our non-English speaking global audience.

 

Please keep in touch. Enjoy the Shockingly Green Goodies. Thanks again for helping spread the word.

 

Carl

 

Tags: greensock会员资格

分类:greenSock | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4614
分类:greenSock | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2735

鼠标点上去快速变幻的图片

按客户要求,将动画改了另外一种形式,

其中top是上层那个带了不动文字的对象,cont是下方放所有轮转图片的容器。

源码如下:

Javascript代码
  1. package  
  2. {   
  3.        
  4.     import flash.display.DisplayObject;   
  5.     import flash.display.MovieClip;   
  6.     import flash.display.MovieClip;   
  7.     import com.greensock.TweenMax;   
  8.     import flash.events.MouseEvent;   
  9.        
  10.     public class pics extends MovieClip   
  11.     {   
  12.         var mt:TweenMax;   
  13.            
  14.         public function pics()   
  15.         {   
  16.             //TweenMax带上repeat:-1(无限循环)来做计时器用,每0.05秒触发一次roll函数       
  17.             mt=TweenMax.to(this, 0.05, { repeat: -1, onRepeat: roll,paused:true } );   
  18.             top.addEventListener(MouseEvent.MOUSE_OVER, overH);   
  19.             top.addEventListener(MouseEvent.MOUSE_OUT, outH);   
  20.         }   
  21.            
  22.         function overH(e:MouseEvent) {   
  23.             mt.resume();   
  24.         }   
  25.            
  26.         function outH(e:MouseEvent) {   
  27.             mt.pause();   
  28.         }   
  29.                
  30.                
  31.         function roll()   
  32.         {   
  33.             var currentMc:DisplayObject = cont.getChildAt(0);   
  34.             cont.setChildIndex(currentMc, cont.numChildren - 1);   
  35.         }   
  36.     }   
  37.   
  38. }  

 

分类:greenSock | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2996

这个轮转动画是用于网站内页的,比较精练,所有图片都包含在swf中,没做外部载入。

 

代码和注释如下:

Javascript代码
  1. package {   
  2.        
  3.     import flash.display.DisplayObject;   
  4.     import flash.display.MovieClip;   
  5.     import flash.display.MovieClip;   
  6.     import com.greensock.TweenMax;   
  7.        
  8.     public class pics extends MovieClip {   
  9.         public function pics () {   
  10.             //我习惯用TweenMax带上repeat:-1(无限循环)来做计时器用,下面这句代码的意思是,最开始计时延时1秒后,每3秒触发一次roll函数   
  11.             TweenMax.to(this,3, {delay:1,repeat:-1,onRepeat:roll});    
  12.         }   
  13.            
  14.         function roll() {   
  15.             var currentMc:DisplayObject = getChildAt(0) ;   
  16.             setChildIndex(currentMc, numChildren - 1);   
  17.             TweenMax.from(currentMc,1, {alpha:0});   
  18.         }   
  19.     }   
  20.   
  21. }   

 

Tags: TweenMax 计时器

分类:greenSock | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3188