Skip to content

Commit

Permalink
update markdown
Browse files Browse the repository at this point in the history
  • Loading branch information
janily committed Nov 1, 2016
1 parent e8c1e74 commit c8478b6
Show file tree
Hide file tree
Showing 5 changed files with 10 additions and 12 deletions.
2 changes: 1 addition & 1 deletion .publish
Submodule .publish updated from c221a0 to bbfb8a
2 changes: 1 addition & 1 deletion GreenSockAdvanced/3dtransform.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# 3D效果

在平时的动效开发中,为了是动效具有立体的效果,一般会用到CSS3中的3D transform这一属性。在GreenSock中也提供了3D transform功能,支持CSS3D的全部属性,使用起来比CSS3好用多了
在平时的动效开发中,为了是动效具有立体的效果,一般会用到CSS3中的3D transform这一属性。在GreenSock中也提供了3D transform功能,支持CSS3D的全部属性,使用起来比CSS3更加方便

下面来看看它的一些使用方法。

Expand Down
4 changes: 2 additions & 2 deletions GreenSockBasic/callfunction.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# 回调方法

这里以.fromTo()方法来说明回调的使用用法。
首先以.fromTo()方法来说明回调的使用用法。

比如,我们想要在动画开始的时候来触发回调函数。首先来创建一个start的函数:

Expand Down Expand Up @@ -41,7 +41,7 @@ function complete(){

![](http://ww2.sinaimg.cn/large/0060lm7Tgw1f998q07951j308q025glh.jpg)

OK,到目前为止,我们的动画都是针对单个元素的运动。在实际开发中有时候需要多个元素一起运动,只是运动的属性的值不同而已,比如像下面这样的动画:
OK,到目前为止,我们开发的动画都是针对单个元素的运动。在实际开发中有时候需要多个元素一起运动,只是运动的属性的值不同而已,比如像下面这样的动画:

![](http://ww1.sinaimg.cn/large/0060lm7Tgw1f99982ulhug30hq0crt9w.gif)

Expand Down
4 changes: 2 additions & 2 deletions GreenSockBasic/easing.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ 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提供了在动画各个阶段的回调方法,使用起来非常方便。
在实际开发中,开发动画效果都会在动画过程中做一些其它的操作,这个时候就要用到回调函数了。TweenMax提供了在动画各个阶段的回调方法,使用起来非常方便。

请看下一章节。

Expand Down
10 changes: 4 additions & 6 deletions GreenSockBasic/select.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,20 @@

### 代码约定

为了方便演示代码,这里统一使用**codepen**这个在线的代码编辑平台来进行demo演示。
为了方便演示代码,统一使用**codepen**这个在线的代码编辑平台来进行demo演示。

这里我们引入的是TweenMax这个全功能的js文件,它包括了GreenSock动画平台的所有核心的功能。

为了方便选择DOM元素我们还需要引入jquery来选择和操作DOM。
本教程主要以TweenMax这个全功能的js文件为基础,它包括了GreenSock动画平台的所有核心的功能。还需要引入jquery来选择和操作DOM。

### 开始

首先我们准备了一个基本的html和css骨架,如下所示:
先准备基本的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区域编写下面的代码:
这里操作的对象是这个ID为box的盒子。首先把它用一个变量存起来,方便后面来操作。在codepen里的js区域编写下面的代码:

```
var $box = $('#box');
Expand Down

0 comments on commit c8478b6

Please sign in to comment.