Angular2的动画系统赋予了制作各种动画效果的能力,致力于构建出与原生CSS动画性能相同的动画。 Angular2的动画主要是和
@Component
结合在了一起。 animations元数据属性在定义@Component装饰。就像template元数据属性!这样就可以让动画逻辑与其应用代码紧紧集成在一起,这让动画可以更容易的出发与控制。
@Component
元数据中。transition
中就只会在转场中有保留样式,转场完成后,就不会保留了。Property Name | Type |
---|---|
background-color | as color |
background-position | as repeatable list of simple list of length, percentage, or calc |
border-bottom-color | as color |
border-bottom-width | as length |
border-left-color | as color |
border-left-width | as length |
border-right-color | as color |
border-right-width | as length |
border-spacing | as simple list of length |
border-top-color | as color |
border-top-width | as length |
bottom | as length, percentage, or calc |
clip | as rectangle |
color | as color |
font-size | as length |
font-weight | as font weight |
height | as length, percentage, or calc |
left | as length, percentage, or calc |
letter-spacing | as length |
line-height | as either number or length |
margin-bottom | as length |
margin-left | as length |
margin-right | as length |
margin-top | as length |
max-height | as length, percentage, or calc |
max-width | as length, percentage, or calc |
min-height | as length, percentage, or calc |
min-width | as length, percentage, or calc |
opacity | as number |
outline-color | as color |
outline-width | as length |
padding-bottom | as length |
padding-left | as length |
padding-right | as length |
padding-top | as length |
right | as length, percentage, or calc |
text-indent | as length, percentage, or calc |
text-shadow | as shadow list |
top | as length, percentage, or calc |
vertical-align | as length |
visibility | as visibility |
width | as length, percentage, or calc |
word-spacing | as length |
z-index | as integer |
e.g.
动画.gif
这个一个淡入淡出的文本内容。
import { Component, OnChanges, Input, trigger, state, style, animate, transition } from '@angular/core';
@Component({
selector: 'my-fader',
template: `
<div [@visibilityChanged]="visibility">
<ng-content></ng-content>
<p>Can you see me? I should fade in or out...</p>
</div>
`,
styleUrls: ['./my-fader.css'],
animations: [ // 动画的内容
trigger('visibilityChanged', [
// state 控制不同的状态下对应的不同的样式
state('shown' , style({ opacity: 1, transform: 'scale(1.0)' })),
state('hidden', style({ opacity: 0, transform: 'scale(0.0)' })),
// transition 控制状态到状态以什么样的方式来进行转换
transition('shown => hidden', animate('600ms')),
transition('hidden => shown', animate('300ms')),
])
]
})
export class MyFaderComponent implements OnChanges{
visibility = 'shown'; // 避免ngOnChanges()并降低代码复杂度
@Input() isVisible : boolean = true;
ngOnChanges() {
this.visibility = this.isVisible ? 'shown' : 'hidden';
}
}
将动画改为关键帧,动画效果为下面:
animations: [
trigger('visibilityChanged', [
transition('shown => hidden', animate('600ms', keyframes([
style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
style({opacity: 1, transform: 'translateX(15px)', offset: 0.3}),
style({opacity: 1, transform: 'translateX(0)', offset: 1.0}),
]))),
transition('hidden => shown', animate('300ms', keyframes([
style({opacity: 1, transform: 'translateX(0)', offset: 0}),
style({opacity: 1, transform: 'translateX(-15px)', offset: 0.7}),
style({opacity: 0, transform: 'translateX(100%)', offset: 1.0})
]))),
])
]
关键帧.gif
*
通配符
(通配符)状态匹配任何动画状态。当定义那些不需要管当前处于什么状态的样式及转场时,这很有用。ease-in
。
·函数意味着动画开始时相对缓慢,然后在进行中逐步加速。可以通过在这个字符串中的持续时间和延迟后面添加第三个值来控制使用哪个缓动函数(如果没有定义延迟就作为第二个值)。
animation_multistep.gif
animations: [
trigger('flyInOut', [
state('in', style({transform: 'translateX(0)'})),
transition('void => *', [
animate(300, keyframes([ // 回弹的效果
style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
style({opacity: 1, transform: 'translateX(15px)', 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(-15px)', offset: 0.7}),
style({opacity: 0, transform: 'translateX(100%)', offset: 1.0})
]))
])
])
]
无论动画是否实际执行过,那些回调都会触发。
template: `
<ul>
<li *ngFor="let hero of heroes"
(@flyInOut.start)="animationStarted($event)"
(@flyInOut.done)="animationDone($event)"
[@flyInOut]="'in'">
{{hero.name}}
</li>
</ul>
`,