angular2项目关于动画的处理
animations动画在angular2官网里面已经讲解很详细了,那么动画功能在实际项目中应该如何组织文件,动画文件放在哪个位置,如何来组织结构使得动画模块和其他模块之间运作调理清晰呢,下面参照NiceFish来讲解一下:
一:定义动画
在app文件夹里面有一个专门的动画模块
拿一个例子来简单分析一下:
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations'; export const flyIn = trigger('flyIn', [
state('in', style({transform: 'translateX(0)'})),
transition('void => *', [
animate(300, keyframes([
style({opacity: 0, transform: 'translateX(-100%)', offset: 0}),
style({opacity: 1, transform: 'translateX(25px)', offset: 0.3}),
style({opacity: 1, transform: 'translateX(0)', offset: 1.0})
]))
]),
transition('* => void', [
animate(300, keyframes([
style({opacity: 1, transform: 'translateX(0)', offset: 0}),
style({opacity: 1, transform: 'translateX(-25px)', offset: 0.7}),
style({opacity: 0, transform: 'translateX(100%)', offset: 1.0})
]))
])
]);
trigger用于定于动画功能,返回动画模块,第一个参数'flyIn'是动画指令名,
第二个参数是一个数组,state是定义每个动画的状态(元素动画的每个最终状态),动画的状态里面的样式不仅包含动画行为最终样式,也可以包含非动画的样式,比如 A状态height=0转到B状态height=100,B里面的状态样式不仅height=100,还可以加入color,background等无关动画行为的样式。
transition定义动画状态与另一个动画状态转化过程中具体的动作情况。有两个形式:
transition('* => void', [
animate(, keyframes([
style({opacity: , transform: 'translateX(0)', offset: }),
style({opacity: , transform: 'translateX(-25px)', offset: 0.7}),
style({opacity: , transform: 'translateX(100%)', offset: 1.0})
]))
])
上面的动画行为定义是用到了keyframes,第一个参数300代表这个动画的持续时间。keyframes数组里面的每个元素代表某个时刻的动画样式状态,offset代表时间刻度。
transition('void => *', [
style({
opacity: ,
transform: 'translateX(-100%)'
}),
animate('0.2s ease-in')
]),
transition('* => void', [
animate('0.2s 0.1s ease-out', style({
opacity: ,
transform: 'translateX(100%)'
}))
])
上面的这种动画行为用的是animate,tansition方法第一个参数是动画名称,第二个参数是一个数组,我们知道如果一个动画有起始状态,有最终状态,而最终状态已经定义在了state里面,那么起始状态有事什么呢?这里style所定义的就是起始状态。
里面的style方法定义的样式是动画前或者动画后的特定状态,动画正是基于style所定义的状态逐步转化为state里面的样式状态。
二:装载动画
在组件文件中动画指令会被定义在组件当中,使得组件模块(angular模块)能够在编译自己视图的时候能够识别动画指令
在component.ts文件中:
import { fadeIn } from '../../animations/fade-in'; @Component({
animations: [ fadeIn ], // 动画指令列表
。。。。
})
三:使用动画
在component.html组件视图中:
[@fadeIn]="state"
这里的sate代表最终状态。如果@fadeIn没有赋值的话,动画会取定义的默认状态为最终状态。有赋值的话比如[@fadeIn]="in":表示该元素视图出现的时候会经过 vode ——>*所定义的动画行为,最后状态到达In这个stae的样式。
angular2项目关于动画的处理的更多相关文章
- 关于npm构建angular2项目问题
我在win10系统下用npm构建好angular2项目之后,在命令行下运行 ng serve --open,报一下错误: Unknown browser query 'basedir=$(dirnam ...
- (三) Angular2项目框架搭建心得
前言: 在哪看到过angular程序员被React程序员鄙视,略显尴尬,确实Angular挺值得被调侃的,在1.*版本存在的几个性能问题,性能优化的"潜规则"贼多,以及从1.*到2 ...
- 如何在ASP.NET 5上搭建基于TypeScript的Angular2项目
一.前言 就在上月,公司的一个同事建议当前的前端全面改用AngularJs进行开发,而我们采用的就是ASP.NET 5项目,原本我的计划是采用TypeScript直接进行Angular2开发.所以借用 ...
- 1.搭建Angular2项目
简述:搭建angular2的开发环境,网上已经有许多教程,不过都是window系统下的教程,我本人使用的是linux系统,搭建环境的过程也稍微比前者麻烦了一点,可参考本人的另一篇文章Linux系统下安 ...
- angular2项目关于主页结构分析
这里需要弄清楚两个问题: 一:主页模块如何加载进来 angular2的根模块应用加载之后便会根据根模块路由信息来加载主页模块 export const appRoutes=[ { path:'', r ...
- angular2项目关于Echarts图表的处理
在NiceFish项目中关于Echarts组件和指令是直接注册在appModule根模块中的,这样路由只需这样写就可以让浏览器加载图标组件: 在chart组件视图中: <div class=&q ...
- Android项目---常用动画
在项目中经常会有闪屏的效果 在这里主要是通过定时器,将已经设定好的效果展现出来 /* * 2.5秒以后开始执行Runnable的run方法 */ new Handler().postDelayed(n ...
- vue开发移动端项目 过渡动画问题
App.vue: <div id="app"> <div class="content"> <transition :name ...
- angular2项目打包部署的坑
1.ng项目打包后,打开index.html,发现页面是空白的,F12查看,发现js和css引入的路径不对 这里要将package.json文件的打包命令改成 ng build --prod --ba ...
随机推荐
- Qt Excel
在pro文件添加 QT +=axcontainer 头文件 #include <QAxObject> void MainWindow::on_btnSelectFileDialog_cli ...
- tomcat生产环境JDK部署及虚拟主机等常用配置详解
jdk和tomcat环境部署: 1.删除系统自带的openjdk # java -version java version "1.7.0_45" OpenJDK Runtime E ...
- 转载:第2章 Nginx的配置 概述《深入理解Nginx》(陶辉)
原文:https://book.2cto.com/201304/19623.html Nginx拥有大量官方发布的模块和第三方模块,这些已有的模块可以帮助我们实现Web服务器上很多的功能.使用这些模块 ...
- Go语言规格说明书 之 结构体类型(Struct types)
go version go1.11 windows/amd64 本文为阅读Go语言中文官网的规则说明书(https://golang.google.cn/ref/spec)而做的笔记,介绍Go语言的 ...
- C++ code:向量操作之添加元素
读入一个文件aaa.txt的数据到向量中,文件中是一些整数(个数未知).要判断向量中的元素有多少个两两相等的数对. 代码如下: #include<iostream> #include< ...
- TCP连接的3次握手和4次挥手
TCP连接的3次握手和4次挥手笔记 三次握手 TCP(Transmission Control Protocol) 传输控制协议 TCP是主机对主机层的传输控制协议,提供可靠的连接服务,采用三次握手确 ...
- MockMvc 对 Spring Boot 进行单元测试
import org.junit.Test; import org.junit.runner.RunWith; import org.springframework.beans.factory.ann ...
- AngularJS+Node.js+socket.io 开发在线聊天室
所有文章搬运自我的个人主页:sheilasun.me 不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍 ...
- mongosync同步1,oplog同步会读取其他集合同步
使用mongosync同步数据 注意: 我下面的这个mongodb版本较低(3.2.16), 还可以用这个工具来同步数据.工具不支持更高版本的mongodb了. 使用方法: https://g ...
- PIGS
题解: 考虑建立一个分层图,从s向猪圈连边,容量为初始容量, 猪圈向第一个顾客连边,容量为INF 顾客向汇点连边,容量为购买量 这样一轮就搞完了,考虑下一个顾客 由于上一轮被顾客访问的猪圈都互通了,那 ...