[TOC]
# 關于Web Animations API
Web Animations API是一種新的驅動網頁元素動畫的JavaScript API,它為瀏覽器和開發人員提供了一種用于描述DOM元素動畫的通用方法。有了Web Animations API,我們可以不依賴于CSS3或js插件,就可以制作出炫酷的網頁動畫效果。
目前,Web Animations API只在Firefox 48+和Chrome 36+瀏覽器中有效。對于其它瀏覽器,可以通過一個補丁文件來實現Web Animations API。
首先你要知道Angular 2 使用的 Web Animations API 這個動畫特性,目前不是所有瀏覽器都支持,iOS Safari就不支持,如果你想將應用部署到iOS上,這是一個問題。還好,W3C官方為開發者提供了[polyfill](https://github.com/web-animations/web-animations-js)插件,是我們能通過插件來解決瀏覽器的支持問題,可以使動畫在iOS上也能運行。
將 web-animations.min.js 和 web-animations.min.js.map 添加到您項目中 `src/assets/js/` 文件夾中的文件夾(您可能需要創建 js文件夾)。 將下列行添加到 index.html 文件。
~~~
<script src="web-animations.min.js"></script>
~~~
同CSS動畫一樣,甚至可以使用一些賽貝爾曲線,例如cubic-bezier(0.4, 0, 0.2, 1)。我們可以在這兩個網站自定義挑選賽貝爾曲線的表達式:
http://cubic-bezier.com
http://easings.net
同CSS一樣,并不是所有的賽貝爾曲線都能被使用的,所以關鍵幀的設置必不可少
# 第三方動畫庫
上述的動畫我們直接寫在了組件中,更多時候往往需要把它們抽象出來,形成一個自己的動畫庫,可以在各個組件調用。下面這個簡單的庫來自于segmentfault社區:
~~~
// animate.ts
import {
trigger,
state,
style,
transition,
animate,
keyframes
} from '@angular/animations';
// 動畫時間線
var time = '300ms'
var styles = {
ease: time + ' ease ',
linear: time + ' linear ',
easeIn: time + ' ease-in',
easeOut: time + ' ease-out',
stepStart: time + ' step-start',
stepEnd: time + ' step-end',
easeInOut: time + ' ease-in-out',
faseOutSlowIn: time + ' cubic-bezier(0.4, 0, 0.2, 1)',
inOutBack: time + ' cubic-bezier(0.68, -0.55, 0.27, 1.55)',
inOutCubic: time + ' cubic-bezier(0.65, 0.05, 0.36, 1)',
inOutQuadratic: time + ' cubic-bezier(0.46, 0.03, 0.52, 0.96)',
inOutSine: time + ' cubic-bezier(0.45, 0.05, 0.55, 0.95)'
}
// 動畫配置
var opts = {
fadeIn: [
style({ opacity: 0 }),
animate(styles.inOutBack, style({ opacity: 1 })),
],
fadeOut: [
style({ opacity: 1 }),
animate(styles.inOutBack, style({ opacity: 0 }))
],
shrink: [
style({ height: '*' }),
animate(styles.inOutBack, style({ height: 0 }))
],
stretch: [
style({ height: '0' }),
animate(styles.inOutBack, style({ height: '*' }))
],
flyIn: [
style({ transform: 'translateX(-100%)' }),
animate(styles.inOutBack, style({ transform: '*' }))
],
flyOut: [
style({ transform: '*' }),
animate(styles.inOutBack, style({ transform: 'translateX(-100%)' }))
],
zoomIn: [
style({ transform: 'scale(.5)' }),
animate(styles.inOutBack, style({ transform: '*' }))
],
zoomOut: [
style({ transform: '*' }),
animate(styles.inOutBack, style({ transform: 'scale(.5)' }))
]
}
// 導出動畫時間線定義,供自定義動畫的時候使用
export const animStyle = styles
// 導出動畫
export const fadeIn = [trigger('fadeIn', [transition('void => *', opts.fadeIn)])]
export const fadeOut = [trigger('fadeOut', [transition('* => void', opts.fadeOut)])]
export const stretch = [trigger('stretch', [transition('void => *', opts.stretch)])]
export const shrink = [trigger('shrink', [transition('* => void', opts.shrink)])]
export const flyIn = [trigger('flyIn', [transition('void => *', opts.flyIn)])]
export const flyOut = [trigger('flyOut', [transition('* => void', opts.flyOut)])]
export const zoomIn = [trigger('zoomIn', [transition('void => *', opts.zoomIn)])]
export const zoomOut = [trigger('zoomOut', [transition('* => void', opts.zoomOut)])]
export const simAnim = [
trigger('simAnim', [
transition('* => fadeIn', opts.fadeIn),
transition('* => fadeIn', opts.fadeOut),
transition('* => shrink', opts.shrink),
transition('* => stretch', opts.stretch),
transition('* => flyIn', opts.flyIn),
transition('* => flyOut', opts.flyOut),
transition('* => zoomIn', opts.zoomIn),
transition('* => zoomOut', opts.zoomOut)
])
]
~~~
上述代碼定義了8種常用動畫效果,還可以自定義time變量修改動畫速度。在使用時,可以在組件直接全部引入:
~~~
import { simAnim } from './animate.ts';
~~~
亦或是單獨引入某個動畫:
~~~
import { fadeIn } from './animate.ts';
~~~
然后在組件元數據中加入動畫數組:
~~~
@Component({
// ...
animations: [simAnim]
})
~~~
然后在模板中加入:`<div @flyIn @flyOut>...</div>`,也可以寫成`<div [@simAnim]="'flyIn'">...</div>`
如果上述代碼仍不滿足需求,可以引入其它開源項目,比如:https://github.com/jiayihu/ng-animate
它是一個更強大的開源項目,動畫演示及說明文檔非常詳細,這里就不再贅述。
## 其他動畫庫
[animatelo.js](https://github.com/gibbok/animatelo)是一款基于Web Animations API的js動畫庫插件。通過animatelo.js動畫庫插件可以制作出63種炫酷的過渡動畫效果,這些動畫效果和animate.css相似。
A Simple Animation Plugin for Angular https://a-jie.github.io/NgxAni/
https://forum.ionicframework.com/t/using-angular-2-animations-with-ionic-2/61858/7
https://www.joshmorony.com/using-the-web-animations-api-in-ionic-2/
https://www.joshmorony.com/create-an-animated-login-screen-in-ionic-2/
https://blog.csdn.net/MetaphorXi/article/details/78180410
- PWA 概念
- Immutable
- Angular 基礎概念
- 入門參考
- Angular 更新總結
- Angular 生態系統
- Rx.js
- Ngrx
- CQRS/ES 模式
- Angular 5 詳解
- 測試
- 定義共享模塊
- 懶路由加載
- angular組件
- 雙向綁定及變化檢測
- 樣式
- ionic 3詳解
- ionic3
- ionic 插件
- Ionic 添加動畫
- Ghost-Loading
- 打包發布
- Android上架國內應用市場流程
- 總結
- 文章
- 問題合集
- Cordova
- 插件開發指南
- Android插件開發指南-官網
- IOS插件開發指南-官網
- Hooks 編寫
- 橋接技術
- ===cordova插件收集===
- 相關主題-官網
- 實戰-自定義插件流程
- UI 及 相關資源