AngularAngular2

Angular2 之 Animations

2017-01-18  本文已影响661人  贺贺v5

Angular2的动画系统赋予了制作各种动画效果的能力，致力于构建出与原生CSS动画性能相同的动画。
Angular2的动画主要是和@Component结合在了一起。
animations元数据属性在定义@Component装饰。就像template元数据属性！这样就可以让动画逻辑与其应用代码紧紧集成在一起，这让动画可以更容易的出发与控制。

使用要点

“可动”属性列表: 一般就是长度、颜色、可见性

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

小知识点

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>
`,

参考文档

上一篇 下一篇

猜你喜欢

热点阅读