angular 2 animation 結構筆記 version 4.2.2

import {
  Component,  Input,  OnInit
} from '@angular/core';
import {
  trigger,  state,  style,  animate,  transition,  group,  sequence,  keyframes,  useAnimation,  stagger,  animateChild,  query,  animation
} from '@angular/animations';

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

@Component({
  selector: 'app-animate',
  templateUrl: './animate.component.html',
  styleUrls: ['./animate.component.css'],
  animations: [
    trigger('state', [
      state('pointA', style({
        left: '0%'
      })),
      transition('pointA => pointB', [
        style({
          border: "3px solid #000"
        }),
        animate(1000, style({
          left: "100%"
        })),
        group([
          //basic animation
        ]),
        sequence([
          //basic animation 
        ]),
        query(":leave", [
          //basic animation
        ]),
        query(":leave", stagger(1000, [
          //basic animation
        ])),
        useAnimation(fadeAnimation, {
          params: {
            time: '2s',
            start: 1,
            end: 0
          }
        })
      ])
    ])
  ]
})
export class AnimateComponent implements OnInit {
  state = 'pointA';
  constructor() { }
  ngOnInit() {
  }
}

　　

源碼連接：https://github.com/angular/angular/blob/master/packages/animations/src/animation_metadata.ts

在開始前，咱們先無論如何寫動畫，先看trigger是什麼，全部的trigger均可以直接綁定element

<div [@state]="state1" ></div>

像這樣，只要state1 有改變，trigger都會觸發。
在trigger世界裏，是能控制state 和 transition。

 

state是轉場的「場」

state("void", style({ height: 0 })) //void是保留字，是沒有東西
state("*", style({ height: 0 }))  //*是保留字，是default
state("closed", style({ height: 0 }))
state("open, visible", style({ height: "*" }))

　　　　

transition是轉場，state去到下一個state

transition("on => off", animate(500)),
transition("on <=> off", animate(500)),
transition("on => off, off => void", animate(500)),
transition("void => *", animate(500)),
transition("* => *", animate("1s 0s")),
transition((fromState, toState) => {
   return fromState == "off" && toState == "on";
}, animate("1s 0s"))
transition(":enter", animate(500)),
transition(":leave", animate(500)),

　　

當了解state 和 transition 後，咱們須要瞭解基礎動畫 style 和 animate

style 使用方式和css同樣，這裏就很少說

 

animate 使用方式就不少 （能夠控制過渡時長，延遲，和過渡動做，結束動畫）

animate(500, style(...))
animate("1s", style(...))
animate("100ms 0.5s", style(...))
animate("5s ease", style(...))
animate("5s 10ms cubic-bezier(.17,.67,.88,.1)", style(...))
animate(500, style({ background: "red" }))
animate(500, keyframes([
  style({ background: "blue" })),
  style({ background: "red" }))
])

animate 對象裏能夠有style 和 keyframe，懂css的都明白。

 

動畫基礎講述的是style 和 animate， 高級動畫是group， sequence， query，stagger。全部的高級都基於動畫基礎的組裝。

 

group是把多個基礎給包在一塊兒，同時觸發

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

　　

sequence就相對的，是一個一個觸發。（默認功能）

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

若是你不要特意包一個sequence，你能夠直接寫基礎動畫，效果是同樣的

 

query是能夠尋找指定的子層進行動畫，尋找的方式有

 query('div', [
   animate(...),
   animate(...)
 ], { limit: 1 })

 query('.some-element-that-may-not-be-there', [
   animate(...),
   animate(...)
 ], { optional: true })

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

 - Querying for newly inserted/removed elements using `query(":enter")`/`query(":leave")`
 - 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")`

limit 是聲明限制element的數量, optional 是若是query可能沒有找到，就得聲明

:enter / :leave 等等都是特別的表達尋找式，這裏很少說

 

stagger 是間隔，一般用在ngFor，場景是當你須要刪除多個元素時，你須要每個元素都是間隔離開，而不是同時離開

query(':leave', [
  stagger(100, [
  animate('0.5s', style({ opacity: 0 }))
  ])
]),
query(':enter', [
  style({ opacity: 0 }),
  stagger(100, [
    animate('0.5s', style({ opacity: 1 }))
  ])
])

調用query才能使用stagger，由於query才能夠選着多個元素

 

animateChild() 這裏有bug，在不調用這功能時，子層的trigger是不會觸發的，可是目前就是會觸發……

query('@childAnimation', 
   animateChild()
))

query('@childAnimation', stagger(100, [
   animateChild()
]))

　　

UseAnimate是一個調用方法，也是複用的部分

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

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

　　

最後就是全部的基礎動畫都是能夠組裝的，即便我沒有給出全部的例子。在組裝必定是在array裏 []，只要是邏輯就能裝的，transition的例子就是這樣。