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状态表示元素没有被附加到视图。这种情况可能是由于它尚未被添加进来或者已经被移除了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值