Angular练习之animations动画二
来源:互联网 发布:美股数据下载 编辑:程序博客网 时间:2024/06/05 05:29
返回目录
回顾
文章基于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}) ])) ]),]);
并行动画组(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})), ]) ]),]);
总结
- 任意两个状态之间切换触发动画效果
- 入场和出场
- Keyframes实现串联动画
- Group实现并行动画
- 时间轴——等待100毫秒,然后运行200毫秒,并且带缓动:’0.2s 100ms ease-out’
- 这个动画trigger是写在单独文件中的,作为一个变量导出的,我们是不是可以封装成一个npm包呢。
源码
源码放在github开源社区上面,随时会更新。所以你下载最新版本的时候会与该文章描述的略有差异。
github地址:https://github.com/yiershan/Angular5-test
阅读全文
0 0
- Angular练习之animations动画二
- Angular练习之animations动画
- Angular练习之animations动画三
- CSS3动画之二:Animations功能
- 【Angular】angular-animations 动画 BrowserAnimationsModule 详解
- android之Animations(动画)
- Android之 Animations动画
- android Animations 动画效果(二)
- iOS动画——Layer Animations(二)
- iOS动画——Layer Animations(二)
- 动画Animations
- IOS疯狂基础之-动画Animations
- animations 之 对控件设置动画效果
- Snail—UI学习之动画Animations
- Android Animations动画之简单学习
- React Native开发之动画(Animations)
- Android学习之Animations动画介绍
- React Native开发之动画(Animations)
- H5页横屏VUE项目bug处理
- SpringMVC集成阿里的dubbo框架
- RN TODO代码解析之一
- Progressive Web Applications(PWA)学习简记
- 第一篇
- Angular练习之animations动画二
- 线程(基础)
- think里的几个小知识点
- 如何将QT程序移植到开发板上运行
- Linux 进程间通信1
- 图的邻接链表实现下的搜索两点之间所有路径的算法
- 如何查看进程/服务是否启动
- coursera课程learning how to learn的主要内容-学会学习(一)
- POJ 1017 Packets