Angular练习之animations动画二

发布时间:2019-06-02 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Angular练习之animations动画二脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

返回目录

回顾

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

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

Angular练习之animations动画二

开始练习

创建例子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' })),
]);

Angular练习之animations动画二

添加任意动画过程transition

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

Angular练习之animations动画二

入场动画void => *

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

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

Angular练习之animations动画二

":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;
  }

Angular练习之animations动画二

修改动画效果

  //入场动画
  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})
    ]))
  ]),

]);

Angular练习之animations动画二

并行动画组(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})),
    ])
  ]),
]);

Angular练习之animations动画二

总结

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

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

脚本宝典总结

以上是脚本宝典为你收集整理的Angular练习之animations动画二全部内容,希望文章能够帮你解决Angular练习之animations动画二所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

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