angular动画知识点以及代码样例

原文地址

https://www.jianshu.com/p/4400174072e2

大纲

　　一、angular动画的相关概念
　　二、angular动画的绑定方式
　　三、angular动画代码实例

一、angular动画的相关概念

   1.一、trigger（触发器）

<!--
    全部的trigger均可以直接绑定element
    像这样，只要state1 有改变，trigger都会触发。
    在trigger世界里，是能控制state 和 transition。
-->
<div [@state]="state1" ></div>

   1.二、state是转场的“场”，state（状态）

/*
    一、*(通配符)状态:*(通配符)状态匹配任何动画状态。
        当定义那些不须要管当前处于什么状态的样式及转场时，这颇有用。

        当该元素的状态从 active 变成任何其它状态时，active => * 转场都会生效。
        当在任意两个状态之间切换时，* => * 转场都会生效。
        * 通配符状态也能匹配 void。
        
    二、void 状态
        有一种叫作 void 的特殊状态，它能够应用在任何动画中。
        它表示元素没有被附加到视图。
        这种状况多是因为它还没有被添加进来或者已经被移除了。 
        void 状态在定义“进场”和“离场”的动画时会很是有用。
        好比当一个元素离开视图时，* => void 转场就会生效，
        而无论它在离场之前是什么状态。
        
    三、还有一些:enter、:leave等状态是angular自己自带的，
      好比:enter表明路由进场、:leave表明路由出场
*/
state("void", style({ height: 0 })) //void是保留字，是没有东西
state("*", style({ height: 0 }))  //*是保留字，是default
state("closed", style({ height: 0 }))
state("open, visible", style({ height: "*" }))

   1.三、transition是转场，state去到下一个state

/**
  转场的书写方式有不少种，以下是一些常见的转场
**/
transition("on => off", animate(500)),
transition("on <=> off", animate(500)),
transition("on => off, off => void", animate(500)),
transition("void => *", animate(500)),
transition("* => *", animate("1s 0s")),
transition((fromState, toState) => {
   return fromState == "off" && toState == "on";
}, animate("1s 0s"))
transition(":enter", animate(500)),
transition(":leave", animate(500)),

   1.四、基础动画animate

