Angular练习之animations动画

前言

文章基于angular的练手项目。文章目录

本文实现效果

Angular 动画

让我们隆重介绍Angular动画。Angular是基于最新的Web Animations API,我们使用动画触发器（animation triggers）来定义一系列状态和变换属性。我们也可以用CSS样式来改写实现我们想要的效果
主要的原则是开始和结尾的动画样式由我们自定义，中间变换的计算过程交给工具本身
当然，可以通过设置时间来设置中间动画，比如1s，1.2s，200ms。其他的就是大家熟悉的CSS动画的速度属性比如ease、liner和ease-in-out。
而Angular 4.2以上的版本里我们可以用顺序（sequence）和组合（group）来让动画一个接一个执行还是同时执行；查询（query）可以操作子元素而交错（stagger）可以创造一个很棒的连锁效果。
这些事件将触发一个动画：
向或者从视图里装载或者卸载一个元素
改变已绑定触发器的状态比如：[@routerTransition]="home"
在路由转换的前后关系中，要注意，组件正在被移除并作为导航的一部分被添加到视图中的过程。

练习开始

创建了新模块或组件包含视图，需要注入到主模块和添加路由。这里就不介绍了，主要练习动画。

引入动画模块

在主模块AppModule.ts文件中引入运动的模块BrowserAnimationsModule，

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
  imports: [
    BrowserModule,
    RouterModule,
    BrowserAnimationsModule
  ],

创建自己动画模块

练习使用angular的动画模块，我们单独创建一个模块练习。

ng g module my-animations

创建例子1组件

ng g component my-animations/exp1

定义动画样式

在my-animations模块中添加animations.ts文件，并写入动画样式。这个文件里定义的动画便是核心内容。需要有一定的css动画基础才能写出漂亮的动画效果。

/**定义动画的ts文件**/
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';

// 定义一个鼠标点击运动的动画box样式的元素会向左向右移动。
export const boxAnimate = trigger('box', [
  // 定义一个状态left
  state('left', style({ transform: 'translate3d(0,0,0)' })),
  // 定义另外一个状态right
  state('right', style({ transform: 'translate3d(200%,0,0)' })),
  // 定义运动过程(从left到right状态)
  transition('left=>right', animate(2000, keyframes([
    style({ transform: 'translate3d(300%,0,0)' })
  ]))),
  // 定义运动过程(从right到left)
  transition('right=>left', animate(1000, keyframes([
    style({ transform: 'translate3d(-100%,0,0)' }),
  ]))),
]);

创建动画载体

在exp1.component.html文件中添加元素

<h1>动画实例1</h1>
<div style="height: 100px;width: 100px;background-color: black" (click)="start()" [@box]="boxState"></div>

修改exp1.component.ts文件如下

import { Component, OnInit } from '@angular/core';
import {boxAnimate} from "../animations"
@Component({
  selector: 'app-exp1',
  templateUrl: './exp1.component.html',
  animations: [
    boxAnimate
  ]
})
export class Exp1Component implements OnInit {

  // 定义开始的状态
  private boxState: String = 'left';
  private _isTrue: Boolean = true;
  constructor() { }

  ngOnInit() {
  }
  start(): void {
    console.log('开始运动');
    if (this._isTrue) {
      this.boxState = 'right';
    } else {
      this.boxState = 'left';
    }
    this._isTrue = !this._isTrue;
  }

}

查看效果

总结

实现一个动画效果大致分为下面几步

引入BrowserAnimationsModule
创建动画效果。即一个trigger实例
使用

动画效果的核心是一个trigger实例，可以参考官方api来使用，不过都是外文，看起来真费劲。不过通过以上例子大致我们也能明白动画实现的机制。

动画载体的[@box]绑定的状态发生变化时，触发我们定义的动画行为。

源码

https://github.com/yiershan/Angular5-test

最后编辑于：2017.12.06 16:09:00