angular2项目关于动画的处理

animations动画在angular2官网里面已经讲解很详细了,那么动画功能在实际项目中应该如何组织文件,动画文件放在哪个位置,如何来组织结构使得动画模块和其他模块之间运作调理清晰呢,下面参照NiceFish来讲解一下:

 一:定义动画

在app文件夹里面有一个专门的动画模块

angular2项目关于动画的处理

拿一个例子来简单分析一下:

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

export const flyIn = trigger('flyIn', [
state('in', style({transform: 'translateX(0)'})),
transition('void => *', [
animate(300, keyframes([
style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
style({opacity: 1, transform: 'translateX(25px)', offset: 0.3}),
style({opacity: 1, transform: 'translateX(0)', offset: 1.0})
]))
]),
transition('* => void', [
animate(300, keyframes([
style({opacity: 1, transform: 'translateX(0)', offset: 0}),
style({opacity: 1, transform: 'translateX(-25px)', offset: 0.7}),
style({opacity: 0, transform: 'translateX(100%)', offset: 1.0})
]))
])
]);
trigger用于定于动画功能,返回动画模块,第一个参数'flyIn'是动画指令名,
第二个参数是一个数组,state是定义每个动画的状态(元素动画的每个最终状态),动画的状态里面的样式不仅包含动画行为最终样式,也可以包含非动画的样式,比如 A状态height=0转到B状态height=100,B里面的状态样式不仅height=100,还可以加入color,background等无关动画行为的样式。
transition定义动画状态与另一个动画状态转化过程中具体的动作情况。有两个形式:
 transition('* => void', [
animate(, keyframes([
style({opacity: , transform: 'translateX(0)', offset: }),
style({opacity: , transform: 'translateX(-25px)', offset: 0.7}),
style({opacity: , transform: 'translateX(100%)', offset: 1.0})
]))
])

上面的动画行为定义是用到了keyframes,第一个参数300代表这个动画的持续时间。keyframes数组里面的每个元素代表某个时刻的动画样式状态,offset代表时间刻度。

transition('void => *', [
style({
opacity: ,
transform: 'translateX(-100%)'
}),
animate('0.2s ease-in')
]),
transition('* => void', [
animate('0.2s 0.1s ease-out', style({
opacity: ,
transform: 'translateX(100%)'
}))
])

上面的这种动画行为用的是animate,tansition方法第一个参数是动画名称,第二个参数是一个数组,我们知道如果一个动画有起始状态,有最终状态,而最终状态已经定义在了state里面,那么起始状态有事什么呢?这里style所定义的就是起始状态。

里面的style方法定义的样式是动画前或者动画后的特定状态,动画正是基于style所定义的状态逐步转化为state里面的样式状态。  

二:装载动画

在组件文件中动画指令会被定义在组件当中,使得组件模块(angular模块)能够在编译自己视图的时候能够识别动画指令
在component.ts文件中:
import { fadeIn } from '../../animations/fade-in';

@Component({
animations: [ fadeIn ], // 动画指令列表
。。。。
})

 三:使用动画

在component.html组件视图中:

angular2项目关于动画的处理

[@fadeIn]="state"

这里的sate代表最终状态。如果@fadeIn没有赋值的话,动画会取定义的默认状态为最终状态。有赋值的话比如[@fadeIn]="in":表示该元素视图出现的时候会经过 vode ——>*所定义的动画行为,最后状态到达In这个stae的样式。

上一篇:Android动画的深入分析


下一篇:Stay Hungry