<![CDATA[湖南长沙前端开发与培训-通途工作室 - greenSock]]> http://www.contactu.cn/ zh-cn PBlog2 v2.4 <![CDATA[湖南长沙前端开发与培训-通途工作室 - greenSock]]> http://www.contactu.cn/images/logos.gif http://www.contactu.cn/ 湖南长沙前端开发与培训-通途工作室 http://www.contactu.cn/article.asp?id=207 <![CDATA[湖南长沙前端开发与培训-通途工作室 - greenSock]]> dudu@258754.cn(admin) Thu,23 Jun 2016 14:17:47 +0800 http://www.contactu.cn/default.asp?id=207

 

我打算做一个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小时
 
培训方式:
我来现场集中培训半天左右,可掌握这个库的最基础用法,并可长期在群里咨询问题。
]]>
http://www.contactu.cn/article.asp?id=203 <![CDATA[湖南长沙前端开发与培训-通途工作室 - greenSock]]> dudu@258754.cn(admin) Sun,15 May 2016 10:03:00 +0800 http://www.contactu.cn/default.asp?id=203  我刚花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或邮件咨询。
 
]]>
http://www.contactu.cn/article.asp?id=169 <![CDATA[湖南长沙前端开发与培训-通途工作室 - greenSock]]> dudu@258754.cn(admin) Fri,30 Jan 2015 13:37:42 +0800 http://www.contactu.cn/default.asp?id=169
 
谁能写出更短代码?
 
完整案例在此:

 
本次为豪爵做的一个项目中用到的,第一轮,用setinterval,写了近百行代码,代码多了搞得我逻辑混乱,循环快了的话,还有BUG。
 
接下来优化,用了TimelineMax+循环,将对象一个个压入数组,再用时间线展示,逻辑清楚了,代码还是不够精简。
 
最后,想到staggerTo这个用法,居然成功!滚动部分的核心代码,只有8句.....如果去掉2句JQ的变量定义,就只有6句了,真是巧夺天工。
 
Javascript代码
  1. $list=$(".sx li");      //定义对象序列  
  2.     var tw=TweenMax.staggerTo(  $list, 0.2, {scale:1.5,yoyo:true,repeat:1} ,0.08);  
  3.     tl.add(tw);     //所有对象循环第1轮动画  
  4.   
  5.     var tw=TweenMax.staggerTo(  $list, 0.2, {scale:1.5,yoyo:true,repeat:1} ,0.08);  
  6.     tl.add(tw);     //所有对象循环第2轮动画  
  7.   
  8.     // 左侧的对象动画  
  9.     $left_objs=$(".sx li:lt("+ (bingo+1) +")" );  
  10.     var tw=TweenMax.staggerTo(  $left_objs, 0.2, {scale:1.5,yoyo:true,repeat:1} ,0.08);  
  11.     tl.add(tw);  
 

GSAP库对这种时间线控制很巧妙。它用TweenMax.staggerTo做为子时间线,再用TimelineMax(我代码中tl就是一个TimelineMax对象)做为“总导演”,来组合所有的时间线。
 
至于什么repeat、yoyo回环、完成后带参数发送事件(onComplete/onCompleteParams),更是应有之技巧,不再多言。
 
 

 

]]>
http://www.contactu.cn/article.asp?id=163 <![CDATA[湖南长沙前端开发与培训-通途工作室 - greenSock]]> dudu@258754.cn(admin) Tue,30 Dec 2014 11:32:55 +0800 http://www.contactu.cn/default.asp?id=163  昨天群友发出一个网站中有一个导航条出场效果,挺有味道。于是花了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>  

 

]]>
http://www.contactu.cn/article.asp?id=156 <![CDATA[湖南长沙前端开发与培训-通途工作室 - greenSock]]> dudu@258754.cn(admin) Tue,05 Aug 2014 10:18:40 +0800 http://www.contactu.cn/default.asp?id=156 昨天一个网站项目的实际需求:当点击“购买”按钮后,当前货物“飞向”侧边的购物车。设计要求,飞行轨迹必须是一条“曲线”。

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

