搭建了适合自己的前端自动流水线(gulp+browserSync+sass)
作者:admin 日期:2016-06-26 我打算做一个GSAP动画库的技术培训（长沙/有偿）
作者:admin 日期:2016-06-23
我打算做一个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小时
培训方式：
我来现场集中培训半天左右，可掌握这个库的最基础用法，并可长期在群里咨询问题。
GSAP官网上的示例动画集，经过学习，我也能制作了
作者:admin 日期:2016-06-16以下 GSAP官网上的示例动画集，经过学习，我也能制作这些SVG的遮罩、形变、路径类的动画，以设计师的创作提供更大的想象空间。
MorphSVGPlugin Examples
- Official MorphSVGPlugin Demo (at the top of this page) by Jack Doyle-----官方示例
- SVG Pencil Download by Chris Gannon----铅笔变箭头
- "!?" to GreenSock Logo by Chris Gannon----！？图形变成绿袜子小人
- Send Email Success/Failure by Chris Gannon---邮件发送成功后变成对钩
- Father & Son by Diaco--父亲和儿子的头像变换--烟雾动效
- Count Down & Count Up by Chris Gannon-----10的倒计时
- Life is Short by Chris Gannon----奶瓶变坟墓
- Bow & Arrow by Chris Gannon-----开弓放箭
- Simple Polyline Morphing by Jack---平板转五星转方块
- Happy/Sad Face (click the face) by Chris Gannon----哭脸和笑脸
- Bad Hair Day (click the face) by Chris Gannon-----电风吹把头发吹曲
- Flame by Sarah Drasner-----烛火摇曳
- Interchangeable Hipster by Sarah Drasner--胡子和眼镜变化
- Floating Duckie by Brad Larson----波浪上的鸭子
- Power of GSAP (lightening) by Diaco--电灯灯丝发光
- Animal Shapes by Carl Schooff-----动物形状变化
用SVG替代FLASH的三大要素-遮罩、路径动画、形变
作者:admin 日期:2016-06-13演示文件：http://blog.258754.cn/2016/svg/test_svg2.html
注意看运动轨迹与“老鹰”的交汇处的表现。
演示文件2：http://blog.258754.cn/2016/svg/test_svg3.html
主要看形变动画。
我的目标就是用Svg来替代以前的FLASH，那么遮罩、矢量路径动画、形变动画这几大要素，是不可缺的。在这个演示中，可以看到前两者的解决方法。
1、遮罩就用SVG自带的clipPath标签解决。（半透明遮罩没找到办法）
2、矢量路径动画相当于FLASH的引导线动画，我用了GSAP的pathDataToBezier插件将线条变为路径 ，然后用tweenMax来实现bezier路径运动。
3、至于形变动画，用了GSAP的morphSVG，见演示2的那个音乐线条的变化 。
至此，几个FLASH的重点功能，都已经由SVG完美实现。
