2022-07-03

提示： angular2时animation代码在核心模块里面（@angular/core里面）;到了angular4.0时animation从核心模块中提取出来作为一个单独的模块，

这样可以在不用动效时可以不引入进来.

animation模块特性方法：

1、trigger 触发器

`trigger`是一个动画特定的函数，触发器，`trigger`将根据提供的`name`值创建一个动画触发器

trigger("myAnimationTrigger", [
       state(...),
       state(...),
       transition(...),
       transition(...)
])

2、state状态

`state`是一个动画特定的函数，状态，每个状态都定义了最终的样式(动效过后的最终样子);通过改变状态(state)来触发(trigger)动画(animate)

state('A', style...)
//状态除了可以自己定义一个名字外，还有有很多特殊表示状态
*(通配符)状态
*(通配符)状态匹配任何动画状态
如：1、当该元素的状态从active变成任何其它状态时，active => *转场都会生效
    2、当在任意两个状态之间切换时，* => *转场都会生效，下图情况都会发行动效转场

void

void的特殊状态，它表示元素没有被附加到视图。这种情况可能是由于它尚未被添加进来或者已经被移除了

如：如当一个元素离开视图时，* => void转场就会生效，而不管它在离场以前是什么状态。下图state的两个状态‘void’和‘in’，发生转场情况

3、transition转换

`transition`是一个动画特定的函数，负责定义各种 state 之间错综复杂的转换关系

transition('A => B', animate...)
transition('A  B', animate...)
transition('* => *', animate...) 
transition(':enter', animate...)
transition(':leave', animate...)
transition('* => void', animate...)  也等于 :leave

transition('void => *', animate...)  也等于 :enter

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,表示里的动画同时进行。

4、style 样式

`style`是一个动画特定的函数，就是定义 css

style({backgroundColor: "red"})

5、animate动画

`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})
]))
//offset 0.3 是百分比  这里和css3的动画是一样意思，

6、group组

`group`是一个动画特定的函数，指定一个并行运行的动画步骤列表。分组动画是当一系列样式必须在不同的开始/结束时间进行动画/关闭时很有用。

group([
  animate("1s", { background: "black" }))
  animate("2s", { color: "white" }))
])

7、keyframes关键帧

`keyframes`是一个动画特定的函数，可以描述每个样式条目是如何应用的，以及在什么点动画弧（很像CSS关键帧动画）

animate("5s", keyframes([
  style({ backgroundColor: "red", offset: 0 }),
  style({ backgroundColor: "blue", offset: 0.2 }),
  style({ backgroundColor: "orange", offset: 0.3 }),
  style({ backgroundColor: "black", offset: 1 })
]))

// 表示百分比，时间百分比
//如果在样式条目中没有使用“offset”值，则offset的值会自动计算

animate("5s", keyframes([
  style({ backgroundColor: "red" }) // offset = 0
  style({ backgroundColor: "blue" }) // offset = 0.33
  style({ backgroundColor: "orange" }) // offset = 0.66
  style({ backgroundColor: "black" }) // offset = 1
]))

8、sequence顺序

`sequence`是一个动画特定的函数，指定逐个运行的动画步骤列表，这个也就是和group特性正好相反，一个同时进行，一个按先后顺序一个一个的进行

sequence([
  style({ opacity: 0 })),
  animate("1s", { opacity: 1 }))

])
//其实默认就是按sequence进行的，所以上面也可以这样写 如下
[
  style({ opacity: 0 })),
  animate("1s", { opacity: 1 }))
]

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
    }
})
//如下面我定一个动效用到上面的定义。

export const fadel = trigger("fadel",[
  transition("void=>*",[
    useAnimation(fadeAnimation, {
      params: {
        time: '2s',
        start: 0,
        end: 1
      }
    })
  ])
]);

10、query查询

`query`是一个动画特定的函数，用于在当前元素中查找一个或多个内部元素在序列中进行动画。提供的动画步骤已应用查询元素（默认情况下，提供了一个数组，然后这将是作为动画序列处理）。query（）被设计为收集多个元素，并通过使用内部工作`element.querySelectorAll`。可以提供一个额外的选项对象可用于限制要收集的物品总量。query(‘div’, [

  animate(...),
  animate(...)
], { limit: 1 }) //'limit'限制动画个数
//query（）默认情况下会在找到零个项目时抛出一个错误。如果查询将“optional”标志设置为true，则该错误将被忽略。
query('.some-element-that-may-not-be-there', [
  animate(...),
  animate(...)
], { optional: true })
//特殊选择器值,查询中的选择器值可以收集包含角度特定的元素
//使用特殊的伪选择器标记 如下几个
- 使用query（“：enter”）`/`query（“：leave”）查询新插入
- 使用query（“：animating”）查询所有当前的动画元素
- 使用query（“@ triggerName”）查询包含动画触发器的元素
- 使用query（“@ *”）查询包含动画触发器的所有元素
- 使用`query（“：self”）`将当前元素包含到动画序列中

query(':self, .record:enter, .record:leave, @subTrigger', [...])
//demo

@Component({
  selector: 'inner',
  template: `
    

      
Title

      

        Blah blah blah
      

    

  `,
  animations: [
   trigger('queryAnimation', [
     transition('* => goAnimate', [
       // 隐藏内部元素
       query('h1', style({ opacity: 0 })),
       query('.content', style({ opacity: 0 })),
       // 一个接一个地动画内部元素
       query('h1', animate(1000, style({ opacity: 1 })),
       query('.content', animate(1000, style({ opacity: 1 })),
     ])
   ])
 ]
})
class Cmp {
  exp = '';
  goAnimate() {
    this.exp = 'goAnimate';
  }

11、stagger

`stagger`是一个动画特定的函数，通过在每个被查询的项目被动画之后发布时间间隔来工作。

//在下面的例子中，有一个容器元素包装了一系列被打印的项目
//由ngFor。容器元素包含稍后将设置的动画触发器
 //查询每个内部项目。
<button (click)="toggle()">Show / Hide Items

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