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>

ts

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,0)',background:'red' })),
  // 定义另外一个状态right
  state('right', style({ transform: 'translate3d(200%,0,0)',background:'blue' })),
]);

可以看出没有动画效果，只是单纯的样式改变。

添加任意动画过程transition

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

可以看出有动画效果了

入场动画void => *

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

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

定义的顺序很总要

":enter"和":leave"

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

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

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

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

ts

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

效果不错哦

修改动画效果

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

小结

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

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

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

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

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

]);

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

并行动画组(Group)

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

并行动画组(Group)演示

总结

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

源码

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