/*
    animate 使用方式就不少 （能够控制过渡时长，延迟，和过渡动做，结束动画）
    动画的方式主要有两种：
        一、简单的转场方式，
              经过自定义的两种状态之间的样式转换从而造成动画
        二、复杂的转场方式，
              经过自定义动画帧的方式从而详细定义动画不一样时间状态下的转场方式
*/
animate(500, style(...))
animate("1s", style(...))
animate("100ms 0.5s", style(...))
animate("5s ease", style(...))
animate("5s 10ms cubic-bezier(.17,.67,.88,.1)", style(...))
animate(500, style({ background: "red" }))
animate(500, keyframes([
  style({ background: "blue" })),
  style({ background: "red" }))

   1.五、动画时间线

/*
    对每个动画转场效果，有三种时间线属性能够调整：
        持续时间(duration)、延迟(delay)和缓动(easing)函数。
    它们被合并到了一个单独的转场时间线字符串。
    
    持续时间：持续时间控制动画从开始到结束要花多长时间。
    
    延迟：延迟控制的是在动画已经触发但还没有真正开始转场以前要等待多久。
    
    缓动函数：缓动函数用于控制动画在运行期间如何加速和减速。
      好比：使用 ease-in 函数意味着动画开始时相对缓慢，而后在进行中逐步加速。
      能够经过在这个字符串中的持续时间和延迟后面添加第三个值来控制使用哪一个缓动函数
      (若是没有定义延迟就做为第二个值)。
*/

   1.六、并行动画组(Group)

/*
    你可能会但愿为同时发生的几个动画配置不一样的时间线。
    好比，同时对两个 CSS 属性作动画，但又得为它们定义不一样的缓动函数。

    这种状况下就能够用动画组来解决了。
    在这个例子中，同时在进场和离场时使用了组，以便能让它们使用两种不一样的时间线配置
    它们被同时应用到同一个元素上，但又彼此独立运行：
*/
animations: [
  trigger('flyInOut', [
   state('in', style({width: 120, transform: 'translateX(0)', opacity: 1})),
    transition('void => *', [
      style({width: 10, transform: 'translateX(50px)', opacity: 0}),
      group([
        animate('0.3s 0.1s ease', style({
          transform: 'translateX(0)',
          width: 120
        })),
        animate('0.3s ease', style({
          opacity: 1
        }))
      ])
    ]),
    transition('* => void', [
      group([
        animate('0.3s ease', style({
          transform: 'translateX(50px)',
          width: 10
        })),
        animate('0.3s 0.2s ease', style({
          opacity: 0
        }))
      ])
    ])
  ])
]

二、angular动画的绑定方式

   2.1在当前组件中自定义动画，而后使用

     2.1.1 在组件中定义动画

import {
  Component, OnInit, 
  trigger, state, style, transition, 
  animate
} from '@angular/core';
@Component({
  selector: 'test-animation',
  templateUrl: './test-animation.component.html',
  styleUrls: ['./test-animation.component.css'],
  animations:[
    //在position状态改变时，触发动画
    trigger('position',[
      //position为left时的样式
      state('left',style({
        'margin-left': '0',
        'background-color':'yellow'
      })),
      //position为right时的样式
      state('right',style({
        'margin-left': '200px',
        'background-color':'blue'
      })),
      //状态切换时的动画设置
      transition('left => right',animate('1000ms ease-in')),
      transition('right => left',animate('1000ms ease-out'))
    ])
  ]
})
export class TestAnimationComponent implements OnInit {
  currentPosition = 'left';
  constructor() { }
  ngOnInit() {
  }
  /**
   * 按钮事件，切换状态
   */
  togglePosition() {
    if(this.currentPosition === 'left') {
      this.currentPosition = 'right';
    }else {
      this.currentPosition = 'left';
    }
  }
}

     2.1.二、在模板中绑定使用

<div id="brick" [@position]="currentPosition"></div>
<button (click)="togglePosition()">切换位置</button>

     2.1.三、经过事件改变状态，从而触发动画效果

　　当传入的状态由left转变为right的时候或者从right转变为left的时候都会触发相应的状态动画

   2.二、在非当前组件中自定义动画，而后引入并使用

     2.2.一、定义一个自定义动画

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

// Component transition animations
export const flyInOut =
    trigger('flyInOut', [
      state('in', style({height:'0'})),
      state('out', style({height:'100px'})),
        transition('in => out', [
          animate(2000, keyframes([
            style({ height: '0', opacity: 0, offset: 0, display:'block'}),
              style({ height: '*', opacity: 1, offset: 1, display:'none'})
          ]))
        ]),
      transition('out => in', [
        animate(2000, keyframes([
          style({ height: '*', opacity: 1, offset: 0 }),
          style({ height: '0', opacity: 0, offset: 1 })
        ]))
      ]),
    ])

     2.2.二、在组件中引入并调用

import { Component } from "@angular/core";
import { flyInOut } from "../share/animation/flyInOut.animations";

@Component({
    selector:'test-animation2',
    templateUrl:'./test-animation2.component.html',
    styleUrls:['./test-animation2.component.css'],
    animations:[flyInOut]
})

export class TestAnimation2Component {
    flyState = 'in';

    changeState() {
        if(this.flyState === 'in'){
            this.flyState = 'out'
        }else {
            this.flyState = 'in'
        }
    }
}

     2.2.三、在模板中绑定动画并经过事件改变更画状态从而调用转场动画

<!--
.block {
    width: 100px;
    height: 100px;
    background-color: blueviolet;
}
-->
<div class="block" [@flyInOut]="flyState">
</div>
<button (click)="changeState()">
    change state
</button>

三、angular动画代码实例

/*
  testAnimation.component.ts
*/
import {
    Component, OnInit, trigger, 
    state, style, transition, animate
} from '@angular/core';
@Component({
  selector: 'test-animation',
  templateUrl: './testAnimation.component.html',
  styleUrls: ['./testAnimation.component.scss'],
  animations:[
    //在position状态改变时，触发动画
    trigger('position',[
      //position为left时的样式
      state('left',style({
        'margin-left': 0,
        'background-color':'yellow'
      })),
      //position为right时的样式
      state('right',style({
        'margin-left': 200,
        'background-color':'blue'
      })),
      //状态切换时的动画设置
      transition('left => right',animate('1000ms ease-in')),
      transition('right => left',animate('1000ms ease-out'))
    ])
  ]
})
export class TestAnimationComponent implements OnInit {
  currentPosition = 'left';
  constructor() { }
  ngOnInit() {
  }
  /**
   * 按钮事件，切换状态
   */
  togglePosition() {
    if(this.currentPosition === 'left') {
      this.currentPosition = 'right';
    }else {
      this.currentPosition = 'left';
    }
  }
}

<!--
  testAnimation.component.html
-->
<div id="brick" [@position]="currentPosition"></div>
<button (click)="togglePosition()">切换位置</button>

//testAnimation.component.scss
#brick {
  width: 20rem;
  height: 10rem;
  background-color: aqua;
  margin-left: 0;
}

　　

 代码资料

angular示例代码中的angular-animation，里面不只有本教程我讲解的代码实例，还有我自定义的一些动画的使用，但愿能给各位提供帮助。