refer :

https://angular.io/guide/animations

https://github.com/angular/angular/blob/master/packages/animations/src/animation_metadata.ts

https://github.com/angular/angular/commit/f1a9e3c (router)

angular 的动画建立在一堆的方法上:

1. trigger
触发器, 用来和 dom 交互 <div [@triggerName]="state" ></div>
trigger 负责定义各种 state 和它们之间变化来变化去 transition

trigger('triggerA', [
state('A', style...),
state('B', style...),
transition('A => B', animate...),
transition('B => A', animate...)
])

2. State
angular 的概念是通过改变状态(state)来触发(trigger)动画(animate)
每个状态都定义了最终的样式

state('A', style...)

3. transition
负责定义各种 state 之间错综复杂的转换关系

transition('A => B', animate...)
transition('A <=> B', animate...)
transition('* => *', animate...) * is whatever
transition(':enter', animate...)
transition(':leave', animate...)
transition('* => void', animate...) void表示无, whatever to null 也等于 :leave
transition((fromState, toState) => boolean, animate...) 还可以写方法判断哦
transition('A => B',[style,animate]) style 也可以放进来哦.
transition('A => B',[animate,animate]) 数组 animate 会按序执行和 transition('A => B', sequence([animate,animate])) 是一样的
transition('A => B',group(animate,animate)) 不想按序执行可以使用 group

到这里可以看出一个基本的流程
[@triggerName]="state" 监听了 state 的变化
一但变化发生触发器就查找匹配的 transition 然后执行 animate. 就这样简单

4. Style
就是定义 css 啦

style({ display : 'none' })

5. animate
具体的动画定义

animate("5s 10ms cubic-bezier(.17,.67,.88,.1)", style(...)) 

duration= 5second
delay=10ms
easing= cubic-bezier (ease-out 等等 css 有的都可以放)
最后加上 style 就可以动画了咯

animate("5s", keyframes([
style({opacity: 0, offset: 0}),
style({opacity: 1, offset: 0.3})
]))

如果你想完全掌握节奏可以使用 keyframes + offset 做定义, offset 0.3 是百分比

6.group
就是把多个 animate 组合起来并发执行.

group(animate,animate)

7.keyframes
上面说了

8.sequence
按顺序一个接一个执行, 和 group 刚好打对台, 一个 step by step, 另一个是并发

sequence(animate,animate)

9.useAnimation

animate是可以封装的. 使用 animation 方法

