前端开发,技术培训,动效研究,求职信息

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

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

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

 

谁能写出更短代码？

 

完整案例在此：

http://blog.258754.cn/2015/staggerTo/test_timeline_staggerTo.html

查看更多...

 昨天群友发出一个网站中有一个导航条出场效果，挺有味道。于是花了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写，会写上一大版。

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

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

配置信息：

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

 我觉得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

 

查看更多...

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

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

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

成了！很方便！

查看更多...

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

查看更多...

Tags: greensock_pluginsgreensock_plugins

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

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

查看更多...

Tags: GSAP-JSGSAP-JS

今天收到来自于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://blog.258754.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、是否方便在你们的网站某处，提及我的博客的链接（blog.258754.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会员资格

查看更多...

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

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

源码如下：

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

代码和注释如下：

Tags: TweenMaxTweenMax 计时器计时器