[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