angular动画基本动画封装库

angular动画很强大,但在组件中写一大堆比较碍眼,本例对常用的动画效果进行独立封装,方便调用,保持基本动画效果的一致性.减少写动画代码的痛苦.

本例定义了淡入/淡出/展开/收缩/飞入/飞出/放大/缩小效果,保存为独立ts文件导入组件即可使用.

使用方法

组件中

import { fadeIn,fadeOut,stretch,shrink,flyIn,flyOut,zoomIn,zoomOut } from './sim-anim.ts';

@Component({
// ...
  animations: [fadeIn,zoomOut]
})

模板中

<div @flyIn @flyOut>...</div>

或

import { simAnim } from './sim-anim.ts';
@Component({
// ...
  animations: [simAnim]
})

模板中

<div [@]simAnim="'flyIn'">...</div>

源

//sim-anim.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
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.2,1)',inOutBack: time + ' cubic-bezier(0.68,-0.55,0.27,1.55)',inOutCubic: time + ' cubic-bezier(0.65,0.05,0.36,inOutQuadratic: time + ' cubic-bezier(0.46,0.03,0.52,0.96)',inOutSine: time + ' cubic-bezier(0.45,0.55,0.95)'
}

// 动画配置

var opts = {
  fadeIn: [
    style({ opacity: 0 }),animate(styles.inOutBack,style({ opacity: 1 })),],fadeOut: [
    style({ opacity: 1 }),style({ opacity: 0 }))
  ],shrink: [
    style({ height: '*' }),style({ height: 0 }))
  ],stretch: [
    style({ height: '0' }),style({ height: '*' }))
  ],flyIn: [
    style({ transform: 'translateX(-100%)' }),style({ transform: '*' }))
  ],flyOut: [
    style({ transform: '*' }),style({ transform: 'translateX(-100%)' }))
  ],zoomIn: [
    style({ transform: 'scale(.5)' }),zoomOut: [
    style({ transform: '*' }),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',opts.stretch)])]
export const shrink = [trigger('shrink',opts.shrink)])]
export const flyIn = [trigger('flyIn',opts.flyIn)])]
export const flyOut = [trigger('flyOut',opts.flyOut)])]
export const zoomIn = [trigger('zoomIn',opts.zoomIn)])]
export const zoomOut = [trigger('zoomOut',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)
  ])
]