回顾
文章基于angular的练手项目。文章目录
前一篇文章《Angular练习之animations动画》介绍了在angular中使用动画的基本方法。
引入动画模块>创建动画对象>在动画载体上使用。我觉得其核心的内容在创建动画对象上，今天我们就来练习创建不同的动画对象trigger
预览
开始练习
创建例子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' })),
]);
可以看出没有动画效果，只是单纯的样式改变。
添加任意动画过程transition
// 定义运动过程(从任意到任意)
transition('* => *', animate(500)),
可以看出有动画效果了
入场动画void => *
注意定义顺序,定义的顺序换下位置，可以尝试下效果。我就不演示了
// 入场动画
transition("void => *", [
style({ opacity: 0,transform: 'translate3d(200%,200%,0)'}),
animate(500)
]),
// 定义运动过程(从任意到任意)
transition('* => *', animate(500)),
定义的顺序很总要
":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;
}
效果不错哦
修改动画效果
//入场动画
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})
]))
]),
]);
基于关键帧(Keyframes)的多阶段动画演示
并行动画组(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})),
])
]),
]);
并行动画组(Group)演示
总结
- 任意两个状态之间切换触发动画效果
- 入场和出场
- Keyframes实现串联动画
- Group实现并行动画
- 时间轴——等待100毫秒，然后运行200毫秒，并且带缓动：'0.2s 100ms ease-out'
- 这个动画trigger是写在单独文件中的，作为一个变量导出的，我们是不是可以封装成一个npm包呢。
源码
源码放在github开源社区上面，随时会更新。所以你下载最新版本的时候会与该文章描述的略有差异。
github地址：https://github.com/yiershan/Angular5-test
