Angular练习之animations动画二

大佬教程收集整理的这篇文章主要介绍了Angular练习之animations动画二，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

返回目录

@H_618_2@回顾

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

@H_618_2@开始练习

创建例子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)',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"

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

<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",// 出场动画
  transition(":leave",[
    style({ opacity: 1}),animate(500,style({ opacity: 0,0)'}))
  ]),

小结

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

这里布局和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包呢。

@H_618_2@源码

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

大佬总结

以上是大佬教程为你收集整理的Angular练习之animations动画二全部内容，希望文章能够帮你解决Angular练习之animations动画二所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。