Ionic 添加動畫 · Angular 與 Cordova

[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