Permalink
Browse files

feat(animations): introduce a wave of new animation features

  • Loading branch information...
matsko authored and jasonaden committed Apr 26, 2017
1 parent d761059 commit 16c8167886d63f5b4cf03d420478b64640e45654
Showing with 7,715 additions and 2,200 deletions.
  1. +11 −7 packages/animations/browser/src/animation_engine.ts
  2. +20 −29 packages/animations/browser/src/dsl/animation.ts
  3. +156 −0 packages/animations/browser/src/dsl/animation_ast.ts
  4. +475 −0 packages/animations/browser/src/dsl/animation_ast_builder.ts
  5. +28 −10 packages/animations/browser/src/dsl/animation_dsl_visitor.ts
  6. +873 −0 packages/animations/browser/src/dsl/animation_timeline_builder.ts
  7. +13 −4 packages/animations/browser/src/dsl/animation_timeline_instruction.ts
  8. +0 −470 packages/animations/browser/src/dsl/animation_timeline_visitor.ts
  9. +10 −2 packages/animations/browser/src/dsl/animation_transition_expr.ts
  10. +45 −17 packages/animations/browser/src/dsl/animation_transition_factory.ts
  11. +14 −4 packages/animations/browser/src/dsl/animation_transition_instruction.ts
  12. +38 −81 packages/animations/browser/src/dsl/animation_trigger.ts
  13. +0 −195 packages/animations/browser/src/dsl/animation_validator_visitor.ts
  14. +34 −0 packages/animations/browser/src/dsl/element_instruction_map.ts
  15. +1 −1 packages/animations/browser/src/private_export.ts
  16. +8 −0 packages/animations/browser/src/render/animation_driver.ts
  17. +0 −527 packages/animations/browser/src/render/dom_animation_engine.ts
  18. +97 −0 packages/animations/browser/src/render/dom_animation_engine_next.ts
  19. +70 −27 packages/animations/browser/src/render/noop_animation_engine.ts
  20. +116 −0 packages/animations/browser/src/render/shared.ts
  21. +156 −0 packages/animations/browser/src/render/timeline_animation_engine.ts
  22. +1,230 −0 packages/animations/browser/src/render/transition_animation_engine.ts
  23. +6 −2 packages/animations/browser/src/render/web_animations/web_animations_driver.ts
  24. +18 −34 packages/animations/browser/src/render/web_animations/web_animations_player.ts
  25. +135 −18 packages/animations/browser/src/util.ts
  26. +280 −52 packages/animations/browser/test/dsl/animation_spec.ts
  27. +114 −57 packages/animations/browser/test/dsl/animation_trigger_spec.ts
  28. +121 −0 packages/animations/browser/test/engine/timeline_animation_engine_spec.ts
  29. +234 −261 ...imations/browser/test/engine/{dom_animation_engine_spec.ts → transition_animation_engine_spec.ts}
  30. +0 −78 packages/animations/browser/test/render/web_animations_player_spec.ts
  31. +26 −0 packages/animations/browser/test/shared.ts
  32. +22 −4 packages/animations/browser/testing/src/mock_animation_driver.ts
  33. +23 −0 packages/animations/src/animation_builder.ts
  34. +144 −27 packages/animations/src/animation_metadata.ts
  35. +2 −1 packages/animations/src/animations.ts
  36. +36 −10 packages/animations/src/players/animation_group_player.ts
  37. +9 −1 packages/animations/src/players/animation_player.ts
  38. +1 −0 packages/animations/src/private_export.ts
  39. +4 −5 packages/core/src/animation/animation_metadata_wrapped.ts
  40. +602 −70 packages/core/test/animation/animation_integration_spec.ts
  41. +1,907 −0 packages/core/test/animation/animation_query_integration_spec.ts
  42. +31 −30 packages/core/test/animation/animations_with_web_animations_integration_spec.ts
  43. +112 −0 packages/platform-browser/animations/src/animation_builder.ts
  44. +51 −44 packages/platform-browser/animations/src/animation_renderer.ts
  45. +1 −0 packages/platform-browser/animations/src/animations.ts
  46. +2 −0 packages/platform-browser/animations/src/private_export.ts
  47. +19 −2 packages/platform-browser/animations/src/providers.ts
  48. +100 −54 packages/platform-browser/animations/test/noop_animation_engine_spec.ts
  49. +100 −37 packages/platform-browser/test/animation/animation_renderer_spec.ts
  50. +108 −0 packages/platform-browser/test/animation/browser_animation_builder_spec.ts
  51. +99 −12 tools/public_api_guard/animations/animations.d.ts
  52. +1 −0 tools/public_api_guard/animations/browser.d.ts
  53. +5 −0 tools/public_api_guard/animations/browser/testing.d.ts
  54. +5 −5 tools/public_api_guard/core/core.d.ts
  55. +2 −22 tools/public_api_guard/platform-browser/animations/testing.d.ts
