refactor(animations): add an onStart handler for AnimationPlayer (#10360)

modules/@angular/core/src/animation/animation_group_player.ts

@@ -12,7 +12,8 @@ import {Math} from '../facade/math';
 import {AnimationPlayer} from './animation_player';
 
 export class AnimationGroupPlayer implements AnimationPlayer {
-  private _subscriptions: Function[] = [];
+  private _onDoneFns: Function[] = [];
+  private _onStartFns: Function[] = [];
   private _finished = false;
   private _started = false;
 
@@ -41,14 +42,16 @@ export class AnimationGroupPlayer implements AnimationPlayer {
       if (!isPresent(this.parentPlayer)) {
         this.destroy();
       }
-      this._subscriptions.forEach(subscription => subscription());
-      this._subscriptions = [];
+      this._onDoneFns.forEach(fn => fn());
+      this._onDoneFns = [];
     }
   }
 
   init(): void { this._players.forEach(player => player.init()); }
 
-  onDone(fn: Function): void { this._subscriptions.push(fn); }
+  onStart(fn: () => void): void { this._onStartFns.push(fn); }
+
+  onDone(fn: () => void): void { this._onDoneFns.push(fn); }
 
   hasStarted() { return this._started; }
 
@@ -56,7 +59,11 @@ export class AnimationGroupPlayer implements AnimationPlayer {
     if (!isPresent(this.parentPlayer)) {
       this.init();
     }
-    this._started = true;
+    if (!this.hasStarted()) {
+      this._onStartFns.forEach(fn => fn());
+      this._onStartFns = [];
+      this._started = true;
+    }
     this._players.forEach(player => player.play());
   }
 

modules/@angular/core/src/animation/animation_player.ts

@@ -14,7 +14,8 @@ import {scheduleMicroTask} from '../facade/lang';
  * @experimental Animation support is experimental.
  */
 export abstract class AnimationPlayer {
-  abstract onDone(fn: Function): void;
+  abstract onDone(fn: () => void): void;
+  abstract onStart(fn: () => void): void;
   abstract init(): void;
   abstract hasStarted(): boolean;
   abstract play(): void;
@@ -32,19 +33,27 @@ export abstract class AnimationPlayer {
 }
 
 export class NoOpAnimationPlayer implements AnimationPlayer {
-  private _subscriptions: any[] /** TODO #9100 */ = [];
+  private _onDoneFns: Function[] = [];
+  private _onStartFns: Function[] = [];
   private _started = false;
   public parentPlayer: AnimationPlayer = null;
   constructor() { scheduleMicroTask(() => this._onFinish()); }
   /** @internal */
   _onFinish() {
-    this._subscriptions.forEach(entry => { entry(); });
-    this._subscriptions = [];
+    this._onDoneFns.forEach(fn => fn());
+    this._onDoneFns = [];
   }
-  onDone(fn: Function): void { this._subscriptions.push(fn); }
+  onStart(fn: () => void): void { this._onStartFns.push(fn); }
+  onDone(fn: () => void): void { this._onDoneFns.push(fn); }
   hasStarted(): boolean { return this._started; }
   init(): void {}
-  play(): void { this._started = true; }
+  play(): void {
+    if (!this.hasStarted()) {
+      this._onStartFns.forEach(fn => fn());
+      this._onStartFns = [];
+    }
+    this._started = true;
+  }
   pause(): void {}
   restart(): void {}
   finish(): void { this._onFinish(); }

modules/@angular/core/src/animation/animation_sequence_player.ts

@@ -13,7 +13,8 @@ import {AnimationPlayer, NoOpAnimationPlayer} from './animation_player';
 export class AnimationSequencePlayer implements AnimationPlayer {
   private _currentIndex: number = 0;
   private _activePlayer: AnimationPlayer;
-  private _subscriptions: Function[] = [];
+  private _onDoneFns: Function[] = [];
+  private _onStartFns: Function[] = [];
   private _finished = false;
   private _started: boolean = false;
 
@@ -50,14 +51,16 @@ export class AnimationSequencePlayer implements AnimationPlayer {
       if (!isPresent(this.parentPlayer)) {
         this.destroy();
       }
-      this._subscriptions.forEach(subscription => subscription());
-      this._subscriptions = [];
+      this._onDoneFns.forEach(fn => fn());
+      this._onDoneFns = [];
     }
   }
 
   init(): void { this._players.forEach(player => player.init()); }
 
-  onDone(fn: Function): void { this._subscriptions.push(fn); }
+  onStart(fn: () => void): void { this._onStartFns.push(fn); }
+
+  onDone(fn: () => void): void { this._onDoneFns.push(fn); }
 
   hasStarted() { return this._started; }
 
@@ -65,7 +68,11 @@ export class AnimationSequencePlayer implements AnimationPlayer {
     if (!isPresent(this.parentPlayer)) {
       this.init();
     }
-    this._started = true;
+    if (!this.hasStarted()) {
+      this._onStartFns.forEach(fn => fn());
+      this._onStartFns = [];
+      this._started = true;
+    }
     this._activePlayer.play();
   }