angular2系统学习 - 动画

1.理解ng2的动画

angular2的动画实际上是先定义若干个状态（一般就俩状态），然后元素在这若干个状态中变换。所以要记住俩东西
1. 状态
2. 状态之间的变换

2.使用ng2动画

1.首先要引入接口。

import { trigger,state,style,transition,animate,keyframes} from '@angular/core';

这里这些类具体干什么暂时先不写了，因为我也没完全搞懂，但是大多数看名字就能猜到一二。比如trigger触发，state状态，style样式等。

2.定义动画

export const animateName = trigger('triggerName',
    state('stateName_1',style({//state1-style})),
    state('stateName_2',style({//state2-style})),
    transition('stateName_1 => stateName_2',animate(100ms easy-in)),
    transition('stateName_2 => stateName_1',animate(100ms easy-out))
)

3.使用动画

//首先在要使用动画的组件中引入动画
import { animate } './animate.ts';
...

@Component({
...
//将动画挂载到元素上
template:`
<el [@triggerName]>...</el>
`
...
//组件中的animations数组对象传入引入的动画
animations:[ animate ]
})

3.动画详解

在第二部分中，我们完整的使用了一个动画。但最难最复杂的还是定义动画，这部分内容就来讲讲定义动画的那些事儿。

上面定义动画部分的代码看似内容很多，配置复杂。但把它理清后会觉得也不是那么难记住。

1.trigger(触发)
首先动画是包在触发器里的。所以我们要先定义一个trigger

说明

trigger()方法接受两个参数：

    params1:String 动画标识符

    params2:Array 多个状态、转场的数组。

trigger('animateName',[state(),state()...,transition(),transition...]);

使用

trigger=('flyInLeft',[
    state(),
    state(),
    ...
    transition(),
    transition(),
    ...
])

2.state（状态）
state比较好理解，就是某一状态下元素有不同的样式。例如左边飞入动画，它有两个状态，一个是在屏幕左边看不见的位置，另一个在屏幕中显示的位置，这就是两个状态。从第一个状态到第二个状态的转场也就形成了动画。

说明

state()方法接收两个参数：

    param1:String 状态名称

    param2:Object style方法

state('stateName',style({}))

使用

state('hide', style({})),
state('show', style({}))

3.transition（转场）
转场也就是由一个状态过度到另外一个状态的过程。

说明

transition()方法接受两个参数：

    param1:String 状态1 => 状态2

    param2:Object animate方法

transition('hide => show', animate()),
transition('show => hide', animate())

注意
1. *（通配符）状态
*状态匹配任何动画状态。当定义那些不需要管当前处于什么状态的样式及转场时，这很有用。

2.void状态
void状态表示元素没有被附加到视图。这种情况可能是由于它尚未被添加进来或者已经被移除了。