let fadeAnimation = animation([
style({ opacity: '{{ start }}' }),
animate('{{ time }}',
style({ opacity: '{{ end }}'))
], { params: { time: '1000ms', start: 0, end: 1 }});

然后在任何想使用 animate 的地方改用 useAnimation

useAnimation(fadeAnimation, {
params: {
time: '2s',
start: 1,
end: 0
}
})

10.query
任何你想使用 animate 的地方都可以使用 query
animate 会施法在当前的 element 上, 而通过 query 你可以施法在 element 的 child 上
query 支持 css 选择器的语法,还有一些 angular 特别的定义语法.

query('css-selector',[animate...])

- Querying for newly inserted/removed elements using `query(":enter")`/`query(":leave")`

这里有个神技

<div [@listAnimation]="items.length">
<div *ngFor="let item of items">
{{ item }}
</div>
</div>

通过 items.length 配上下面的 transition * => * + query child 就可以实现 items 在插入和移除时的动画了.

transition('* => *', [
query(':leave', [
stagger(100, [
animate..
])
]),
query(':enter', [
stagger(100, [
animate..
])
])
])

- Querying all currently animating elements using `query(":animating")`
- Querying elements that contain an animation trigger using `query("@triggerName")`
- Querying all elements that contain an animation triggers using `query("@*")`
- Including the current element into the animation sequence using `query(":self")`

11.stagger
stagger 是配合 query 来使用的, 它的作用是当 query select 出很多 element 时,你希望它们不要并发, 而是隔着一个间隔时间.

query('css-selector',[stagger(100,[animate])]) 

比如 select 出 2 个 element, 一个触发动画先,另一个则会等间隔 100ms 后才触发.

12.animateChild
animateChild 是一个 manual trigger 概念

<div [@parentAnimation]="exp">
<div [@childAnimation]="exp">
one
</div>
</div>

angular 说, 当 parent trigger 触发后,child trigger by default 是不会被触发的 (不过我试了会 /.\)
而我们可以在 parent trigger 中通过 query('@child',[animateChild()]) 来手动触发 child trigger.
这个在做 router animate 时会用到哦.

router animation 实现 https://github.com/angular/angular/commit/f1a9e3c

其实也是依据上面这些方法来做的. 主要用了 parent, child, query, enter, leave, animateChild 这些概念.

angular2 学习笔记 ( animation 动画 )的更多相关文章

  1. Android学习笔记_39_tween动画的实现(Animation和Frame)

    一.Animation动画的实现及特点: 1.Tween动画,通过对 View 的内容进行一系列的图形变换 (包括平移.缩放.旋转.改变透明度)来实现动画效果.   动画效果的定义可以采用XML来做也 ...

  2. iOS学习笔记10-UIView动画

    上次学习了iOS学习笔记09-核心动画CoreAnimation,这次继续学习动画,上次使用的CoreAnimation很多人感觉使用起来很繁琐,有没有更加方便的动画效果实现呢?答案是有的,那就是UI ...

  3. HTML学习笔记 cs动画基础(分列效果可用于做瀑布流) 第十五节 (原创) 参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. webgl学习笔记四-动画

    写在前面 建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放   下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘 ...

  5. Android学习笔记_55_Tween动画 (渐变、缩放、位移、旋转)

    Android 平台提供了两类动画. 一类是Tween动画,就是对场景里的对象不断的进行图像变化来产生动画效果(旋转.平移.放缩和渐变).第二类就是 Frame动画,即顺序的播放事先做好的图像,与gi ...

  6. Android学习笔记-tween动画之java实现

    Android动画分为Tween动画和Frame动画,近期学习了,体tween动画,现在讲学习的心得以及相关知识介绍如下. Tween又称为补间动画,可以把对象进行缩小.放大.旋转和渐变等操作.   ...

  7. Angular2学习笔记(1)

    Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...

  8. 学习笔记-- android动画简述

    android支持三种类型的动画: ·属性动画  一种补间动画,通过在目标对象的任何属性的两个值之间应用赠了变化,可以生成一种动画效果.这种动画可以用来生成各种效果,例如:改变视图的颜色.透明条.淡入 ...

  9. 4月13日学习笔记——jQuery动画

    基本动画函数 $("#divPop").show(); $("#divPop").hide(); $("#divPop").toggle() ...

随机推荐

  1. kali linux安装搜狗输入法的方法

    kali linux安装搜狗输入法比较麻烦,因为有很多依赖项,不过安装好就很好用,觉得麻烦的一般安装ibus,经典,也常更新. 下面就说说怎么安装搜狗输入法: 先去http://http.kali.o ...

  2. jQuery对于动态生成的元素绑定无效的问题~~

    问题:很多时候发现,对动态生成的元素绑定click事件是无效的- 原因:直接绑定到动态生成的元素是无效的,是因为Jquery扫描文档找出所有的$(‘’)元素,并把函数绑定到每个元素的click事件上, ...

  3. Python3数据库模块(sqlite3,SQLite3)

    一.sqlite命令 创建数据库:在控制台sqlite3 name .databases     查看数据库 .tables            查看表格名 databaseName .dump & ...

  4. Filecoin2017年Q4进度更新(完整版)

    亲爱的Filecoin支持者.矿工.用户.投资者和广大的社区朋友们, 自从Token销售完成以后,我们便开始集中精力把Filecoin项目从设想变为现实-从实现Filecoin协议的核心代码到打造我们 ...

  5. 51ak带你看MYSQL5.7源码1:main入口函数

    从事DBA工作多年 MYSQL源码也是头一次接触 尝试记录下自己看MYSQL5.7源码的历程 目录: 51ak带你看MYSQL5.7源码1:main入口函数 51ak带你看MYSQL5.7源码2:编译 ...

  6. MongoDb进阶实践之二 如何在Windows上配置MongoDB

    一.引言            上一篇文章,我介绍了如何在Linux系统上安装和配置MongoDB,其实都不是很难,不需要安装和编译,省去了Make && Make Install 命 ...

  7. poj-1031-fence(不是我写的,我只是想看着方便)

    题目大意: 有一个光源位于(0,0)处,一个多边形的围墙.围墙是“全黑”的,不透光也不反射光.距光源r处的光强度为I0=k/r,k为常数. 一块无穷窄高为h的墙上围墙受到的照度为dI=I0*|cosα ...

  8. 设计模式 --> (17)状态模式

    状态模式 允许一个对象在其内部状态改变时改变它的行为.对象看起来似乎修改了它的类.它有两种使用情况: (1)一个对象的行为取决于它的状态, 并且它必须在运行时刻根据状态改变它的行为. (2)一个操作中 ...

  9. 通过jersey-client客户端调用Jersey的Web服务模拟CURD

    一.总体说明 通过jersey-client接口,创建客户端程序,来调用Jersey实现的RESTful服务,实现增.删.改.查等操作. 服务端主要是通过内存的方式,来模拟用户的增加.删除.修改.查询 ...

  10. DOM4j的修改删除方式

    ?xml version="1.0" encoding="UTF-8"?> <contactList> <contact id=&quo ...