@@ -8,15 +8,19 @@
import {AnimationPlayer, AnimationTriggerMetadata} from '@angular/animations';
export abstract class AnimationEngine {
abstract registerTrigger(trigger: AnimationTriggerMetadata, name?: string): void;
abstract onInsert(element: any, domFn: () => any): void;
abstract onRemove(element: any, domFn: () => any): void;
abstract setProperty(element: any, property: string, value: any): void;
abstract registerTrigger(
componentId: string, namespaceId: string, hostElement: any, name: string,
metadata: AnimationTriggerMetadata): void;
abstract onInsert(namespaceId: string, element: any, parent: any, insertBefore: boolean): void;
abstract onRemove(namespaceId: string, element: any, context: any): void;
abstract setProperty(namespaceId: string, element: any, property: string, value: any): void;
abstract listen(
element: any, eventName: string, eventPhase: string,
namespaceId: string, element: any, eventName: string, eventPhase: string,
callback: (event: any) => any): () => any;
abstract flush(): void;
abstract destroy(namespaceId: string, context: any): void;
get activePlayers(): AnimationPlayer[] { throw new Error('...'); }
get queuedPlayers(): AnimationPlayer[] { throw new Error('...'); }
onRemovalComplete: (delegate: any, element: any) => void;
public players: AnimationPlayer[];
}
@@ -5,23 +5,19 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {AnimationMetadata, AnimationPlayer, AnimationStyleMetadata, sequence, ɵStyleData} from '@angular/animations';
import {AnimationDriver} from '../render/animation_driver';
import {DomAnimationEngine} from '../render/dom_animation_engine';
import {AnimationMetadata, AnimationOptions, ɵStyleData} from '@angular/animations';
import {normalizeStyles} from '../util';
import {Ast} from './animation_ast';
import {buildAnimationAst} from './animation_ast_builder';
import {buildAnimationTimelines} from './animation_timeline_builder';
import {AnimationTimelineInstruction} from './animation_timeline_instruction';
import {buildAnimationKeyframes} from './animation_timeline_visitor';
import {validateAnimationSequence} from './animation_validator_visitor';
import {AnimationStyleNormalizer} from './style_normalization/animation_style_normalizer';
import {ElementInstructionMap} from './element_instruction_map';
export class Animation {
private _animationAst: AnimationMetadata;
private _animationAst: Ast;
constructor(input: AnimationMetadata|AnimationMetadata[]) {
const ast =
Array.isArray(input) ? sequence(<AnimationMetadata[]>input) : <AnimationMetadata>input;
const errors = validateAnimationSequence(ast);
const errors: any[] = [];
const ast = buildAnimationAst(input, errors);
if (errors.length) {
const errorMessage = `animation validation failed:\n${errors.join("\n")}`;
throw new Error(errorMessage);
@@ -30,26 +26,21 @@ export class Animation {
}
buildTimelines(
startingStyles: ɵStyleData|ɵStyleData[],
destinationStyles: ɵStyleData|ɵStyleData[]): AnimationTimelineInstruction[] {
element: any, startingStyles: ɵStyleData|ɵStyleData[],
destinationStyles: ɵStyleData|ɵStyleData[], options: AnimationOptions,
subInstructions?: ElementInstructionMap): AnimationTimelineInstruction[] {
const start = Array.isArray(startingStyles) ? normalizeStyles(startingStyles) :
<ɵStyleData>startingStyles;
const dest = Array.isArray(destinationStyles) ? normalizeStyles(destinationStyles) :
<ɵStyleData>destinationStyles;
return buildAnimationKeyframes(this._animationAst, start, dest);
}
// this is only used for development demo purposes for now
private create(
injector: any, element: any, startingStyles: ɵStyleData = {},
destinationStyles: ɵStyleData = {}): AnimationPlayer {
const instructions = this.buildTimelines(startingStyles, destinationStyles);
// note the code below is only here to make the tests happy (once the new renderer is
// within core then the code below will interact with Renderer.transition(...))
const driver: AnimationDriver = injector.get(AnimationDriver);
const normalizer: AnimationStyleNormalizer = injector.get(AnimationStyleNormalizer);
const engine = new DomAnimationEngine(driver, normalizer);
return engine.animateTimeline(element, instructions);
const errors: any = [];
subInstructions = subInstructions || new ElementInstructionMap();
const result = buildAnimationTimelines(
element, this._animationAst, start, dest, options, subInstructions, errors);
if (errors.length) {
const errorMessage = `animation building failed:\n${errors.join("\n")}`;
throw new Error(errorMessage);
}
return result;
}
}
@@ -0,0 +1,156 @@
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
/**
* @license
* Copyright Google Inc. All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {AnimateTimings, AnimationOptions, ɵStyleData} from '@angular/animations';
const EMPTY_ANIMATION_OPTIONS: AnimationOptions = {};
export interface AstVisitor {
visitTrigger(ast: TriggerAst, context: any): any;
visitState(ast: StateAst, context: any): any;
visitTransition(ast: TransitionAst, context: any): any;
visitSequence(ast: SequenceAst, context: any): any;
visitGroup(ast: GroupAst, context: any): any;
visitAnimate(ast: AnimateAst, context: any): any;
visitStyle(ast: StyleAst, context: any): any;
visitKeyframes(ast: KeyframesAst, context: any): any;
visitReference(ast: ReferenceAst, context: any): any;
visitAnimateChild(ast: AnimateChildAst, context: any): any;
visitAnimateRef(ast: AnimateRefAst, context: any): any;
visitQuery(ast: QueryAst, context: any): any;
visitStagger(ast: StaggerAst, context: any): any;
visitTiming(ast: TimingAst, context: any): any;
}
export abstract class Ast {
abstract visit(ast: AstVisitor, context: any): any;
public options: AnimationOptions = EMPTY_ANIMATION_OPTIONS;
get params(): {[name: string]: any}|null { return this.options['params'] || null; }
}
export class TriggerAst extends Ast {
public queryCount: number = 0;
public depCount: number = 0;
constructor(public name: string, public states: StateAst[], public transitions: TransitionAst[]) {
super();
}
visit(visitor: AstVisitor, context: any): any { return visitor.visitTrigger(this, context); }
}
export class StateAst extends Ast {
constructor(public name: string, public style: StyleAst) { super(); }
visit(visitor: AstVisitor, context: any): any { return visitor.visitState(this, context); }
}
export class TransitionAst extends Ast {
public queryCount: number = 0;
public depCount: number = 0;
constructor(
public matchers: ((fromState: string, toState: string) => boolean)[], public animation: Ast) {
super();
}
visit(visitor: AstVisitor, context: any): any { return visitor.visitTransition(this, context); }
}
export class SequenceAst extends Ast {
constructor(public steps: Ast[]) { super(); }
visit(visitor: AstVisitor, context: any): any { return visitor.visitSequence(this, context); }
}
export class GroupAst extends Ast {
constructor(public steps: Ast[]) { super(); }
visit(visitor: AstVisitor, context: any): any { return visitor.visitGroup(this, context); }
}
export class AnimateAst extends Ast {
constructor(public timings: TimingAst, public style: StyleAst|KeyframesAst) { super(); }
visit(visitor: AstVisitor, context: any): any { return visitor.visitAnimate(this, context); }
}
export class StyleAst extends Ast {
public isEmptyStep = false;
constructor(
public styles:StyleData|string)[], public easing: string|null,
public offset: number|null) {
super();
}
visit(visitor: AstVisitor, context: any): any { return visitor.visitStyle(this, context); }
}
export class KeyframesAst extends Ast {
constructor(public styles: StyleAst[]) { super(); }
visit(visitor: AstVisitor, context: any): any { return visitor.visitKeyframes(this, context); }
}
export class ReferenceAst extends Ast {
constructor(public animation: Ast) { super(); }
visit(visitor: AstVisitor, context: any): any { return visitor.visitReference(this, context); }
}
export class AnimateChildAst extends Ast {
constructor() { super(); }
visit(visitor: AstVisitor, context: any): any { return visitor.visitAnimateChild(this, context); }
}
export class AnimateRefAst extends Ast {
constructor(public animation: ReferenceAst) { super(); }
visit(visitor: AstVisitor, context: any): any { return visitor.visitAnimateRef(this, context); }
}
export class QueryAst extends Ast {
public originalSelector: string;
constructor(
public selector: string, public limit: number, public optional: boolean,
public includeSelf: boolean, public animation: Ast) {
super();
}
visit(visitor: AstVisitor, context: any): any { return visitor.visitQuery(this, context); }
}
export class StaggerAst extends Ast {
constructor(public timings: AnimateTimings, public animation: Ast) { super(); }
visit(visitor: AstVisitor, context: any): any { return visitor.visitStagger(this, context); }
}
export class TimingAst extends Ast {
constructor(
public duration: number, public delay: number = 0, public easing: string|null = null) {
super();
}
visit(visitor: AstVisitor, context: any): any { return visitor.visitTiming(this, context); }
}
export class DynamicTimingAst extends TimingAst {
constructor(public value: string) { super(0, 0, ''); }
visit(visitor: AstVisitor, context: any): any { return visitor.visitTiming(this, context); }
}
Oops, something went wrong.

0 comments on commit 16c8167

Please sign in to comment.