配置信息:

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

]]>
http://www.contactu.cn/article.asp?id=149 <![CDATA[湖南长沙前端开发与培训-通途工作室 - greenSock]]> dudu@258754.cn(admin) Wed,05 Mar 2014 18:30:02 +0800 http://www.contactu.cn/default.asp?id=149  昨天在http://browser.qq.com/mac/看到了一个很酷的光环环绕效果。查了下代码,他是用CSS3的animation做的。我对那个不太熟,今天试着用TweenMax模拟了一下,效果类似。支持IE9及现代浏览器。

 
请点击:http://contactu.cn/2014/r/
]]>
http://www.contactu.cn/article.asp?id=143 <![CDATA[湖南长沙前端开发与培训-通途工作室 - greenSock]]> dudu@258754.cn(admin) Mon,18 Nov 2013 08:09:15 +0800 http://www.contactu.cn/default.asp?id=143  我觉得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

 

]]>
http://www.contactu.cn/article.asp?id=142 <![CDATA[湖南长沙前端开发与培训-通途工作室 - greenSock]]> dudu@258754.cn(admin) Mon,28 Oct 2013 22:18:38 +0800 http://www.contactu.cn/default.asp?id=142  今天试着用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});    

 

成了!很方便!

 

 

]]>
http://www.contactu.cn/article.asp?id=133 <![CDATA[湖南长沙前端开发与培训-通途工作室 - greenSock]]> dudu@258754.cn(admin) Thu,11 Jul 2013 21:08:30 +0800 http://www.contactu.cn/default.asp?id=133 com.greensock.plugins是greensock库中,与tweenLite/TweenMax等tween类搭配使用的组合功能。虽然号称是插件,但是功能真的很强。有小而精练的功能,也有象运动模拟这样的的大块头功能,这些都需要使用者慢慢的探索。这里只列出了自己常常使用的一些,让大家能少读几行英文。

具体的使用方法、语法、如何包含库等,可以阅读原文示例:http://www.greensock.com/as/docs/tween/com/greensock/plugins/package-detail.html

这里还有一个更形象的的动画演示及代码生成器:http://www.greensock.com/as/swf/PluginExplorer-v11.swf

另外,JS版本的plugins库也已经有了,文档在这里:http://api.greensock.com/js/,相比AS来说,只能说太弱太弱了。可以想见,基于JS的动画开发,还在远远的追赶之中。

plugins名称 我的描述 原英文描述(英文好的请自行对照)
常用,当缓动alpha到零值时,将visible自动置为false不可见状态。

Tweening "autoAlpha" is exactly the same as tweening an object's "alpha" except that it ensures that the object's "visible" property is true until autoAlpha reaches zero at which point it will toggle the "visible" property to false.

BevelFilterPlugin
不常用,浮雕边滤镜功能。

Tweens a BevelFilter.

BezierPlugin
不常用,但功能强大,可以拟合贝塞尔曲线路径。

Bezier tweening allows you to tween in a non-linear way.

BezierThroughPlugin
不常用,贝塞尔曲线路径相关。

Identical to bezier except that instead of defining bezier control point values, you define points through which the bezier values should move.

BlurFilterPlugin
常用,模糊效果全靠它了。

 

Tweens a BlurFilter.

CacheAsBitmapPlugin
没用过。

Forces the cacheAsBitmap property of a DisplayObject to be a certain value (true or false) during the tween and then sets it back to whatever it was before the tween was rendered for the first time.

CirclePath2DPlugin
 
Tweens an object along a CirclePath2D motion path in any direction (clockwise, counter-clockwise, or shortest).
ColorMatrixFilterPlugin
 
ColorMatrixFilter tweening offers an easy way to tween a DisplayObject's saturation, hue, contrast, brightness, and colorization.
ColorTransformPlugin
很常用,尤其在做一些变色效果时,比如鼠标点上去变色、变高亮等--鼠标移开后又恢复原状等。

 

Ever wanted to tween ColorTransform properties of a DisplayObject to do advanced effects like overexposing, altering the brightness or setting the percent/amount of tint? or maybe tween individual ColorTransform properties like redMultiplier, redOffset, blueMultiplier, blueOffset, etc.

