import { Component , AfterViewInit } from "@angular/core" ; import { Page } from "@nativescript/core" ; import { View } from "@nativescript/core" ; import { Animation , AnimationDefinition } from "@nativescript/core" ; let view1 ; let view2 ; let view3 ; let view4 ; @ Component ( { moduleId : module . id , templateUrl : "./multiple-views.component.html" , styleUrls : [ "./../style.css" ] , } ) export class MultipleViewsComponent implements AfterViewInit { constructor ( private page ) { } ngAfterViewInit ( ) { view1 = this . page . getViewById < View > ( "view1" ) ; view2 = this . page . getViewById < View > ( "view2" ) ; view3 = this . page . getViewById < View > ( "view3" ) ; view4 = this . page . getViewById < View > ( "view4" ) ; } animate ( ) { let definitions = new Array < AnimationDefinition > ( ) ; let a1 = { target : view1 , translate : { x : 200 , y : 0 } , duration : 3000 } ; definitions . push ( a1 ) ; let a2 = { target : view2 , translate : { x : 0 , y : 200 } , duration : 3000 } ; definitions . push ( a2 ) ; let a3 = { target : view3 , translate : { x : - 200 , y : 0 } , duration : 3000 } ; definitions . push ( a3 ) ; let a4 = { target : view4 , translate : { x : 0 , y : - 200 } , duration : 3000 } ; definitions . push ( a4 ) ; let animationSet = new Animation ( definitions ) ; animationSet . play ( ) . then ( ( ) => { console . log ( "Animation finished" ) ; } ) . catch ( ( e ) => { console . log ( e . message ) ; } ) ; } reset ( ) { view1 . translateX = 0 ; view1 . translateY = 0 ; view2 . translateX = 0 ; view2 . translateY = 0 ; view3 . translateX = 0 ; view3 . translateY = 0 ; view4 . translateX = 0 ; view4 . translateY = 0 ; } }