Angular练习之animations动画二

回顾

文章基于angular的练手项目。文章目录
前一篇文章《Angular练习之animations动画》介绍了在angular中使用动画的基本方法。

引入动画模块>创建动画对象>在动画载体上使用。我觉得其核心的内容在创建动画对象上，今天我们就来练习创建不同的动画对象trigger

开始练习

创建例子2

ng g component my-animations/exp2

布局

<h1>动画实例2</h1>
<div>
  <button (click)="changState('left')">状态变成左</button>
  <button (click)="changState('right')">状态变成右</button>
  <button (click)="changState('')">状态为空</button>
  <button (click)="changState('center')">状态为中</button>
</div>
<br>
<div style="height: 100px;width: 100px;background-color: black" [@Box]="BoxState"></div>

import { Component,OnInit } from '@angular/core';
import {BoxAnimate2} from "../animations"
@Component({
  selector: 'app-exp2',templateUrl: './exp2.component.html',animations: [
    BoxAnimate2
  ]
})
export class Exp2Component implements OnInit {
  // 状态
  private BoxState='';
  constructor() { }

  ngOnInit() {
  }
  changState(state){
    this.BoxState = state;
  }
}

写动画效果,只定义状态。

如下只写两个状态看看效果。

// 定义一个动画，左右两个状态加上颜色变化更容易理解吧
export const BoxAnimate2 = trigger('Box',[
  // 定义一个状态left
  state('left',style({ transform: 'translate3d(0,0)',background:'red' })),// 定义另外一个状态right
  state('right',style({ transform: 'translate3d(200%,background:'blue' })),]);

添加任意动画过程transition

// 定义运动过程(从任意到任意)
  transition('* => *',animate(500)),

入场动画void => *

注意定义顺序,定义的顺序换下位置，可以尝试下效果。我就不演示了

// 入场动画
  transition("void => *",[
    style({ opacity: 0,transform: 'translate3d(200%,200%,0)'}),animate(500)
  ]),// 定义运动过程(从任意到任意)
  transition('* => *',

":enter"和":leave"

对于"void => *"官方还给出另一种写法":enter"。同时也有相反效果的":leave"

我们添加一个按钮，修改布局如下：

<button (click)="changShow()">显示/隐藏</button>

<div *ngIf="show" style="height: 100px;width: 100px;background-color: black" [@Box]="BoxState"></div>

private show= false;
  changShow(){
    this.show=!this.show;
  }

修改动画效果

//入场动画
  transition(":enter",// 出场动画
  transition(":leave",[
    style({ opacity: 1}),animate(500,style({ opacity: 0,0)'}))
  ]),

小结

在上面的动画定义中使用了style。且在两个不同的地方都定义了。这有什么作用呢，读者自己对比效果体会吧。

基于关键帧(Keyframes)的多阶段动画

通过定义动画的关键帧，可以把两组样式之间的简单转场，升级成一种更复杂的动画，它会在转场期间经历一个或多个中间样式。
每个关键帧都可以被指定一个偏移量，用来定义该关键帧将被用在动画期间的哪个时间点。偏移量是一个介于0(表示动画起点)和1(表示动画终点)之间的数组。

这里布局和ts代码我就跳过了。主要看transition的定义和效果

export const KeyframesAnimate = trigger('KeyframesAnimate',[
  //入场动画
  transition(":enter",[
    animate(500,keyframes([
      style({opacity: 0,transform: 'translate3d(-400%,offset: 0}),style({opacity: 0.5,transform: 'translate3d(-150%,-50%,offset: 0.3}),style({opacity: 1,transform: 'translate3d(0,10%,offset: 0.7}),offset: 1.0})
    ]))
  ]),keyframes([
      style({opacity: 1,transform: 'translate3d(150%,style({opacity: 0,transform: 'translate3d(400%,]);

并行动画组(Group)

export const GroupAnimate = trigger('GroupAnimate',width: '0px',height: '0px',transform: 'translateX(-200%)'}),group([
      animate('1s ease',style({transform: 'translateX(0)'})),animate('1s 200ms ease',style({width: '100px'})),style({height: '100px'})),animate('0.5s',style({opacity: 1})),])
  ]),]);

总结

任意两个状态之间切换触发动画效果
入场和出场
Keyframes实现串联动画
Group实现并行动画
时间轴——等待100毫秒，然后运行200毫秒，并且带缓动：'0.2s 100ms ease-out'
这个动画trigger是写在单独文件中的，作为一个变量导出的，我们是不是可以封装成一个npm包呢。

源码

源码放在github开源社区上面，随时会更新。所以你下载最新版本的时候会与该文章描述的略有差异。
github地址：https://github.com/yiershan/A...