feat(animations): Update types for TypeScript nullability support

Closes #15870

packages/animations/browser/src/dsl/animation_timeline_instruction.ts

@@ -13,12 +13,12 @@ export interface AnimationTimelineInstruction extends AnimationEngineInstruction
   duration: number;
   delay: number;
   totalTime: number;
-  easing: string;
+  easing: string|null|undefined;
 }
 
 export function createTimelineInstruction(
     keyframes: ɵStyleData[], duration: number, delay: number,
-    easing: string): AnimationTimelineInstruction {
+    easing: string | null | undefined): AnimationTimelineInstruction {
   return {
     type: AnimationTransitionInstructionType.TimelineAnimation,
     keyframes,

packages/animations/browser/src/dsl/animation_timeline_visitor.ts

@@ -112,13 +112,13 @@ export declare type StyleAtTime = {
 
 export class AnimationTimelineContext {
   currentTimeline: TimelineBuilder;
-  currentAnimateTimings: AnimateTimings;
+  currentAnimateTimings: AnimateTimings|null;
   previousNode: AnimationMetadata = <AnimationMetadata>{};
   subContextCount = 0;
 
   constructor(
       public errors: any[], public timelines: TimelineBuilder[],
-      initialTimeline: TimelineBuilder = null) {
+      initialTimeline?: TimelineBuilder) {
     this.currentTimeline = initialTimeline || new TimelineBuilder(0);
     timelines.push(this.currentTimeline);
   }
@@ -262,7 +262,7 @@ export class AnimationTimelineVisitor implements AnimationDslVisitor {
   }
 
   private _applyStyles(
-      styles: ɵStyleData, easing: string, treatAsEmptyStep: boolean,
+      styles: ɵStyleData, easing: string|null, treatAsEmptyStep: boolean,
       context: AnimationTimelineContext) {
     if (styles.hasOwnProperty('easing')) {
       easing = easing || styles['easing'] as string;
@@ -284,10 +284,10 @@ export class AnimationTimelineVisitor implements AnimationDslVisitor {
     }
 
     const startTime = context.currentTimeline.duration;
-    const duration = context.currentAnimateTimings.duration;
+    const duration = context.currentAnimateTimings !.duration;
     const innerContext = context.createSubContext();
     const innerTimeline = innerContext.currentTimeline;
-    innerTimeline.easing = context.currentAnimateTimings.easing;
+    innerTimeline.easing = context.currentAnimateTimings !.easing;
 
     ast.steps.forEach((step: AnimationStyleMetadata, i: number) => {
       const normalizedStyles = normalizeStyles(step.styles);
@@ -311,21 +311,20 @@ export class AnimationTimelineVisitor implements AnimationDslVisitor {
 
 export class TimelineBuilder {
   public duration: number = 0;
-  public easing: string = '';
+  public easing: string|null = '';
-
   private _previousKeyframe: ɵStyleData = {};
   private _currentKeyframe: ɵStyleData;
   private _keyframes = new Map<number, ɵStyleData>();
   private _styleSummary: {[prop: string]: StyleAtTime} = {};
   private _localTimelineStyles: ɵStyleData;
   private _backFill: ɵStyleData = {};
-  private _currentEmptyStepKeyframe: ɵStyleData = null;
+  private _currentEmptyStepKeyframe: ɵStyleData|null = null;
+  private _globalTimelineStyles: ɵStyleData;
 
-  constructor(public startTime: number, private _globalTimelineStyles: ɵStyleData = null) {
+  constructor(public startTime: number, globalTimelineStyles?: ɵStyleData) {
     this._localTimelineStyles = Object.create(this._backFill, {});
-    if (!this._globalTimelineStyles) {
+    this._globalTimelineStyles =
-      this._globalTimelineStyles = this._localTimelineStyles;
+        globalTimelineStyles ? globalTimelineStyles : this._localTimelineStyles;
-    }
     this._loadKeyframe();
   }
 
@@ -341,7 +340,7 @@ export class TimelineBuilder {
     if (this._currentKeyframe) {
       this._previousKeyframe = this._currentKeyframe;
     }
-    this._currentKeyframe = this._keyframes.get(this.duration);
+    this._currentKeyframe = this._keyframes.get(this.duration) !;
     if (!this._currentKeyframe) {
       this._currentKeyframe = Object.create(this._backFill, {});
       this._keyframes.set(this.duration, this._currentKeyframe);
@@ -360,15 +359,15 @@ export class TimelineBuilder {
 
   private _updateStyle(prop: string, value: string|number) {
     this._localTimelineStyles[prop] = value;
-    this._globalTimelineStyles[prop] = value;
+    this._globalTimelineStyles ![prop] = value;
     this._styleSummary[prop] = {time: this.currentTime, value};
   }
 
   allowOnlyTimelineStyles() { return this._currentEmptyStepKeyframe !== this._currentKeyframe; }
 
-  setStyles(styles: ɵStyleData, easing: string = null, treatAsEmptyStep: boolean = false) {
+  setStyles(styles: ɵStyleData, easing: string|null = null, treatAsEmptyStep: boolean = false) {
     if (easing) {
-      this._previousKeyframe['easing'] = easing;
+      this._previousKeyframe !['easing'] = easing;
     }
 
     if (treatAsEmptyStep) {
@@ -405,7 +404,7 @@ export class TimelineBuilder {
 
   snapshotCurrentStyles() { copyStyles(this._localTimelineStyles, false, this._currentKeyframe); }
 
-  getFinalKeyframe() { return this._keyframes.get(this.duration); }
+  getFinalKeyframe(): ɵStyleData { return this._keyframes.get(this.duration) !; }
 
   get properties() {
     const properties: string[] = [];
@@ -467,5 +466,5 @@ function getOffset(ast: AnimationStyleMetadata): number {
       offset = styles['offset'] as number;
     }
   }
-  return offset;
+  return offset !;
 }

packages/animations/browser/src/dsl/animation_transition_factory.ts

@@ -24,7 +24,7 @@ export class AnimationTransitionFactory {
     this._animationAst = normalizedAst;
   }
 
-  match(currentState: any, nextState: any): AnimationTransitionInstruction {
+  match(currentState: any, nextState: any): AnimationTransitionInstruction|undefined {
     if (!oneOrMoreTransitionsMatch(this.matchFns, currentState, nextState)) return;
 
     const backupStateStyles = this._stateStyles['*'] || {};

packages/animations/browser/src/dsl/animation_trigger.ts

@@ -64,11 +64,12 @@ export class AnimationTrigger {
         nextStateStyles, []);
   }
 
-  matchTransition(currentState: any, nextState: any): AnimationTransitionInstruction {
+  matchTransition(currentState: any, nextState: any): AnimationTransitionInstruction|null {
     for (let i = 0; i < this.transitionFactories.length; i++) {
       let result = this.transitionFactories[i].match(currentState, nextState);
       if (result) return result;
     }
+    return null;
   }
 }
 

packages/animations/browser/src/dsl/animation_validator_visitor.ts

@@ -175,13 +175,13 @@ export class AnimationValidatorVisitor implements AnimationDslVisitor {
 
     const limit = length - 1;
     const currentTime = context.currentTime;
-    const animateDuration = context.currentAnimateTimings.duration;
+    const animateDuration = context.currentAnimateTimings !.duration;
     ast.steps.forEach((step, i) => {
       const offset = generatedOffset > 0 ? (i == limit ? 1 : (generatedOffset * i)) : offsets[i];
       const durationUpToThisFrame = offset * animateDuration;
       context.currentTime =
-          currentTime + context.currentAnimateTimings.delay + durationUpToThisFrame;
+          currentTime + context.currentAnimateTimings !.delay + durationUpToThisFrame;
-      context.currentAnimateTimings.duration = durationUpToThisFrame;
+      context.currentAnimateTimings !.duration = durationUpToThisFrame;
       this.visitStyle(step, context);
     });
   }
@@ -190,6 +190,6 @@ export class AnimationValidatorVisitor implements AnimationDslVisitor {
 export class AnimationValidatorContext {
   public errors: string[] = [];
   public currentTime: number = 0;
-  public currentAnimateTimings: AnimateTimings;
+  public currentAnimateTimings: AnimateTimings|null;
   public collectedStyles: {[propName: string]: StyleTimeTuple} = {};
 }

packages/animations/browser/src/render/animation_driver.ts

@@ -28,5 +28,5 @@ export abstract class AnimationDriver {
   static NOOP: AnimationDriver = new NoopAnimationDriver();
   abstract animate(
       element: any, keyframes: {[key: string]: string | number}[], duration: number, delay: number,
-      easing: string, previousPlayers?: any[]): any;
+      easing?: string|null, previousPlayers?: any[]): any;
 }

packages/animations/browser/src/render/dom_animation_engine.ts

@@ -59,7 +59,7 @@ export class DomAnimationEngine {
     return players;
   }
 
-  registerTrigger(trigger: AnimationTriggerMetadata, name: string = null): void {
+  registerTrigger(trigger: AnimationTriggerMetadata, name?: string): void {
     name = name || trigger.name;
     if (this._triggers[name]) {
       return;
@@ -84,7 +84,7 @@ export class DomAnimationEngine {
     if (lookupRef) {
       const possibleTriggers = Object.keys(lookupRef);
       const hasRemoval = possibleTriggers.some(triggerName => {
-        const oldValue = lookupRef[triggerName];
+        const oldValue = lookupRef ![triggerName];
         const instruction = this._triggers[triggerName].matchTransition(oldValue, VOID_STATE);
         return !!instruction;
       });
@@ -194,7 +194,7 @@ export class DomAnimationEngine {
 
     // we make a copy of the array because the actual source array is modified
     // each time a player is finished/destroyed (the forEach loop would fail otherwise)
-    return copyArray(this._activeElementAnimations.get(element));
+    return copyArray(this._activeElementAnimations.get(element) !);
   }
 
   animateTransition(element: any, instruction: AnimationTransitionInstruction): AnimationPlayer {
@@ -321,7 +321,7 @@ export class DomAnimationEngine {
 
   private _flushQueuedAnimations() {
     parentLoop: while (this._queuedTransitionAnimations.length) {
-      const {player, element, triggerName, event} = this._queuedTransitionAnimations.shift();
+      const {player, element, triggerName, event} = this._queuedTransitionAnimations.shift() !;
 
       let parent = element;
       while (parent = parent.parentNode) {
@@ -512,7 +512,7 @@ function copyAnimationEvent(e: AnimationEvent): AnimationEvent {
 }
 
 function makeAnimationEvent(
-    element: any, triggerName: string, fromState: string, toState: string, phaseName: string,
+    element: any, triggerName: string, fromState: string, toState: string, phaseName: string | null,
     totalTime: number): AnimationEvent {
   return <AnimationEvent>{element, triggerName, fromState, toState, phaseName, totalTime};
 }

packages/animations/browser/src/render/noop_animation_engine.ts

@@ -35,7 +35,7 @@ export class NoopAnimationEngine extends AnimationEngine {
   private _triggerStyles: {[triggerName: string]: {[stateName: string]: ɵStyleData}} =
       Object.create(null);
 
-  registerTrigger(trigger: AnimationTriggerMetadata, name: string = null): void {
+  registerTrigger(trigger: AnimationTriggerMetadata, name?: string): void {
     name = name || trigger.name;
     if (this._triggerStyles[name]) {
       return;
@@ -139,7 +139,7 @@ export class NoopAnimationEngine extends AnimationEngine {
 
     // remove all the listeners after everything is complete
     Array.from(this._listeners.keys()).forEach(element => {
-      const listenersToKeep = this._listeners.get(element).filter(l => !l.doRemove);
+      const listenersToKeep = this._listeners.get(element) !.filter(l => !l.doRemove);
       if (listenersToKeep.length) {
         this._listeners.set(element, listenersToKeep);
       } else {

packages/animations/browser/src/render/web_animations/web_animations_player.ts

@@ -22,7 +22,7 @@ export class WebAnimationsPlayer implements AnimationPlayer {
   private _finalKeyframe: {[key: string]: string | number};
   public time = 0;
 
-  public parentPlayer: AnimationPlayer = null;
+  public parentPlayer: AnimationPlayer|null = null;
   public previousStyles: {[styleName: string]: string | number};
 
   constructor(

packages/animations/browser/src/util.ts

@@ -13,7 +13,7 @@ export function parseTimeExpression(exp: string | number, errors: string[]): Ani
   const regex = /^([\.\d]+)(m?s)(?:\s+([\.\d]+)(m?s))?(?:\s+([-a-z]+(?:\(.+?\))?))?$/i;
   let duration: number;
   let delay: number = 0;
-  let easing: string = null;
+  let easing: string|null = null;
   if (typeof exp === 'string') {
     const matches = exp.match(regex);
     if (matches === null) {

packages/animations/browser/test/dsl/animation_trigger_spec.ts

@@ -64,7 +64,7 @@ export function main() {
         const result = makeTrigger(
             'name', [transition('a => b', animate(1234)), transition('b => c', animate(5678))]);
 
-        const trans = result.matchTransition('b', 'c');
+        const trans = result.matchTransition('b', 'c') !;
         expect(trans.timelines.length).toEqual(1);
         const timeline = trans.timelines[0];
         expect(timeline.duration).toEqual(5678);
@@ -76,13 +76,13 @@ export function main() {
           transition('* => *', animate(9999))
         ]);
 
-        let trans = result.matchTransition('b', 'c');
+        let trans = result.matchTransition('b', 'c') !;
         expect(trans.timelines[0].duration).toEqual(5678);
 
-        trans = result.matchTransition('a', 'b');
+        trans = result.matchTransition('a', 'b') !;
         expect(trans.timelines[0].duration).toEqual(1234);
 
-        trans = result.matchTransition('c', 'c');
+        trans = result.matchTransition('c', 'c') !;
         expect(trans.timelines[0].duration).toEqual(9999);
       });
 
@@ -125,7 +125,7 @@ export function main() {
              transition(countAndReturn(true), animate(3333))
            ]);
 
-           const trans = result.matchTransition('a', 'b');
+           const trans = result.matchTransition('a', 'b') !;
            expect(trans.timelines[0].duration).toEqual(3333);
 
            expect(count).toEqual(3);
@@ -134,23 +134,23 @@ export function main() {
       it('should support bi-directional transition expressions', () => {
         const result = makeTrigger('name', [transition('a <=> b', animate(2222))]);
 
-        const t1 = result.matchTransition('a', 'b');
+        const t1 = result.matchTransition('a', 'b') !;
         expect(t1.timelines[0].duration).toEqual(2222);
 
-        const t2 = result.matchTransition('b', 'a');
+        const t2 = result.matchTransition('b', 'a') !;
         expect(t2.timelines[0].duration).toEqual(2222);
       });
 
       it('should support multiple transition statements in one string', () => {
         const result = makeTrigger('name', [transition('a => b, b => a, c => *', animate(1234))]);
 
-        const t1 = result.matchTransition('a', 'b');
+        const t1 = result.matchTransition('a', 'b') !;
         expect(t1.timelines[0].duration).toEqual(1234);
 
-        const t2 = result.matchTransition('b', 'a');
+        const t2 = result.matchTransition('b', 'a') !;
         expect(t2.timelines[0].duration).toEqual(1234);
 
-        const t3 = result.matchTransition('c', 'a');
+        const t3 = result.matchTransition('c', 'a') !;
         expect(t3.timelines[0].duration).toEqual(1234);
       });
 
@@ -158,14 +158,14 @@ export function main() {
         it('should alias the :enter transition as void => *', () => {
           const result = makeTrigger('name', [transition(':enter', animate(3333))]);
 
-          const trans = result.matchTransition('void', 'something');
+          const trans = result.matchTransition('void', 'something') !;
           expect(trans.timelines[0].duration).toEqual(3333);
         });
 
         it('should alias the :leave transition as * => void', () => {
           const result = makeTrigger('name', [transition(':leave', animate(3333))]);
 
-          const trans = result.matchTransition('something', 'void');
+          const trans = result.matchTransition('something', 'void') !;
           expect(trans.timelines[0].duration).toEqual(3333);
         });
       });

packages/animations/browser/test/engine/dom_animation_engine_spec.ts

@@ -34,7 +34,7 @@ export function main() {
       element = el('<div></div>');
     });
 
-    function makeEngine(normalizer: AnimationStyleNormalizer = null) {
+    function makeEngine(normalizer?: AnimationStyleNormalizer) {
       return new DomAnimationEngine(driver, normalizer || new NoopAnimationStyleNormalizer());
     }
 
@@ -163,7 +163,7 @@ export function main() {
         engine.flush();
         expect(count).toEqual(0);
 
-        const player = engine.activePlayers.pop();
+        const player = engine.activePlayers.pop() !;
         player.finish();
 
         expect(count).toEqual(1);
@@ -275,7 +275,7 @@ export function main() {
         engine.setProperty(element, 'myTrigger', '123');
         engine.flush();
 
-        let capture: AnimationEvent = null;
+        let capture: AnimationEvent = null !;
         engine.listen(element, 'myTrigger', 'start', (e) => capture = e);
         engine.listen(element, 'myTrigger', 'done', (e) => capture = e);
         engine.setProperty(element, 'myTrigger', '456');
@@ -290,8 +290,8 @@ export function main() {
           totalTime: 1234
         });
 
-        capture = null;
+        capture = null !;
-        const player = engine.activePlayers.pop();
+        const player = engine.activePlayers.pop() !;
         player.finish();
 
         expect(capture).toEqual({
@@ -314,7 +314,7 @@ export function main() {
           transition('on => off', animate(9876))
         ]);
 
-        const instruction = trig.matchTransition('on', 'off');
+        const instruction = trig.matchTransition('on', 'off') !;
 
         expect(MockAnimationDriver.log.length).toEqual(0);
         engine.animateTransition(element, instruction);
@@ -376,7 +376,7 @@ export function main() {
              transition('on => off', animate(9876))
            ]);
 
-           const instruction = trig.matchTransition('on', 'off');
+           const instruction = trig.matchTransition('on', 'off') !;
            const player = engine.animateTransition(element, instruction);
 
            expect(element.style.height).not.toEqual('0px');
@@ -392,13 +392,13 @@ export function main() {
              state('c', style({width: '200px'})), transition('* => *', animate(9876))
            ]);
 
-           const instruction1 = trig.matchTransition('a', 'b');
+           const instruction1 = trig.matchTransition('a', 'b') !;
            const player1 = engine.animateTransition(element, instruction1);
 
            player1.finish();
            expect(element.style.height).toEqual('500px');
 
-           const instruction2 = trig.matchTransition('b', 'c');
+           const instruction2 = trig.matchTransition('b', 'c') !;
            const player2 = engine.animateTransition(element, instruction2);
 
            expect(element.style.height).not.toEqual('500px');
@@ -423,8 +423,8 @@ export function main() {
            let doneCount = 0;
            function doneCallback() { doneCount++; }
 
-           const instruction1 = trig1.matchTransition('a', 'b');
+           const instruction1 = trig1.matchTransition('a', 'b') !;
-           const instruction2 = trig2.matchTransition('x', 'y');
+           const instruction2 = trig2.matchTransition('x', 'y') !;
            const player1 = engine.animateTransition(element, instruction1);
            player1.onDone(doneCallback);
            expect(doneCount).toEqual(0);
@@ -451,8 +451,8 @@ export function main() {
              state('z', style({opacity: 1})), transition('* => *', animate(1000))
            ]);
 
-           const instruction1 = trig.matchTransition('x', 'y');
+           const instruction1 = trig.matchTransition('x', 'y') !;
-           const instruction2 = trig.matchTransition('y', 'z');
+           const instruction2 = trig.matchTransition('y', 'z') !;
 
            expect(parseFloat(element.style.opacity)).not.toEqual(.5);
 
@@ -476,9 +476,9 @@ export function main() {
              state('z', style({opacity: 1})), transition('* => *', animate(1000))
            ]);
 
-           const instruction1 = trig.matchTransition('x', 'y');
+           const instruction1 = trig.matchTransition('x', 'y') !;
-           const instruction2 = trig.matchTransition('y', 'z');
+           const instruction2 = trig.matchTransition('y', 'z') !;
-           const instruction3 = trig.matchTransition('z', 'x');
+           const instruction3 = trig.matchTransition('z', 'x') !;
 
            const player1 = engine.animateTransition(element, instruction1);
            engine.flush();
@@ -502,10 +502,10 @@ export function main() {
         let doneCount = 0;
         function doneCallback() { doneCount++; }
 
-        const instruction1 = trig.matchTransition('m', 'n');
+        const instruction1 = trig.matchTransition('m', 'n') !;
         const instructions2 =
-            buildAnimationKeyframes([style({height: 0}), animate(1000, style({height: 100}))]);
+            buildAnimationKeyframes([style({height: 0}), animate(1000, style({height: 100}))]) !;
-        const instruction3 = trig.matchTransition('n', 'void');
+        const instruction3 = trig.matchTransition('n', 'void') !;
 
         const player1 = engine.animateTransition(element, instruction1);
         player1.onDone(doneCallback);
@@ -528,7 +528,7 @@ export function main() {
              transition('* => *', [animate(1000, style({height: '200px'}))])
            ]);
 
-           const instruction = trig.matchTransition('0', '1');
+           const instruction = trig.matchTransition('0', '1') !;
            const player = engine.animateTransition(element, instruction);
            expect(element.style.width).not.toEqual('100px');
 
@@ -545,7 +545,7 @@ export function main() {
              transition('* => *', animate(1000))
            ]);
 
-           const instruction = trig.matchTransition('a', 'z');
+           const instruction = trig.matchTransition('a', 'z') !;
            engine.animateTransition(element, instruction).finish();
 
            expect(parseFloat(element.style.opacity)).toEqual(.5);
@@ -558,7 +558,7 @@ export function main() {
           transition('* => *', animate(1000))
         ]);
 
-        const instruction = trig.matchTransition('a', 'void');
+        const instruction = trig.matchTransition('a', 'void') !;
         engine.animateTransition(element, instruction).finish();
 
         expect(parseFloat(element.style.opacity)).toEqual(.8);
@@ -600,7 +600,7 @@ export function main() {
              transition('on => off', animate(9876))
            ]);
 
-           const instruction = trig.matchTransition('on', 'off');
+           const instruction = trig.matchTransition('on', 'off') !;
            const player = <MockAnimationPlayer>engine.animateTransition(element, instruction);
 
            expect(player.keyframes).toEqual([
@@ -633,7 +633,7 @@ export function main() {
           state('b', style({left: '100px', width: '100px'})), transition('a => b', animate(9876))
         ]);
 
-        const instruction = trig.matchTransition('a', 'b');
+        const instruction = trig.matchTransition('a', 'b') !;
 
         let errorMessage = '';
         try {

packages/animations/src/animation_metadata.ts

@@ -13,7 +13,7 @@ export interface ɵStyleData { [key: string]: string|number; }
 export declare type AnimateTimings = {
   duration: number,
   delay: number,
-  easing: string
+  easing: string | null
 };
 
 /**

packages/animations/src/players/animation_group_player.ts

@@ -17,7 +17,7 @@ export class AnimationGroupPlayer implements AnimationPlayer {
   private _destroyed = false;
   private _onDestroyFns: Function[] = [];
 
-  public parentPlayer: AnimationPlayer = null;
+  public parentPlayer: AnimationPlayer|null = null;
 
   constructor(private _players: AnimationPlayer[]) {
     let count = 0;

packages/animations/src/players/animation_player.ts

@@ -24,8 +24,8 @@ export abstract class AnimationPlayer {
   abstract reset(): void;
   abstract setPosition(p: any /** TODO #9100 */): void;
   abstract getPosition(): number;
-  get parentPlayer(): AnimationPlayer { throw new Error('NOT IMPLEMENTED: Base Class'); }
+  get parentPlayer(): AnimationPlayer|null { throw new Error('NOT IMPLEMENTED: Base Class'); }
-  set parentPlayer(player: AnimationPlayer) { throw new Error('NOT IMPLEMENTED: Base Class'); }
+  set parentPlayer(player: AnimationPlayer|null) { throw new Error('NOT IMPLEMENTED: Base Class'); }
 }
 
 /**
@@ -38,7 +38,7 @@ export class NoopAnimationPlayer implements AnimationPlayer {
   private _started = false;
   private _destroyed = false;
   private _finished = false;
-  public parentPlayer: AnimationPlayer = null;
+  public parentPlayer: AnimationPlayer|null = null;
   constructor() {}
   private _onFinish() {
     if (!this._finished) {

packages/animations/tsconfig-build.json

@@ -15,6 +15,7 @@
     "target": "es2015",
     "lib": ["es2015", "dom"],
     "skipLibCheck": true,
+    "strictNullChecks": true,
     // don't auto-discover @types/node, it results in a ///<reference in the .d.ts output
     "types": []
   },

tools/public_api_guard/animations/animations.d.ts

@@ -5,7 +5,7 @@ export declare function animate(timings: string | number, styles?: AnimationStyl
 export declare type AnimateTimings = {
     duration: number;
     delay: number;
-    easing: string;
+    easing: string | null;
 };
 
 /** @experimental */
@@ -52,7 +52,7 @@ export declare const enum AnimationMetadataType {
 
 /** @experimental */
 export declare abstract class AnimationPlayer {
-    parentPlayer: AnimationPlayer;
+    parentPlayer: AnimationPlayer | null;
     abstract destroy(): void;
     abstract finish(): void;
     abstract getPosition(): number;
@@ -112,7 +112,7 @@ export declare function keyframes(steps: AnimationStyleMetadata[]): AnimationKey
 
 /** @experimental */
 export declare class NoopAnimationPlayer implements AnimationPlayer {
-    parentPlayer: AnimationPlayer;
+    parentPlayer: AnimationPlayer | null;
     constructor();
     destroy(): void;
     finish(): void;

tools/public_api_guard/animations/browser.d.ts

@@ -2,6 +2,6 @@
 export declare abstract class AnimationDriver {
     abstract animate(element: any, keyframes: {
         [key: string]: string | number;
-    }[], duration: number, delay: number, easing: string, previousPlayers?: any[]): any;
+    }[], duration: number, delay: number, easing?: string | null, previousPlayers?: any[]): any;
     static NOOP: AnimationDriver;
 }