update greensockbook file

.gitignore

@@ -1,37 +1,2 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules
-jspm_packages
-
-# Optional npm cache directory
-.npm
-
-# Optional REPL history
-.node_repl_history
+# 本地预览目录不上传
+_book

GreenSockAdvanced/3dtransform.md

@@ -0,0 +1,28 @@
+# 3D效果
+
+在平时的动效开发中，为了是动效具有立体的效果，一般会用到CSS3中的3D transform这一属性。在GreenSock中也提供了3D transform功能，支持CSS3D的全部属性，使用起来比CSS3好用多了。
+
+下面来看看它的一些使用方法。
+
+开始之前首先要理解greensock中的 perspective 和 transformPerspective 两个属性。它们是greensock中运行的基础，因为是它们才能使元素具有一个3D空间透视的表现能力。
+
+下面是分别使用transformPerspective和没用transformPerspective的实例：
+
+<p data-height="300" data-theme-id="17491" data-slug-hash="NxyvPb" data-default-tab="result" data-user="janily" data-embed-version="2" data-pen-title="NxyvPb" class="codepen">See the Pen <a href="http://codepen.io/janily/pen/NxyvPb/">NxyvPb</a> by janily (<a href="http://codepen.io/janily">@janily</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
+
+可以明显看到，第三个元素由于没有使用perspective属性，只是一个平面的旋转效果。
+
+transformPerspective是针对单个元素使用的，而perspective则是使用在父级元素上，使用它会使改父级元素下的子元素具有3D空间透视的一个展现形式，实例如下所示：
+
+<p data-height="300" data-theme-id="17491" data-slug-hash="EPQvPd" data-default-tab="result" data-user="janily" data-embed-version="2" data-pen-title="EPQvPd" class="codepen">See the Pen <a href="http://codepen.io/janily/pen/EPQvPd/">EPQvPd</a> by janily (<a href="http://codepen.io/janily">@janily</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
+
+可以看到，只需要在父级使用perspective的方法，可以同时使它的子元素都具有3D的展现。
+
+### transformOrigin
+
+transformOrigin是用来设置元素在做transform位移变换时的原点的。默认值是元素的中心点即("50%,50%")。transformOrigin有三个值(x,y,z)，z值是一个可选项。
+
+可以使用"top", "left", "right",或者是"bottom"值亦或是百分值(比如bottom right可以设置为 "100% 100%)。
+

GreenSockAdvanced/README.md

@@ -0,0 +1,4 @@
+# GreenSock进阶
+
+这一部分主要是介绍GreenSock的一些进阶的使用方法。
+

GreenSockBasic/README.md

@@ -0,0 +1,13 @@
+# GreenSock简介
+
+这一部分主要是介绍GreenSock的一个基本的使用方法。
+
+开始之前先来了解下GSAP动画平台四个插件的不同功能。如下图所示：
+
+![](http://i3.tietuku.com/6f5c0e8054dc8d27.png)
+
+这里我们引入的是TweenMax这个全功能的js文件，它包括了GreenSock动画平台的所有核心的功能。
+
+下面就开始GreenSock之旅吧。
+
+

GreenSockBasic/animate.md

@@ -0,0 +1,110 @@
+# 动画
+
+### TweenLite.to()方法
+
+下面就是让它动起来，可以使用TweenLite.to()方法来使元素动起来。比如，让元素移动到浏览器左边的边缘，我们就可以使用TweenLite.to()方法。
+
+![](http://ww1.sinaimg.cn/large/0060lm7Tgw1f9952txmfcj30hc04zwer.jpg)
+
+在codepen中加入下面的代码：
+
+
+```
+TweenLite.to($box, 0.7, {left: 0});
+```
+上面的代码会在0.7秒之内把$box元素从CSS中定义的位置移动到body的边缘。如下所示(**点击右下角的return按钮，可以重新运行代码观看效果**)：
+
+<p data-height="300" data-theme-id="17491" data-slug-hash="meypPB" data-default-tab="css,result" data-user="janily" data-embed-version="2" data-pen-title="meypPB" class="codepen">See the Pen <a href="http://codepen.io/janily/pen/meypPB/">meypPB</a> by janily (<a href="http://codepen.io/janily">@janily</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
+
+如果没看到效果，可以把鼠标移动到右下角会出现一个return按钮，点击以下就可以重新运行代码，就可以看到效果了。
+
+不过，你应该发现了一个奇怪的小问题。那就是$box元素只有一半露出来了，应该是全部显示的，这是为什么呢？
+
+这是因为我们在CSS中定义了**transform: translate(–50%, –50%)**，这个时候就可以来定义元素的X的值。
+
+> 在GreenSock中，一些CSS属性对应到GreenSock中还是有些不同的。比如transform中translate在GreenSock中使用**x,y**就对应着translate(x,y)。任何的CSS属性需要从有－的写法变为驼峰式的写法。比如background-color修改为backgroundColor等。以及CSS中的transform:rotate()变为rotation。
+
+这个时候我们可以使用TweenLite来定义translate中的x值，如下所示：
+
+
+```
+TweenLite.to($box, 0.7, {left: 0, x: 0});
+```
+
+### TweenLite.from方法
+
+**TweenLite.from**顾名思义，就是使元素从指定的属性的值运动到元素的初始值。还是以上一个demo为例子，修改代码如下：
+
+
+```
+TweenLite.from($box, 2, {x: '-=200px', autoAlpha: 0});
+```
+
+上面的代码是用来使元素从定义在.from()方法里的位置运动到在CSS中定义的位置。
+
+运行这个例子，我们会看到元素从元素左边200px的位置运动到元素在CSS中定义的位置。
+
+autoAlpha方法是GSAP中一个特别的属性，它把opacity和visibility两个属性合二为一了。
+
+![](http://ww3.sinaimg.cn/large/0060lm7Tgw1f995fy9pdfj30hc090jrw.jpg)
+
+在代码中autoAlpha: 0表示它会把元素初始化为opacity:0;visibility:hidden。当执行动画效果的时候它会把visibility的值设置为inherit以及opacity值设置为1。从而产生一个渐现的效果。
+
+运行下面的demo就可以看到效果：
+
+<p data-height="300" data-theme-id="17491" data-slug-hash="LRKYoe" data-default-tab="js,result" data-user="janily" data-embed-version="2" data-pen-title="LRKYoe" class="codepen">See the Pen <a href="http://codepen.io/janily/pen/LRKYoe/">LRKYoe</a> by janily (<a href="http://codepen.io/janily">@janily</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
+
+### TweenLite.set()
+
+有时候，我们只是想设置元素的一些CSS属性并不需要动画效果，比如，重设元素的位置。
+
+这个时候就可以使用GreenSock提供的.set()方法。
+
+去掉我们前面编写的代码除了定义好的$box变量，编写下面的代码：
+
+```
+TweenLite.set($box, {x: '-=200px', scale: 0.3});
+TweenLite.set($box, {x: '+=100px', scale: 0.6, delay: 1});
+TweenLite.set($box, {x: '-50%', scale: 1, delay: 2});
+```
+运行上面的代码，可以看到元素只是单纯的在改变属性并没有动画效果。
+
+<p data-height="300" data-theme-id="17491" data-slug-hash="ZbYvJE" data-default-tab="js,result" data-user="janily" data-embed-version="2" data-pen-title="ZbYvJE" class="codepen">See the Pen <a href="http://codepen.io/janily/pen/ZbYvJE/">ZbYvJE</a> by janily (<a href="http://codepen.io/janily">@janily</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
+
+在上面的代码中，前面两个动画序列我们定义了x属性相对的补间值。
+
+第一个序列把$box元素从CSS中的位置移动到元素左边的200px的位置，然后在第二序列中把元素的位置移动到100px的位置，最后移动到-50%的绝对的补间值。跟默认在CSS中定义的位置一样。
+
+### TweenLite.fromTo()方法
+
+最后来说一说TweenLite.fromTo这个方法。
+
+顾名思义，这个方法我们可以定义元素的起始位置：
+
+
+```
+TweenLite.fromTo($box, 2, {x: '-=200px'}, {x: 150});
+```
+
+把上面的代码放入到codepen中，就可以看到运行的动画效果。
+
+<p data-height="300" data-theme-id="17491" data-slug-hash="bwPGXP" data-default-tab="js,result" data-user="janily" data-embed-version="2" data-pen-title="bwPGXP" class="codepen">See the Pen <a href="http://codepen.io/janily/pen/bwPGXP/">bwPGXP</a> by janily (<a href="http://codepen.io/janily">@janily</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
+
+我们定义了元素从左边200px的位置开始运动到指定的位置。
+
+x:150会覆盖在CSS中定义的transform: translate(–50%, –50%)的样式，用新的transform: matrix(1, 0, 0, 1, 150, -50);样式来代替。
+
+接下来，可以给元素加一些缓动曲线，使之更符合真实的物体运动效果。GreenSock也提供了各种的运动曲线，来使动画效果更加自然。
+
+请看下一节。
+
+
+
+
+
+
+

GreenSockBasic/callfunction.md

@@ -0,0 +1,53 @@
+# 回调方法
+
+这里以.fromTo()方法来说明回调的使用用法。
+
+比如，我们想要在动画开始的时候来触发回调函数。首先来创建一个start的函数：
+
+
+```
+function start(){
+  console.log('start');
+}
+```
+
+触发回调函数，只需要添加这句代码就可以了onStart:start就可以了，非常简单吧。
+
+
+```
+TweenLite.fromTo($box, 2, {y: '-=200px'}, {y: 100, ease: Bounce.easeOut,onStart:start});
+```
+
+打开开发者工具，就可以看到输出的相关信息。
+
+你也可以添加onUpdate和onComplete来触发对应的回调函数：
+
+```
+function start(){
+  console.log('start');
+}
+function update(){
+  console.log('animating');
+}
+function complete(){
+  console.log('end');
+}
+```
+
+<p data-height="300" data-theme-id="17491" data-slug-hash="wzLBPa" data-default-tab="js,result" data-user="janily" data-embed-version="2" data-pen-title="wzLBPa" class="codepen">See the Pen <a href="http://codepen.io/janily/pen/wzLBPa/">wzLBPa</a> by janily (<a href="http://codepen.io/janily">@janily</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
+
+如下图所示，可以看到在每一个阶段都执行了指定的回调方法。
+
+![](http://ww2.sinaimg.cn/large/0060lm7Tgw1f998q07951j308q025glh.jpg)
+
+OK，到目前为止，我们的动画都是针对单个元素的运动。在实际开发中有时候需要多个元素一起运动，只是运动的属性的值不同而已，比如像下面这样的动画：
+
+![](http://ww1.sinaimg.cn/large/0060lm7Tgw1f99982ulhug30hq0crt9w.gif)
+
+这就是下一章节要讲的。
+
+
+
+
+

GreenSockBasic/control.md

@@ -0,0 +1,32 @@
+# 动画控制
+
+GreenSock提供了play()，pause()，resume()，reverse()，seek()，restart()， progress()，timeScale()等方法来控制动画。下面来看看这些方法都具体起到了什么作用。
+
+play()方法是开始播放动画；
+
+pause()是暂停动画；
+
+resume()是重新开始播放动画，是从暂停处开始播放；
+
+reverse()是从相反的方向来执行动画；
+
+seek()是跳转到整个动画时间的某一个时间点的时地状态，比如整个动画时间是3秒，如果调用**seek(1)**就表示跳转到动画在1秒这个时间点的状态；
+
+progress()是指执行整个动画到某一个时间段，只接收0到1之间的数字。比如给到参数0，表示在动画开始的时候；给到参数0.5表示动画直接跳转到整个动画执行来50%的状态；1就表示动画执行完的状态；
+
+restart()表示重新开始播放动画。
+
+说了这么多，还是直接看实例来理解更快些，点击对应的按钮：
+
+<p data-height="300" data-theme-id="17491" data-slug-hash="edwvGR" data-default-tab="result" data-user="janily" data-embed-version="2" data-pen-title="edwvGR" class="codepen">See the Pen <a href="http://codepen.io/janily/pen/edwvGR/">edwvGR</a> by janily (<a href="http://codepen.io/janily">@janily</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
+
+GreenSock基本的知识就介绍到这了，利用这些方法基本上可以对付开发中一些常见的动画开发，剩下的就要看你的想象力了。
+
+当然GreenSock提供能力远不止于此，这一部分会在后面的GreenSock进阶部分讲到，敬请期待。
+
+
+
+
+
+

GreenSockBasic/easing.md

@@ -0,0 +1,26 @@
+# 缓动曲线
+
+TweenMax提供了下面这些运动曲线：
+
+1、Back 2、SlowMo 3、StppedEase 4、RoughEase 5、Bounce 6、Circ 7、Elastic 8、Expo 9、Sine
+
+具体曲线运动效果，可以去[这个地址](http://greensock.com/ease-visualizer)看看：
+
+![](http://ww4.sinaimg.cn/large/0060lm7Tgw1f997n29r9vg30nj0l6n5p.gif)
+
+下面我们添加一个bounce曲线，看看实际效果(点击右下角的return按钮查看效果)：
+
+```
+TweenLite.fromTo($box, 2, {x: '-=200px'}, {x: 150, ease: Bounce.easeOut});
+```
+
+<p data-height="300" data-theme-id="17491" data-slug-hash="JRQoNv" data-default-tab="js,result" data-user="janily" data-embed-version="2" data-pen-title="JRQoNv" class="codepen">See the Pen <a href="http://codepen.io/janily/pen/JRQoNv/">JRQoNv</a> by janily (<a href="http://codepen.io/janily">@janily</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
+
+可以看到，加了曲线之后，动画有了一个弹动的效果。
+
+在实际开发中，开发动画效果一般都会在动画过程中做一些其它的操作，这个时候就要用到回调函数了。TweenMax提供了在动画各个阶段的回调方法，使用起来非常方便。
+
+请看下一章节。
+
+

GreenSockBasic/multiple.md

@@ -0,0 +1,43 @@
+# 多个元素运动
+
+### staggered()方法
+
+在实际开发中我们需要使用它来同时运行多个元素执行同一个动画效果的时候，有什么方法呢？
+
+也许可以使用**TimelineLite.to()方法**一个一个的来执行。这样虽然可以达到目的，但是不够优雅。greensock给我们提供了staggered()这一方法来实现，先来看看staggerFrom这个方法的语法：
+
+
+```
+TweenMax.staggerFrom( targets:Array, duration:Number, vars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* ) :
+```
+TweenMax.staggerFrom(targets:目标元素为一个数组,duration:动画执行时间,vars:动画的属性，比如位移、放大缩小以及延迟等,stagger:表示目标数组中的每一个对象动画延迟执行的时间,onCompleteAll:所有的序列动画完成后的回调方法,onCompleteAllParams:传参数给onCompleteAll方法)。
+
+当然这个staggerFrom方法需要使用TweenMax来调用。我们来看GreenSock官方网站的一个实例：
+
+<p data-height="300" data-theme-id="17491" data-slug-hash="vXqEPo" data-default-tab="js,result" data-user="janily" data-embed-version="2" data-pen-title="vXqEPo" class="codepen">See the Pen <a href="http://codepen.io/janily/pen/vXqEPo/">vXqEPo</a> by janily (<a href="http://codepen.io/janily">@janily</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
+
+从代码可以看到，使用stagger()方法可以同时操作多个元素来产生动画效果，仅仅只需要一句代码方便好使。
+
+### staggerFrom()方法使用高级技巧circle
+
+像上面的例子，我们只能一次赋予一个属性一个值，如x:100, rotation:90。如果我们想一次性让元素的属性能随机的随指定的值来运动，就可以使用到taggerFrom()方法中的circle来达到目的，如下实例所示：
+
+<p data-height="395" data-theme-id="17491" data-slug-hash="bEarQM" data-default-tab="result" data-user="janily" data-embed-version="2" data-pen-title="bEarQM" class="codepen">See the Pen <a href="http://codepen.io/janily/pen/bEarQM/">bEarQM</a> by janily (<a href="http://codepen.io/janily">@janily</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
+
+在上面的代码中，使用了**cycle**这个属性来达到这一目的。
+
+```
+ cycle:{
+    x:[-100,100], 
+    ｝
+```
+
+我们在**cycle**中定义了一个数组赋予给X(即transform中的translateX),在实际代码运行中，stagger()会依次从数组中取值赋予给元素，不断的循环。这在执行多个对象的动画的时候非常方便。
+
+下一章节将来介绍GreenSock中很强大的链式动画。
+
+
+
+

GreenSockBasic/select.md

@@ -0,0 +1,34 @@
+# 选择元素
+
+### 代码约定
+
+为了方便演示代码，这里统一使用**codepen**这个在线的代码编辑平台来进行demo演示。
+
+这里我们引入的是TweenMax这个全功能的js文件，它包括了GreenSock动画平台的所有核心的功能。
+
+为了方便选择DOM元素我们还需要引入jquery来选择和操作DOM。
+
+### 开始
+
+首先我们准备了一个基本的html和css骨架，如下所示：
+
+<p data-height="300" data-theme-id="17491" data-slug-hash="xwbpGw" data-default-tab="result" data-user="janily" data-embed-version="2" data-pen-title="xwbpGw" class="codepen">See the Pen <a href="http://codepen.io/janily/pen/xwbpGw/">xwbpGw</a> by janily (<a href="http://codepen.io/janily">@janily</a>) on <a href="http://codepen.io">CodePen</a>.</p>
+<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
+
+OK，准备工作已做好，下面来让它动起来！
+
+我们这里操作的物体是这个ID为box的盒子。首先把它用一个变量存起来，方便后面来操作。在codepen里的js区域编写下面的代码：
+
+```
+var $box = $('#box');
+```
+
+上面可以看到我们使用了**jquery**来选择需要操作的DOM。当然你也可以使用javascript原生提供的DOM操作方法来选择DOM节点。
+
+接下来就可以是使用GreenSock中的**TweenMax.js**提供的各种方来使它动起来。
+
+请看下一章节。
+
+
+
+