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]绑定的状态发生变化时，触发我们定义的动画行为。
