快速开始：GSAP和AN2017

      AN2017有一个最大的改变，如何在你的项目中加载像GSAP的外部库类。下面的视频就是给我们解释如何快速启动和运行。不过你需要对AN 和GSAP 的api有一定的了解。

 

     视频地址：https://youtu.be/Dq1_MI2gHuM

 

 

添加GASP到你的AN 项目中

      添加外部的脚本，然后再全局中可以访问，下面是具体的操作方法

 

安全的EaselJS动画属性

      动画的HTML5“导出画布”渲染在运行中的物体是用到EaselJS库。动画中的每个对象转化成EaselJS对象，我们要知道那些属性可以制作动画。举个例子，它不支持width，height，或者3D旋转（rotationX，rotationY）。下面有很多可以用到的属性：

• x
• y
• alpha
• scaleX
• scaleY
• rotation
• skewX
• skewY
• regX
• regY

      因为GSAP的核心是给任何JavaScriptd对象制作动画，上面的属性是公平的游戏。你甚至不需要加载其它额外插件。

      要想了解上面的属性的更多信息你需要于都EaselJS显示对象的文档。

      尽管它对一些人很明显，但值得说的是CSS属性的CSSPlugin是典型的处理color，fontSize，border，transformOrigin等，EaselJS中不存在。

      一旦你了解这些属性，你就可以制作动画，你就可以使用GSAP核心工具，然后使用相同的语法。

 

var tl = new TimelineMax({repeat:3, repeatDelay:0.5})

tl.from(this.logo_mc, 1, {y:300, rotation:360, scaleX:0, scaleY:0, ease:Back.easeOut})
  .from(this.GreenSock_mc, 0.5, {x:200, skewX:45, alpha:0}, "+=0.5");

 

EaselPlugin的颜色属性动画

         使用GSAP的EaselPlugin来渐变特殊属性的EaselJS-related的物体如饱和度（saturation）、对比度（contrast）、色彩（tint），着色（colorize）、亮度（brightness）、曝光（exposure）、色调（hue），利用EaselJS的ColorFilter和ColorMatrixFilter。

 

//necessary to cache element before applying filters
this.city.cache(0, 0, 800, 532); //left, top, width, height

var tl = new TimelineMax({repeat:3, yoyo:true});

tl.from(this.city, 1, {easel:{exposure:3}})
  .to(this.city, 1, {easel:{hue:180}})
  .to(this.city, 1, {easel:{colorFilter:{redMultiplier:0.5, blueMultiplier:0.8, greenOffset:100}}});

 

         要下载EaselPlugin文件，除了TweenMax，如果你想利用EaselPlugin的特殊功能。EaselPlugin在你下载GSAP的文件内或者你可以直接从下载CDNJS 。确保你从EaselPlugin文档中阅读更多信息。

源文件下载地址。

 文章出处：https://greensock.com/GSAP-Animate-CC-2017

 （我只是想告诉留个笔记，也希望能帮到需要的人，所以翻译出来）；去年没用这个功能，如果需要设置公用的js，使用修改发布配置。