DropShadowFilterPlugin
常用,阴影滤镜,跟发光略有区别。

Tweens a DropShadowFilter.

DynamicPropsPlugin
 
If you'd like to tween something to a destination value that may change at any time, DynamicPropsPlugin allows you to simply associate a function with a property so that every time the tween is rendered, it calls that function to get the new destination value for the associated property.
EndArrayPlugin
 
Tweens numbers in an Array.
EndVectorPlugin
 
Tweens numbers in an Vector.<Number>.
FrameBackwardPlugin
小功能,向前N帧。

Tweens a MovieClip backward to a particular frame number, wrapping it if/when it reaches the beginning of the timeline.

FrameForwardPlugin
小功能,向后N帧。

Tweens a MovieClip forward to a particular frame number, wrapping it if/when it reaches the end of the timeline.

FrameLabelPlugin
居家必备之常用功能,缓动到指定的帧标签。

Tweens a MovieClip to a particular frame label.

FramePlugin
缓动到指定帧(用帧数字表示的)。

Tweens a MovieClip to a particular frame number.

GlowFilterPlugin
居家必备功能,发光滤镜值的缓动控制。

Tweens a GlowFilter.

HexColorsPlugin
 
Although hex colors are technically numbers, if you try to tween them conventionally, you'll notice that they don't tween smoothly.
LiquidPositionPlugin

很少用的功能,要跟LiquidStage相结合的一个功能。

LiquidStage本来就是GS会员才有的功能,一般人都不会用。LiquidStage介绍参见拙作:http://www.contactu.cn/article.asp?id=60

If you're using LiquidStage and you'd like to tween a DisplayObject to coordinates that are relative to a particular PinPoint (like the CENTER) whose position may change at any time,LiquidPositionPlugin makes it easy by dynamically updating the destination values accordingly.

MotionBlurPlugin
高级货-运动模糊插件,可以在运动时按运行方向产生模糊效果,做一些求逼真的效果,非常有用!但这是个会员才拥有的功能,好吧,反正我是会员。

MotionBlurPlugin provides an easy way to apply a directional blur to a DisplayObject based on its velocity and angle of movement in 2D (x/y).

Physics2DPlugin
高级货,会员功能,能产生逼真的运动学效果,看示意图就知道了。

Provides simple physics functionality for tweening a DisplayObject's x and y coordinates based on a combination of velocity, angle, gravity, acceleration, accelerationAngle, and/or friction.

PhysicsPropsPlugin
 
Sometimes you want to tween a property (or several) but you don't have a specific end value in mind - instead, you'd rather describe the movement in terms of physics concepts, like velocity, acceleration, and/or friction.
QuaternionsPlugin
 
Performs SLERP interpolation between 2 Quaternions.
RemoveTintPlugin
常用,移除加色效果,加色效果就是下面的TintPlugin

Removes the tint of a DisplayObject over time.

RoundPropsPlugin
 
If you'd like the inbetween values in a tween to always get rounded to the nearest integer, use the roundProps special property.
ScalePlugin
小功能,让scaleX和scaleY同时变化。

ScalePlugin combines scaleX and scaleY into one "scale" property.

ScrollRectPlugin
小功能,让方块形状进行x/y/宽/高的同时变化。

Tweens the scrollRect property of a DisplayObject.

SetActualSizePlugin
没看太懂,似乎是让一些组件类恢复到原来的形状,不常用。

Some components require resizing with setActualSize() instead of standard tweens of width/height in order to scale properly.

SetSizePlugin
小功能。让宽和高同时变化。

Some components require resizing with setSize() instead of standard tweens of width/height in order to scale properly.

ShortRotationPlugin
不太常用但很有用的功能--沿短边旋转:当进行旋转时,会如果大于180度,会沿较小角度的那边旋转过去(反向)。

To tween any rotation property of the target object in the shortest direction, use "shortRotation" For example, if myObject.rotation is currently 170 degrees and you want to tween it to -170 degrees, a normal rotation tween would travel a total of 340 degrees in the counter-clockwise direction, but if you use shortRotation, it would travel 20 degrees in the clockwise direction instead.

