Angular学习笔记37：Angular动画(5):关键帧动画

关键帧动画

在Angular学习笔记32：Angular动画(1)：一些基础中，写了一个简单的转场动画，将这个动画修改为具有多个顺序执行步骤的动画，此时就要用到关键帧动画。

在Angular中，使用 keyframe() 函数就可以创建关键帧动画，这类似的CSS中的关键帧。关键帧允许在单个时间段内进行多种样式更改。

例如，将上面文章中的动画，黄色变化到绿色的时候，多次改变颜色。
修改类文件如下：

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

@Component({
  selector: 'app-animation-demo',
  templateUrl: './animation-demo.component.html',
  styleUrls: ['./animation-demo.component.less'],
  animations: [
    // 定义动画的触发器放在 animations 元数据属性中
    trigger('stateChange', [
      state('isYellow', style(
        {
          height: '200px',
          width: '200px',
          opacity: 1,
          backgroundColor: 'yellow'
        }
      )),
      state('isGreen', style(
        {
          height: '100px',
          width: '100px',
          opacity: 0.5,
          backgroundColor: 'green'
        }
      )),
      state('isRed', style(
        {
          height: '150px',
          width: '150px',
          opacity: 0.5,
          backgroundColor: 'red'
        }
      )),
      transition('isYellow <=> isGreen', animate('4s', keyframes(
        [
          style({backgroundColor: 'blue'}),
          style({backgroundColor: 'red'}),
          style({backgroundColor: 'orange'})
        ]
      ))),
      transition('* => isRed', animate('0.5s', style({opacity: '*'}))),
      transition('* => *', animate('5s')),
    ]),
    trigger('fly', [
      state('flyIn', style({
        transform: 'translateX(0)',
        color: 'blue',
      })),
      transition('void => *', [
        style({
          transform: 'translateX(-100%)',
          color: 'yellow'
        }),
        animate('2s'),
      ]),
      transition('* => void', [
        animate('2s', style({
          transform: 'translateX(100%)',
          color: 'red'
        }))
      ])
    ])

  ],
})
export class AnimationDemoComponent implements OnInit {
  public isChange = false;
  public isInOut = false;
  public isDisabled = false;

  constructor() {
  }

  ngOnInit() {
  }

  public handleChange(state): void {
    this.isChange = state;
  }

  public handleInOut() {
    this.isInOut = !this.isInOut;
  }

  public handleDisabled() {
    this.isDisabled = !this.isDisabled;
  }

  public handleFlyStart(event: AnimationEvent) {
    console.log(event);
  }

}

在这里，将黄色和绿色两种状态的转场时间设置成了4s，然后增加了变化成蓝色，红色，橙色的关键帧动画，保存以后，点击按钮，产生动画如下:

这样就创建了一个具有多个顺序执行步骤的动画。

关键帧偏移

关键帧包括一个用来定义动画中每个样式何时开始更改的偏移（offset）属性。偏移是个 0 到 1 之间的相对值，分别标记动画的开始和结束时间。前面我们没有设置关键帧偏移偏移的属性，所以angular会自动平均分配。
修改类文件：

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

@Component({
  selector: 'app-animation-demo',
  templateUrl: './animation-demo.component.html',
  styleUrls: ['./animation-demo.component.less'],
  animations: [
    // 定义动画的触发器放在 animations 元数据属性中
    trigger('stateChange', [
      state('isYellow', style(
        {
          height: '200px',
          width: '200px',
          opacity: 1,
          backgroundColor: 'yellow'
        }
      )),
      state('isGreen', style(
        {
          height: '100px',
          width: '100px',
          opacity: 0.5,
          backgroundColor: 'green'
        }
      )),
      state('isRed', style(
        {
          height: '150px',
          width: '150px',
          opacity: 0.5,
          backgroundColor: 'red'
        }
      )),
      transition('isYellow <=> isGreen', animate('4s', keyframes(
        [
          style({backgroundColor: 'blue', offset: 0.1}),
          style({backgroundColor: 'red', offset: 0.2}),
          style({backgroundColor: 'orange', offset: 0.8})
        ]
      ))),
      transition('* => isRed', animate('0.5s', style({opacity: '*'}))),
      transition('* => *', animate('5s')),
    ]),
    trigger('fly', [
      state('flyIn', style({
        transform: 'translateX(0)',
        color: 'blue',
      })),
      transition('void => *', [
        style({
          transform: 'translateX(-100%)',
          color: 'yellow'
        }),
        animate('2s'),
      ]),
      transition('* => void', [
        animate('2s', style({
          transform: 'translateX(100%)',
          color: 'red'
        }))
      ])
    ])

  ],
})
export class AnimationDemoComponent implements OnInit {
  public isChange = false;
  public isInOut = false;
  public isDisabled = false;

  constructor() {
  }

  ngOnInit() {
  }

  public handleChange(state): void {
    this.isChange = state;
  }

  public handleInOut() {
    this.isInOut = !this.isInOut;
  }

  public handleDisabled() {
    this.isDisabled = !this.isDisabled;
  }

  public handleFlyStart(event: AnimationEvent) {
    console.log(event);
  }

}

保存修改，运行：

加了偏移以后，会清楚的发现，蓝色，红色的转场速度非常快，橙色相对较慢。