import * as PIXI from 'pixi.js' ; import * as element from './element' ; import { Element } from './element/element' ; import { MaskElement } from './element/mask' ; import { AEDataLoader } from './loader' ; export interface AEData { h : number ; w : number ; op : number ; ip : number ; layers : Element [ ] ; assets : any [ ] ; fr : number ; v : string ; } export interface AEOption { [ key ] : any ; } example class extends PIXI . Container memberof export class AfterEffects extends PIXI . Container { finder : element . ElementFinder ; inFrame : number ; outFrame : number ; frameRate : number ; version : string ; layers : Element [ ] ; textures : any [ ] ; textureCacheIds : any ; player : element . ElementPlayer ; deltaPlayer : element . ElementDeltaPlayer ; masks : { maskLayer : Element ; maskTargetLayer : Element ; } [ ] ; noreplay : boolean ; [ key ] : any ; constructor ( ) { super ( ) ; this . finder = new element . ElementFinder ( ) ; } memberof static param { string } param opt param { boolean } opt . noreplay return { Promise } static fromJSONPath ( jsonPath , opt ) { return new AEDataLoader ( ) . loadJSON ( jsonPath ) . then ( ( data ) => { const ae = new AfterEffects ( ) ; ae . setup ( data , opt || { } ) ; return ae ; } ) ; } memberof static param { object } param opt param { boolean } opt . noreplay return { PIXI . AfterEffects } static fromData ( data , opt ) { const ae = new AfterEffects ( ) ; ae . setup ( data , opt || { } ) ; return ae ; } memberof private param { object } param { object } setup ( data , opt ) { this . width = data . w ; this . height = data . h ; this . inFrame = data . ip ; this . outFrame = data . op ; this . frameRate = data . fr ; this . version = data . v ; this . layers = data . layers ; this . textures = data . assets . filter ( asset => ! ! asset . texture ) . map ( asset => asset . texture ) ; this . textureCacheIds = this . textures . filter ( texture => texture . textureCacheIds && texture . textureCacheIds . length > 0 ) . map ( texture => texture . textureCacheIds [ 0 ] ) ; this . player = new element . ElementPlayer ( this . frameRate , this . inFrame , this . outFrame , ( frame ) => { this . updateWithFrame ( frame ) ; } , ( ) => { this . emit ( 'completed' , this ) ; } ) ; this . deltaPlayer = new element . ElementDeltaPlayer ( this . frameRate , this . inFrame , this . outFrame , ( frame ) => { this . updateWithFrame ( frame ) ; } , ( ) => { this . emit ( 'completed' , this ) ; } ) ; Object . keys ( opt ) . forEach ( ( key ) => { this [ key ] = opt [ key ] ; } ) ; const layerIndexMap = { } ; this . layers . forEach ( ( layer ) => { layerIndexMap [ layer . index ] = layer ; } ) ; this . layers . reverse ( ) . forEach ( ( layer ) => { layer . frameRate = this . frameRate ; layer . opt = opt ; if ( layer . hasMask ) { if ( ! this . masks ) this . masks = [ ] ; const maskLayer = new MaskElement ( layer ) ; this . addChild ( layer ) ; layer . addChild ( maskLayer ) ; this . masks . push ( { maskTargetLayer : layer , maskLayer , } ) ; } else if ( layer . hasParent ) { const parentLayer = layerIndexMap [ layer . parentIndex ] ; parentLayer . addChild ( layer ) ; } else { this . addChild ( layer ) ; } } ) ; this . player . showFirstFrame ( ) ; this . deltaPlayer . showFirstFrame ( ) ; } memberof param { string } return { Element } find ( name ) { return this . finder . findByName ( name , this ) ; } private memberof param { number } updateMask ( frame ) { this . masks . forEach ( ( maskData ) => { const drawnMask = maskData . maskLayer . __updateWithFrame ( frame ) ; if ( drawnMask ) { maskData . maskTargetLayer . mask = maskData . maskLayer ; } else { ( maskData . maskTargetLayer as { mask : PIXI . Graphics | PIXI . Sprite | null ; } ) . mask = null ; } } ) ; } memberof param { number } update ( nowTime ) { if ( ! this . layers ) return ; this . player . update ( nowTime ) ; this . layers . forEach ( ( layer ) => { layer . update ( nowTime ) ; } ) ; } memberof param { number } updateByDelta ( deltaTime ) { if ( ! this . layers ) return ; this . deltaPlayer . update ( deltaTime ) ; this . layers . forEach ( ( layer ) => { layer . updateByDelta ( deltaTime ) ; } ) ; } memberof param { number } updateWithFrame ( frame ) { if ( this . masks ) { this . updateMask ( frame ) ; } if ( this . noreplay ) { this . layers = this . layers . filter ( ( layer ) => { if ( layer . outFrame < frame ) { this . removeChild ( layer ) ; layer . destroy ( ) ; return false ; } layer . updateWithFrame ( frame ) ; return true ; } ) ; } else { this . layers . forEach ( ( layer ) => { layer . updateWithFrame ( frame ) ; } ) ; } } memberof param { boolean } play ( isLoop ) { this . player . play ( isLoop ) ; this . deltaPlayer . play ( isLoop ) ; } memberof pause ( ) { this . player . pause ( ) ; this . deltaPlayer . pause ( ) ; } memberof resume ( ) { this . player . resume ( ) ; this . deltaPlayer . resume ( ) ; } memberof stop ( ) { this . player . stop ( ) ; this . deltaPlayer . stop ( ) ; } }