SoundTransformPlugin
跟声音相关的,可以缓动一切跟声音相关的属性,音量、声道平衡、左转右等。

Tweens properties of an object's soundTransform property (like the volume, pan, leftToRight, etc.

StageQualityPlugin
对画面质量的一个缓动,没啥大用。

Sets the stage's quality to a particular value during a tween and another value after the tween which can be useful for improving rendering performance in the Flash Player while things are animating.

ThrowPropsPlugin
 
ThrowPropsPlugin allows you to simply define an initial velocity for a property (or multiple properties) as well as optional maximum and/or minimum end values and then it will calculate the appropriate landing position and plot a smooth course based on the easing equation you define (Quad.easeOut by default, as set in TweenLite).
TintPlugin
非常常用,向目标色缓动变色。比ColorTransformPlugin要简单,适用于简单的变色功能。

To change a DisplayObject's tint/color, set this to the hex value of the tint you'd like to end up at (or begin at if you're using TweenMax.from()).

TransformAroundCenterPlugin
常用!好用!以MC中心点进行旋转。

Normally, all transformations (scale, rotation, and position) are based on the DisplayObject's registration point (most often its upper left corner), but TransformAroundCenter allows you to make the 2D transformations occur around the DisplayObject's center.

TransformAroundPointPlugin
牛!用你指定的点进行旋转。

Normally, all transformations (scale, rotation, and position) are based on the DisplayObject's registration point (most often its upper left corner), but TransformAroundPoint allows you to define ANY point around which 2D transformations will occur during the tween.

TransformMatrixPlugin
 
TransformMatrixPlugin allows you to tween a DisplayObject's transform.matrix values directly (a, b, c, d, tx, and ty) or use common properties like x, y, scaleX, scaleY, skewX, skewY, rotation and even shortRotation.
TweenPlugin
这个不能直接用,是所有插件类的基类。

TweenPlugin is the base class for all TweenLite/TweenMax plugins.

VisiblePlugin
小功能,在任何缓动过程的终点,让MC不可见。

Toggles the visibility at the end of a tween.

VolumePlugin
跟音量相关的缓动,妈呀,总算写完了。

Tweens the volume of an object with a soundTransform property (MovieClip/SoundChannel/NetStream, etc.).

]]>
http://www.contactu.cn/article.asp?id=132 <![CDATA[湖南长沙前端开发与培训-通途工作室 - greenSock]]> dudu@258754.cn(admin) Mon,08 Jul 2013 09:52:08 +0800 http://www.contactu.cn/default.asp?id=132  GSAP-JS是完全由GSAP平台的AS版本进化出来的,针对HTML平台的JS动画。根据我目前的学习进度,感觉到它已经把很多常用的动画结构,用简练的语法进行了包含。这方面,比使用原生JS或是JQ,有更大的优势。

这里有一个由原站下载的范例包,可以供大家起步学习,我就举一个小例子:

 

我们要做这样一个由N个小图标从上方飘下的动画,HTML结构是这样的:

XML/HTML代码
  1. <div id="logosWrapper">  
  2.       <div class="logo"></div>  
  3.       <div class="logo"></div>  
  4.       <div class="logo"></div>  
  5.       <div class="logo"></div>  
  6.       <div class="logo"></div>  
  7.       <div class="logo"></div>  
  8.       <div class="logo"></div>  
  9.       <div class="logo"></div>  
  10.       <div class="logo"></div>  
  11.       <div class="logo"></div>  
  12. </div>  

 

用 GSAP-JS实现,实际上只有2句代码:

XML/HTML代码
  1. logos = $(".logo"),     //jq定义,将图标们定义为一个组  
  2. .staggerFrom(logos, 0.6, {css:{top:-60, left:"-=50px", rotation:"-90deg"}, ease:Back.easeOut}, 0.1)     //按0.1秒的时间间隔,将logos中所有子元素,从左上方旋转-90度飞入,飞行时长为0.6秒  

非常高效吧,不用自己写循环!不用写定时器!不用去做CSS的具体定义!

完整代码见我附件包中的:16_timelinelite_labels.html这个例子

 

 

]]>