refactor(animations): introduce @angular/animation module (#14351)
PR Close: #14351
This commit is contained in:
Matias Niemelä
committed by
Miško Hevery
Miško Hevery
parent
baa654a234
commit
96073e51c3
11
modules/@angular/animation/src/animation.ts
Normal file
11
modules/@angular/animation/src/animation.ts
Normal file
@ -0,0 +1,11 @@
|
||||
/**
|
||||
* @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
|
||||
*/
|
||||
export {AnimationModule} from './animation_module';
|
||||
export {Animation} from './dsl/animation';
|
||||
export {AUTO_STYLE, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationSequenceMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, animate, group, keyframes, sequence, state, style, transition} from './dsl/animation_metadata';
|
||||
export {AnimationTrigger, trigger} from './dsl/animation_trigger';
|
||||
36
modules/@angular/animation/src/animation_module.ts
Normal file
36
modules/@angular/animation/src/animation_module.ts
Normal file
@ -0,0 +1,36 @@
|
||||
/**
|
||||
* @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 {NgModule} from '@angular/core';
|
||||
import {AnimationStyleNormalizer} from './dsl/style_normalization/animation_style_normalizer';
|
||||
import {WebAnimationsStyleNormalizer} from './dsl/style_normalization/web_animations_style_normalizer';
|
||||
import {AnimationDriver, NoOpAnimationDriver} from './engine/animation_driver';
|
||||
import {DomAnimationTransitionEngine} from './engine/dom_animation_transition_engine';
|
||||
import {WebAnimationsDriver, supportsWebAnimations} from './engine/web_animations/web_animations_driver';
|
||||
import {TransitionEngine} from './private_import_core';
|
||||
|
||||
export function resolveDefaultAnimationDriver(): AnimationDriver {
|
||||
if (supportsWebAnimations()) {
|
||||
return new WebAnimationsDriver();
|
||||
}
|
||||
return new NoOpAnimationDriver();
|
||||
}
|
||||
|
||||
/**
|
||||
* The module that includes all animation code such as `style()`, `animate()`, `trigger()`, etc...
|
||||
*
|
||||
* @experimental
|
||||
*/
|
||||
@NgModule({
|
||||
providers: [
|
||||
{provide: AnimationDriver, useFactory: resolveDefaultAnimationDriver},
|
||||
{provide: AnimationStyleNormalizer, useClass: WebAnimationsStyleNormalizer},
|
||||
{provide: TransitionEngine, useClass: DomAnimationTransitionEngine}
|
||||
]
|
||||
})
|
||||
export class AnimationModule {
|
||||
}
|
||||
8
modules/@angular/animation/src/common/style_data.ts
Normal file
8
modules/@angular/animation/src/common/style_data.ts
Normal file
@ -0,0 +1,8 @@
|
||||
/**
|
||||
* @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
|
||||
*/
|
||||
export interface StyleData { [key: string]: string|number; }
|
||||
73
modules/@angular/animation/src/common/util.ts
Normal file
73
modules/@angular/animation/src/common/util.ts
Normal file
@ -0,0 +1,73 @@
|
||||
/**
|
||||
* @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 {AnimationStyles} from '@angular/core';
|
||||
import {AnimateTimings} from './../dsl/animation_metadata';
|
||||
import {StyleData} from './style_data';
|
||||
|
||||
export const ONE_SECOND = 1000;
|
||||
|
||||
export function parseTimeExpression(exp: string | number, errors: string[]): AnimateTimings {
|
||||
const regex = /^([\.\d]+)(m?s)(?:\s+([\.\d]+)(m?s))?(?:\s+([-a-z]+(?:\(.+?\))?))?$/i;
|
||||
let duration: number;
|
||||
let delay: number = 0;
|
||||
let easing: string = null;
|
||||
if (typeof exp === 'string') {
|
||||
const matches = exp.match(regex);
|
||||
if (matches === null) {
|
||||
errors.push(`The provided timing value "${exp}" is invalid.`);
|
||||
return {duration: 0, delay: 0, easing: null};
|
||||
}
|
||||
|
||||
let durationMatch = parseFloat(matches[1]);
|
||||
const durationUnit = matches[2];
|
||||
if (durationUnit == 's') {
|
||||
durationMatch *= ONE_SECOND;
|
||||
}
|
||||
duration = Math.floor(durationMatch);
|
||||
|
||||
const delayMatch = matches[3];
|
||||
const delayUnit = matches[4];
|
||||
if (delayMatch != null) {
|
||||
let delayVal: number = parseFloat(delayMatch);
|
||||
if (delayUnit != null && delayUnit == 's') {
|
||||
delayVal *= ONE_SECOND;
|
||||
}
|
||||
delay = Math.floor(delayVal);
|
||||
}
|
||||
|
||||
const easingVal = matches[5];
|
||||
if (easingVal) {
|
||||
easing = easingVal;
|
||||
}
|
||||
} else {
|
||||
duration = <number>exp;
|
||||
}
|
||||
|
||||
return {duration, delay, easing};
|
||||
}
|
||||
|
||||
export function normalizeStyles(styles: AnimationStyles): StyleData {
|
||||
const normalizedStyles: StyleData = {};
|
||||
styles.styles.forEach((styleMap: any) => copyStyles(styleMap, false, normalizedStyles));
|
||||
return normalizedStyles;
|
||||
}
|
||||
|
||||
export function copyStyles(
|
||||
styles: StyleData, readPrototype: boolean, destination: StyleData = {}): StyleData {
|
||||
if (readPrototype) {
|
||||
// we make use of a for-in loop so that the
|
||||
// prototypically inherited properties are
|
||||
// revealed from the backFill map
|
||||
for (let prop in styles) {
|
||||
destination[prop] = styles[prop];
|
||||
}
|
||||
} else {
|
||||
Object.keys(styles).forEach(prop => destination[prop] = styles[prop]);
|
||||
}
|
||||
return destination;
|
||||
}
|
||||
59
modules/@angular/animation/src/dsl/animation.ts
Normal file
59
modules/@angular/animation/src/dsl/animation.ts
Normal file
@ -0,0 +1,59 @@
|
||||
/**
|
||||
* @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 {AnimationPlayer, AnimationStyles, Injector} from '@angular/core';
|
||||
import {StyleData} from '../common/style_data';
|
||||
import {normalizeStyles} from '../common/util';
|
||||
import {AnimationDriver} from '../engine/animation_driver';
|
||||
import {DomAnimationTransitionEngine} from '../engine/dom_animation_transition_engine';
|
||||
import {AnimationMetadata, sequence} from './animation_metadata';
|
||||
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';
|
||||
|
||||
/**
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export class Animation {
|
||||
private _animationAst: AnimationMetadata;
|
||||
constructor(input: AnimationMetadata|AnimationMetadata[]) {
|
||||
const ast =
|
||||
Array.isArray(input) ? sequence(<AnimationMetadata[]>input) : <AnimationMetadata>input;
|
||||
const errors = validateAnimationSequence(ast);
|
||||
if (errors.length) {
|
||||
const errorMessage = `animation validation failed:\n${errors.join("\n")}`;
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
this._animationAst = ast;
|
||||
}
|
||||
|
||||
buildTimelines(startingStyles: StyleData|StyleData[], destinationStyles: StyleData|StyleData[]):
|
||||
AnimationTimelineInstruction[] {
|
||||
const start = Array.isArray(startingStyles) ?
|
||||
normalizeStyles(new AnimationStyles(<StyleData[]>startingStyles)) :
|
||||
<StyleData>startingStyles;
|
||||
const dest = Array.isArray(destinationStyles) ?
|
||||
normalizeStyles(new AnimationStyles(<StyleData[]>destinationStyles)) :
|
||||
<StyleData>destinationStyles;
|
||||
return buildAnimationKeyframes(this._animationAst, start, dest);
|
||||
}
|
||||
|
||||
// this is only used for development demo purposes for now
|
||||
private create(
|
||||
injector: Injector, 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 DomAnimationTransitionEngine(driver, normalizer);
|
||||
return engine.process(element, instructions);
|
||||
}
|
||||
}
|
||||
40
modules/@angular/animation/src/dsl/animation_dsl_visitor.ts
Normal file
40
modules/@angular/animation/src/dsl/animation_dsl_visitor.ts
Normal file
@ -0,0 +1,40 @@
|
||||
/**
|
||||
* @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 * as meta from './animation_metadata';
|
||||
|
||||
export interface AnimationDslVisitor {
|
||||
visitState(ast: meta.AnimationStateMetadata, context: any): any;
|
||||
visitTransition(ast: meta.AnimationTransitionMetadata, context: any): any;
|
||||
visitSequence(ast: meta.AnimationSequenceMetadata, context: any): any;
|
||||
visitGroup(ast: meta.AnimationGroupMetadata, context: any): any;
|
||||
visitAnimate(ast: meta.AnimationAnimateMetadata, context: any): any;
|
||||
visitStyle(ast: meta.AnimationStyleMetadata, context: any): any;
|
||||
visitKeyframeSequence(ast: meta.AnimationKeyframesSequenceMetadata, context: any): any;
|
||||
}
|
||||
|
||||
export function visitAnimationNode(
|
||||
visitor: AnimationDslVisitor, node: meta.AnimationMetadata, context: any) {
|
||||
switch (node.type) {
|
||||
case meta.AnimationMetadataType.State:
|
||||
return visitor.visitState(<meta.AnimationStateMetadata>node, context);
|
||||
case meta.AnimationMetadataType.Transition:
|
||||
return visitor.visitTransition(<meta.AnimationTransitionMetadata>node, context);
|
||||
case meta.AnimationMetadataType.Sequence:
|
||||
return visitor.visitSequence(<meta.AnimationSequenceMetadata>node, context);
|
||||
case meta.AnimationMetadataType.Group:
|
||||
return visitor.visitGroup(<meta.AnimationGroupMetadata>node, context);
|
||||
case meta.AnimationMetadataType.Animate:
|
||||
return visitor.visitAnimate(<meta.AnimationAnimateMetadata>node, context);
|
||||
case meta.AnimationMetadataType.KeyframeSequence:
|
||||
return visitor.visitKeyframeSequence(<meta.AnimationKeyframesSequenceMetadata>node, context);
|
||||
case meta.AnimationMetadataType.Style:
|
||||
return visitor.visitStyle(<meta.AnimationStyleMetadata>node, context);
|
||||
default:
|
||||
throw new Error(`Unable to resolve animation metadata node #${node.type}`);
|
||||
}
|
||||
}
|
||||
512
modules/@angular/animation/src/dsl/animation_metadata.ts
Normal file
512
modules/@angular/animation/src/dsl/animation_metadata.ts
Normal file
@ -0,0 +1,512 @@
|
||||
/**
|
||||
* @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 {StyleData} from '../common/style_data';
|
||||
|
||||
export declare type AnimateTimings = {
|
||||
duration: number,
|
||||
delay: number,
|
||||
easing: string
|
||||
};
|
||||
|
||||
export const enum AnimationMetadataType {
|
||||
State,
|
||||
Transition,
|
||||
Sequence,
|
||||
Group,
|
||||
Animate,
|
||||
KeyframeSequence,
|
||||
Style
|
||||
}
|
||||
|
||||
/**
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export const AUTO_STYLE = '*';
|
||||
|
||||
/**
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export interface AnimationMetadata { type: AnimationMetadataType; }
|
||||
|
||||
/**
|
||||
* Metadata representing the entry of animations. Instances of this class are provided via the
|
||||
* animation DSL when the {@link state state animation function} is called.
|
||||
*
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export interface AnimationStateMetadata extends AnimationMetadata {
|
||||
name: string;
|
||||
styles: AnimationStyleMetadata;
|
||||
}
|
||||
|
||||
/**
|
||||
* Metadata representing the entry of animations. Instances of this class are provided via the
|
||||
* animation DSL when the {@link transition transition animation function} is called.
|
||||
*
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export interface AnimationTransitionMetadata extends AnimationMetadata {
|
||||
expr: string|((fromState: string, toState: string) => boolean);
|
||||
animation: AnimationMetadata;
|
||||
}
|
||||
|
||||
/**
|
||||
* Metadata representing the entry of animations. Instances of this class are provided via the
|
||||
* animation DSL when the {@link keyframes keyframes animation function} is called.
|
||||
*
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export interface AnimationKeyframesSequenceMetadata extends AnimationMetadata {
|
||||
steps: AnimationStyleMetadata[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Metadata representing the entry of animations. Instances of this class are provided via the
|
||||
* animation DSL when the {@link style style animation function} is called.
|
||||
*
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export interface AnimationStyleMetadata extends AnimationMetadata {
|
||||
styles: StyleData[];
|
||||
offset: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Metadata representing the entry of animations. Instances of this class are provided via the
|
||||
* animation DSL when the {@link animate animate animation function} is called.
|
||||
*
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export interface AnimationAnimateMetadata extends AnimationMetadata {
|
||||
timings: string|number|AnimateTimings;
|
||||
styles: AnimationStyleMetadata|AnimationKeyframesSequenceMetadata;
|
||||
}
|
||||
|
||||
/**
|
||||
* Metadata representing the entry of animations. Instances of this class are provided via the
|
||||
* animation DSL when the {@link sequence sequence animation function} is called.
|
||||
*
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export interface AnimationSequenceMetadata extends AnimationMetadata { steps: AnimationMetadata[]; }
|
||||
|
||||
/**
|
||||
* Metadata representing the entry of animations. Instances of this class are provided via the
|
||||
* animation DSL when the {@link group group animation function} is called.
|
||||
*
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export interface AnimationGroupMetadata extends AnimationMetadata { steps: AnimationMetadata[]; }
|
||||
|
||||
/**
|
||||
* `animate` is an animation-specific function that is designed to be used inside of Angular2's
|
||||
* animation DSL language. If this information is new, please navigate to the {@link
|
||||
* Component#animations-anchor component animations metadata page} to gain a better understanding of
|
||||
* how animations in Angular2 are used.
|
||||
*
|
||||
* `animate` specifies an animation step that will apply the provided `styles` data for a given
|
||||
* amount of time based on the provided `timing` expression value. Calls to `animate` are expected
|
||||
* to be used within {@link sequence an animation sequence}, {@link group group}, or {@link
|
||||
* transition transition}.
|
||||
*
|
||||
* ### Usage
|
||||
*
|
||||
* The `animate` function accepts two input parameters: `timing` and `styles`:
|
||||
*
|
||||
* - `timing` is a string based value that can be a combination of a duration with optional delay
|
||||
* and easing values. The format for the expression breaks down to `duration delay easing`
|
||||
* (therefore a value such as `1s 100ms ease-out` will be parse itself into `duration=1000,
|
||||
* delay=100, easing=ease-out`. If a numeric value is provided then that will be used as the
|
||||
* `duration` value in millisecond form.
|
||||
* - `styles` is the style input data which can either be a call to {@link style style} or {@link
|
||||
* keyframes keyframes}. If left empty then the styles from the destination state will be collected
|
||||
* and used (this is useful when describing an animation step that will complete an animation by
|
||||
* {@link transition#the-final-animate-call animating to the final state}).
|
||||
*
|
||||
* ```typescript
|
||||
* // various functions for specifying timing data
|
||||
* animate(500, style(...))
|
||||
* animate("1s", style(...))
|
||||
* animate("100ms 0.5s", style(...))
|
||||
* animate("5s ease", style(...))
|
||||
* animate("5s 10ms cubic-bezier(.17,.67,.88,.1)", style(...))
|
||||
*
|
||||
* // either style() of keyframes() can be used
|
||||
* animate(500, style({ background: "red" }))
|
||||
* animate(500, keyframes([
|
||||
* style({ background: "blue" })),
|
||||
* style({ background: "red" }))
|
||||
* ])
|
||||
* ```
|
||||
*
|
||||
* {@example core/animation/ts/dsl/animation_example.ts region='Component'}
|
||||
*
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export function animate(
|
||||
timings: string | number, styles: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata =
|
||||
null): AnimationAnimateMetadata {
|
||||
return {type: AnimationMetadataType.Animate, styles: styles, timings: timings};
|
||||
}
|
||||
|
||||
/**
|
||||
* `group` is an animation-specific function that is designed to be used inside of Angular2's
|
||||
* animation DSL language. If this information is new, please navigate to the {@link
|
||||
* Component#animations-anchor component animations metadata page} to gain a better understanding of
|
||||
* how animations in Angular2 are used.
|
||||
*
|
||||
* `group` specifies a list of animation steps that are all run in parallel. Grouped animations are
|
||||
* useful when a series of styles must be animated/closed off at different statrting/ending times.
|
||||
*
|
||||
* The `group` function can either be used within a {@link sequence sequence} or a {@link transition
|
||||
* transition} and it will only continue to the next instruction once all of the inner animation
|
||||
* steps have completed.
|
||||
*
|
||||
* ### Usage
|
||||
*
|
||||
* The `steps` data that is passed into the `group` animation function can either consist of {@link
|
||||
* style style} or {@link animate animate} function calls. Each call to `style()` or `animate()`
|
||||
* within a group will be executed instantly (use {@link keyframes keyframes} or a {@link
|
||||
* animate#usage animate() with a delay value} to offset styles to be applied at a later time).
|
||||
*
|
||||
* ```typescript
|
||||
* group([
|
||||
* animate("1s", { background: "black" }))
|
||||
* animate("2s", { color: "white" }))
|
||||
* ])
|
||||
* ```
|
||||
*
|
||||
* {@example core/animation/ts/dsl/animation_example.ts region='Component'}
|
||||
*
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export function group(steps: AnimationMetadata[]): AnimationGroupMetadata {
|
||||
return {type: AnimationMetadataType.Group, steps: steps};
|
||||
}
|
||||
|
||||
/**
|
||||
* `sequence` is an animation-specific function that is designed to be used inside of Angular2's
|
||||
* animation DSL language. If this information is new, please navigate to the {@link
|
||||
* Component#animations-anchor component animations metadata page} to gain a better understanding of
|
||||
* how animations in Angular2 are used.
|
||||
*
|
||||
* `sequence` Specifies a list of animation steps that are run one by one. (`sequence` is used by
|
||||
* default when an array is passed as animation data into {@link transition transition}.)
|
||||
*
|
||||
* The `sequence` function can either be used within a {@link group group} or a {@link transition
|
||||
* transition} and it will only continue to the next instruction once each of the inner animation
|
||||
* steps have completed.
|
||||
*
|
||||
* To perform animation styling in parallel with other animation steps then have a look at the
|
||||
* {@link group group} animation function.
|
||||
*
|
||||
* ### Usage
|
||||
*
|
||||
* The `steps` data that is passed into the `sequence` animation function can either consist of
|
||||
* {@link style style} or {@link animate animate} function calls. A call to `style()` will apply the
|
||||
* provided styling data immediately while a call to `animate()` will apply its styling data over a
|
||||
* given time depending on its timing data.
|
||||
*
|
||||
* ```typescript
|
||||
* sequence([
|
||||
* style({ opacity: 0 })),
|
||||
* animate("1s", { opacity: 1 }))
|
||||
* ])
|
||||
* ```
|
||||
*
|
||||
* {@example core/animation/ts/dsl/animation_example.ts region='Component'}
|
||||
*
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export function sequence(steps: AnimationMetadata[]): AnimationSequenceMetadata {
|
||||
return {type: AnimationMetadataType.Sequence, steps: steps};
|
||||
}
|
||||
|
||||
/**
|
||||
* `style` is an animation-specific function that is designed to be used inside of Angular2's
|
||||
* animation DSL language. If this information is new, please navigate to the {@link
|
||||
* Component#animations-anchor component animations metadata page} to gain a better understanding of
|
||||
* how animations in Angular2 are used.
|
||||
*
|
||||
* `style` declares a key/value object containing CSS properties/styles that can then be used for
|
||||
* {@link state animation states}, within an {@link sequence animation sequence}, or as styling data
|
||||
* for both {@link animate animate} and {@link keyframes keyframes}.
|
||||
*
|
||||
* ### Usage
|
||||
*
|
||||
* `style` takes in a key/value string map as data and expects one or more CSS property/value pairs
|
||||
* to be defined.
|
||||
*
|
||||
* ```typescript
|
||||
* // string values are used for css properties
|
||||
* style({ background: "red", color: "blue" })
|
||||
*
|
||||
* // numerical (pixel) values are also supported
|
||||
* style({ width: 100, height: 0 })
|
||||
* ```
|
||||
*
|
||||
* #### Auto-styles (using `*`)
|
||||
*
|
||||
* When an asterix (`*`) character is used as a value then it will be detected from the element
|
||||
* being animated and applied as animation data when the animation starts.
|
||||
*
|
||||
* This feature proves useful for a state depending on layout and/or environment factors; in such
|
||||
* cases the styles are calculated just before the animation starts.
|
||||
*
|
||||
* ```typescript
|
||||
* // the steps below will animate from 0 to the
|
||||
* // actual height of the element
|
||||
* style({ height: 0 }),
|
||||
* animate("1s", style({ height: "*" }))
|
||||
* ```
|
||||
*
|
||||
* {@example core/animation/ts/dsl/animation_example.ts region='Component'}
|
||||
*
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export function style(
|
||||
tokens: {[key: string]: string | number} |
|
||||
Array<{[key: string]: string | number}>): AnimationStyleMetadata {
|
||||
let input: StyleData[];
|
||||
let offset: number = null;
|
||||
if (Array.isArray(tokens)) {
|
||||
input = <StyleData[]>tokens;
|
||||
} else {
|
||||
input = [<StyleData>tokens];
|
||||
}
|
||||
input.forEach(entry => {
|
||||
const entryOffset = (entry as StyleData)['offset'];
|
||||
if (entryOffset != null) {
|
||||
offset = offset == null ? parseFloat(<string>entryOffset) : offset;
|
||||
}
|
||||
});
|
||||
return _style(offset, input);
|
||||
}
|
||||
|
||||
function _style(offset: number, styles: StyleData[]): AnimationStyleMetadata {
|
||||
return {type: AnimationMetadataType.Style, styles: styles, offset: offset};
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* `state` is an animation-specific function that is designed to be used inside of Angular2's
|
||||
* animation DSL language. If this information is new, please navigate to the {@link
|
||||
* Component#animations-anchor component animations metadata page} to gain a better understanding of
|
||||
* how animations in Angular2 are used.
|
||||
*
|
||||
* `state` declares an animation state within the given trigger. When a state is active within a
|
||||
* component then its associated styles will persist on the element that the trigger is attached to
|
||||
* (even when the animation ends).
|
||||
*
|
||||
* To animate between states, have a look at the animation {@link transition transition} DSL
|
||||
* function. To register states to an animation trigger please have a look at the {@link trigger
|
||||
* trigger} function.
|
||||
*
|
||||
* #### The `void` state
|
||||
*
|
||||
* The `void` state value is a reserved word that angular uses to determine when the element is not
|
||||
* apart of the application anymore (e.g. when an `ngIf` evaluates to false then the state of the
|
||||
* associated element is void).
|
||||
*
|
||||
* #### The `*` (default) state
|
||||
*
|
||||
* The `*` state (when styled) is a fallback state that will be used if the state that is being
|
||||
* animated is not declared within the trigger.
|
||||
*
|
||||
* ### Usage
|
||||
*
|
||||
* `state` will declare an animation state with its associated styles
|
||||
* within the given trigger.
|
||||
*
|
||||
* - `stateNameExpr` can be one or more state names separated by commas.
|
||||
* - `styles` refers to the {@link style styling data} that will be persisted on the element once
|
||||
* the state has been reached.
|
||||
*
|
||||
* ```typescript
|
||||
* // "void" is a reserved name for a state and is used to represent
|
||||
* // the state in which an element is detached from from the application.
|
||||
* state("void", style({ height: 0 }))
|
||||
*
|
||||
* // user-defined states
|
||||
* state("closed", style({ height: 0 }))
|
||||
* state("open, visible", style({ height: "*" }))
|
||||
* ```
|
||||
*
|
||||
* {@example core/animation/ts/dsl/animation_example.ts region='Component'}
|
||||
*
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export function state(name: string, styles: AnimationStyleMetadata): AnimationStateMetadata {
|
||||
return {type: AnimationMetadataType.State, name: name, styles: styles};
|
||||
}
|
||||
|
||||
/**
|
||||
* `keyframes` is an animation-specific function that is designed to be used inside of Angular2's
|
||||
* animation DSL language. If this information is new, please navigate to the {@link
|
||||
* Component#animations-anchor component animations metadata page} to gain a better understanding of
|
||||
* how animations in Angular2 are used.
|
||||
*
|
||||
* `keyframes` specifies a collection of {@link style style} entries each optionally characterized
|
||||
* by an `offset` value.
|
||||
*
|
||||
* ### Usage
|
||||
*
|
||||
* The `keyframes` animation function is designed to be used alongside the {@link animate animate}
|
||||
* animation function. Instead of applying animations from where they are currently to their
|
||||
* destination, keyframes can describe how each style entry is applied and at what point within the
|
||||
* animation arc (much like CSS Keyframe Animations do).
|
||||
*
|
||||
* For each `style()` entry an `offset` value can be set. Doing so allows to specifiy at what
|
||||
* percentage of the animate time the styles will be applied.
|
||||
*
|
||||
* ```typescript
|
||||
* // the provided offset values describe when each backgroundColor value is applied.
|
||||
* animate("5s", keyframes([
|
||||
* style({ backgroundColor: "red", offset: 0 }),
|
||||
* style({ backgroundColor: "blue", offset: 0.2 }),
|
||||
* style({ backgroundColor: "orange", offset: 0.3 }),
|
||||
* style({ backgroundColor: "black", offset: 1 })
|
||||
* ]))
|
||||
* ```
|
||||
*
|
||||
* Alternatively, if there are no `offset` values used within the style entries then the offsets
|
||||
* will be calculated automatically.
|
||||
*
|
||||
* ```typescript
|
||||
* animate("5s", keyframes([
|
||||
* style({ backgroundColor: "red" }) // offset = 0
|
||||
* style({ backgroundColor: "blue" }) // offset = 0.33
|
||||
* style({ backgroundColor: "orange" }) // offset = 0.66
|
||||
* style({ backgroundColor: "black" }) // offset = 1
|
||||
* ]))
|
||||
* ```
|
||||
*
|
||||
* {@example core/animation/ts/dsl/animation_example.ts region='Component'}
|
||||
*
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export function keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSequenceMetadata {
|
||||
return {type: AnimationMetadataType.KeyframeSequence, steps: steps};
|
||||
}
|
||||
|
||||
/**
|
||||
* `transition` is an animation-specific function that is designed to be used inside of Angular2's
|
||||
* animation DSL language. If this information is new, please navigate to the {@link
|
||||
* Component#animations-anchor component animations metadata page} to gain a better understanding of
|
||||
* how animations in Angular2 are used.
|
||||
*
|
||||
* `transition` declares the {@link sequence sequence of animation steps} that will be run when the
|
||||
* provided `stateChangeExpr` value is satisfied. The `stateChangeExpr` consists of a `state1 =>
|
||||
* state2` which consists of two known states (use an asterix (`*`) to refer to a dynamic starting
|
||||
* and/or ending state).
|
||||
*
|
||||
* A function can also be provided as the `stateChangeExpr` argument for a transition and this
|
||||
* function will be executed each time a state change occurs. If the value returned within the
|
||||
* function is true then the associated animation will be run.
|
||||
*
|
||||
* Animation transitions are placed within an {@link trigger animation trigger}. For an transition
|
||||
* to animate to a state value and persist its styles then one or more {@link state animation
|
||||
* states} is expected to be defined.
|
||||
*
|
||||
* ### Usage
|
||||
*
|
||||
* An animation transition is kicked off the `stateChangeExpr` predicate evaluates to true based on
|
||||
* what the previous state is and what the current state has become. In other words, if a transition
|
||||
* is defined that matches the old/current state criteria then the associated animation will be
|
||||
* triggered.
|
||||
*
|
||||
* ```typescript
|
||||
* // all transition/state changes are defined within an animation trigger
|
||||
* trigger("myAnimationTrigger", [
|
||||
* // if a state is defined then its styles will be persisted when the
|
||||
* // animation has fully completed itself
|
||||
* state("on", style({ background: "green" })),
|
||||
* state("off", style({ background: "grey" })),
|
||||
*
|
||||
* // a transition animation that will be kicked off when the state value
|
||||
* // bound to "myAnimationTrigger" changes from "on" to "off"
|
||||
* transition("on => off", animate(500)),
|
||||
*
|
||||
* // it is also possible to do run the same animation for both directions
|
||||
* transition("on <=> off", animate(500)),
|
||||
*
|
||||
* // or to define multiple states pairs separated by commas
|
||||
* transition("on => off, off => void", animate(500)),
|
||||
*
|
||||
* // this is a catch-all state change for when an element is inserted into
|
||||
* // the page and the destination state is unknown
|
||||
* transition("void => *", [
|
||||
* style({ opacity: 0 }),
|
||||
* animate(500)
|
||||
* ]),
|
||||
*
|
||||
* // this will capture a state change between any states
|
||||
* transition("* => *", animate("1s 0s")),
|
||||
*
|
||||
* // you can also go full out and include a function
|
||||
* transition((fromState, toState) => {
|
||||
* // when `true` then it will allow the animation below to be invoked
|
||||
* return fromState == "off" && toState == "on";
|
||||
* }, animate("1s 0s"))
|
||||
* ])
|
||||
* ```
|
||||
*
|
||||
* The template associated with this component will make use of the `myAnimationTrigger` animation
|
||||
* trigger by binding to an element within its template code.
|
||||
*
|
||||
* ```html
|
||||
* <!-- somewhere inside of my-component-tpl.html -->
|
||||
* <div [@myAnimationTrigger]="myStatusExp">...</div>
|
||||
* ```
|
||||
*
|
||||
* #### The final `animate` call
|
||||
*
|
||||
* If the final step within the transition steps is a call to `animate()` that **only** uses a
|
||||
* timing value with **no style data** then it will be automatically used as the final animation arc
|
||||
* for the element to animate itself to the final state. This involves an automatic mix of
|
||||
* adding/removing CSS styles so that the element will be in the exact state it should be for the
|
||||
* applied state to be presented correctly.
|
||||
*
|
||||
* ```
|
||||
* // start off by hiding the element, but make sure that it animates properly to whatever state
|
||||
* // is currently active for "myAnimationTrigger"
|
||||
* transition("void => *", [
|
||||
* style({ opacity: 0 }),
|
||||
* animate(500)
|
||||
* ])
|
||||
* ```
|
||||
*
|
||||
* ### Transition Aliases (`:enter` and `:leave`)
|
||||
*
|
||||
* Given that enter (insertion) and leave (removal) animations are so common, the `transition`
|
||||
* function accepts both `:enter` and `:leave` values which are aliases for the `void => *` and `*
|
||||
* => void` state changes.
|
||||
*
|
||||
* ```
|
||||
* transition(":enter", [
|
||||
* style({ opacity: 0 }),
|
||||
* animate(500, style({ opacity: 1 }))
|
||||
* ])
|
||||
* transition(":leave", [
|
||||
* animate(500, style({ opacity: 0 }))
|
||||
* ])
|
||||
* ```
|
||||
*
|
||||
* {@example core/animation/ts/dsl/animation_example.ts region='Component'}
|
||||
*
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export function transition(
|
||||
stateChangeExpr: string | ((fromState: string, toState: string) => boolean),
|
||||
steps: AnimationMetadata | AnimationMetadata[]): AnimationTransitionMetadata {
|
||||
return {
|
||||
type: AnimationMetadataType.Transition,
|
||||
expr: stateChangeExpr,
|
||||
animation: Array.isArray(steps) ? sequence(steps) : <AnimationMetadata>steps
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
/**
|
||||
* @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 {StyleData} from '../common/style_data';
|
||||
import {AnimationEngineInstruction, AnimationTransitionInstructionType} from '../engine/animation_engine_instruction';
|
||||
|
||||
export interface AnimationTimelineInstruction extends AnimationEngineInstruction {
|
||||
keyframes: StyleData[];
|
||||
duration: number;
|
||||
delay: number;
|
||||
easing: string;
|
||||
}
|
||||
|
||||
export function createTimelineInstruction(
|
||||
keyframes: StyleData[], duration: number, delay: number,
|
||||
easing: string): AnimationTimelineInstruction {
|
||||
return {
|
||||
type: AnimationTransitionInstructionType.TimelineAnimation,
|
||||
keyframes,
|
||||
duration,
|
||||
delay,
|
||||
easing
|
||||
};
|
||||
}
|
||||
468
modules/@angular/animation/src/dsl/animation_timeline_visitor.ts
Normal file
468
modules/@angular/animation/src/dsl/animation_timeline_visitor.ts
Normal file
@ -0,0 +1,468 @@
|
||||
/**
|
||||
* @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 {AnimationPlayer, AnimationStyles} from '@angular/core';
|
||||
|
||||
import {StyleData} from '../common/style_data';
|
||||
import {copyStyles, normalizeStyles, parseTimeExpression} from '../common/util';
|
||||
|
||||
import {AnimationDslVisitor, visitAnimationNode} from './animation_dsl_visitor';
|
||||
import * as meta from './animation_metadata';
|
||||
import {AnimationTimelineInstruction, createTimelineInstruction} from './animation_timeline_instruction';
|
||||
|
||||
|
||||
/*
|
||||
* The code within this file aims to generate web-animations-compatible keyframes from Angular's
|
||||
* animation DSL code.
|
||||
*
|
||||
* The code below will be converted from:
|
||||
*
|
||||
* ```
|
||||
* sequence([
|
||||
* style({ opacity: 0 }),
|
||||
* animate(1000, style({ opacity: 0 }))
|
||||
* ])
|
||||
* ```
|
||||
*
|
||||
* To:
|
||||
* ```
|
||||
* keyframes = [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }]
|
||||
* duration = 1000
|
||||
* delay = 0
|
||||
* easing = ''
|
||||
* ```
|
||||
*
|
||||
* For this operation to cover the combination of animation verbs (style, animate, group, etc...) a
|
||||
* combination of prototypical inheritance, AST traversal and merge-sort-like algorithms are used.
|
||||
*
|
||||
* [AST Traversal]
|
||||
* Each of the animation verbs, when executed, will return an string-map object representing what
|
||||
* type of action it is (style, animate, group, etc...) and the data associated with it. This means
|
||||
* that when functional composition mix of these functions is evaluated (like in the example above)
|
||||
* then it will end up producing a tree of objects representing the animation itself.
|
||||
*
|
||||
* When this animation object tree is processed by the visitor code below it will visit each of the
|
||||
* verb statements within the visitor. And during each visit it will build the context of the
|
||||
* animation keyframes by interacting with the `TimelineBuilder`.
|
||||
*
|
||||
* [TimelineBuilder]
|
||||
* This class is responsible for tracking the styles and building a series of keyframe objects for a
|
||||
* timeline between a start and end time. There is always one top-level timeline and sub timelines
|
||||
* are forked in two specific cases:
|
||||
*
|
||||
* 1. When keyframes() is used it will create a sub timeline. Upon creation, ALL OF THE COLLECTED
|
||||
* STYLES from the parent timeline up until this point will be inherited into the keyframes
|
||||
* timeline.
|
||||
*
|
||||
* 2. When group() is used it will create a sub timeline. Upon creation, NONE OF THE COLLECTED
|
||||
* STYLES from the parent timeline will be inherited. Although, if the sub timeline does reference a
|
||||
* style that was previously used within the parent then it will be copied over into the sub
|
||||
* timeline.
|
||||
*
|
||||
* As the AST is traversed, the timing state on each of the timelines will be incremented. If a sub
|
||||
* timeline was created (based on one of the cases above) then the parent timeline will attempt to
|
||||
* merge the styles used within the sub timelines into itself (only with group() this will happen).
|
||||
* This happens with a merge operation (much like how the merge works in mergesort) and it will only
|
||||
* copy the most recently used styles from the sub timelines into the parent timeline. This ensures
|
||||
* that if the styles are used later on in another phase of the animation then they will be the most
|
||||
* up-to-date values.
|
||||
*
|
||||
* [How Missing Styles Are Updated]
|
||||
* Each timeline has a `backFill` property which is responsible for filling in new styles into
|
||||
* already processed keyframes if a new style shows up later within the animation sequence.
|
||||
*
|
||||
* ```
|
||||
* sequence([
|
||||
* style({ width: 0 }),
|
||||
* animate(1000, style({ width: 100 })),
|
||||
* animate(1000, style({ width: 200 })),
|
||||
* animate(1000, style({ width: 300 }))
|
||||
* animate(1000, style({ width: 400, height: 400 })) // notice how `height` doesn't exist anywhere
|
||||
* else
|
||||
* ])
|
||||
* ```
|
||||
*
|
||||
* What is happening here is that the `height` value is added later in the sequence, but is missing
|
||||
* from all previous animation steps. Therefore when a keyframe is created it would also be missing
|
||||
* from all previous keyframes up until where it is first used. For the timeline keyframe generation
|
||||
* to properly fill in the style it will place the previous value (the value from the parent
|
||||
* timeline) or a default value of `*` into the backFill object. Given that each of the keyframe
|
||||
* styles are objects that prototypically inhert from the backFill object, this means that if a
|
||||
* value is added into the backFill then it will automatically propagate any missing values to all
|
||||
* keyframes. Therefore the missing `height` value will be properly filled into the already
|
||||
* processed keyframes.
|
||||
*
|
||||
* (For prototypically-inherited contents to be detected a `for(i in obj)` loop must be used.)
|
||||
*
|
||||
* Based on whether the styles are inherited into a sub timeline (depending on the two cases
|
||||
* mentioned above), the functionality of the backFill will behave differently:
|
||||
*
|
||||
* 1. If the styles are inherited from the parent then the backFill property will also be inherited
|
||||
* and therefore any newly added styles to the backFill will be propagated to the parent timeline
|
||||
* and its already processed keyframes.
|
||||
*
|
||||
* 2. If the styles are not inherited from the parent then the sub timeline will have its own
|
||||
* backFill. Then if the sub timeline comes across a property that was not defined already then it
|
||||
* will read that from the parent's styles and pass that into its own backFill (which will then
|
||||
* propagate the missing styles across the sub timeline only).
|
||||
*
|
||||
* [Validation]
|
||||
* The code in this file is not responsible for validation. That functionaliy happens with within
|
||||
* the `AnimationValidatorVisitor` code.
|
||||
*/
|
||||
export function buildAnimationKeyframes(
|
||||
ast: meta.AnimationMetadata | meta.AnimationMetadata[], startingStyles: StyleData = {},
|
||||
finalStyles: StyleData = {}): AnimationTimelineInstruction[] {
|
||||
const normalizedAst = Array.isArray(ast) ? meta.sequence(<meta.AnimationMetadata[]>ast) :
|
||||
<meta.AnimationMetadata>ast;
|
||||
return new AnimationTimelineVisitor().buildKeyframes(normalizedAst, startingStyles, finalStyles);
|
||||
}
|
||||
|
||||
export declare type StyleAtTime = {
|
||||
time: number; value: string | number;
|
||||
};
|
||||
|
||||
export class AnimationTimelineContext {
|
||||
currentTimeline: TimelineBuilder;
|
||||
currentAnimateTimings: meta.AnimateTimings;
|
||||
previousNode: meta.AnimationMetadata = <meta.AnimationMetadata>{};
|
||||
subContextCount = 0;
|
||||
|
||||
constructor(
|
||||
public errors: any[], public timelines: TimelineBuilder[],
|
||||
initialTimeline: TimelineBuilder = null) {
|
||||
this.currentTimeline = initialTimeline || new TimelineBuilder(0);
|
||||
timelines.push(this.currentTimeline);
|
||||
}
|
||||
|
||||
createSubContext(inherit: boolean = false): AnimationTimelineContext {
|
||||
const context = new AnimationTimelineContext(
|
||||
this.errors, this.timelines, this.currentTimeline.fork(inherit));
|
||||
context.previousNode = this.previousNode;
|
||||
context.currentAnimateTimings = this.currentAnimateTimings;
|
||||
this.subContextCount++;
|
||||
return context;
|
||||
}
|
||||
|
||||
transformIntoNewTimeline(newTime = 0) {
|
||||
const oldTimeline = this.currentTimeline;
|
||||
const oldTime = oldTimeline.time;
|
||||
if (newTime > 0) {
|
||||
oldTimeline.time = newTime;
|
||||
}
|
||||
this.currentTimeline = oldTimeline.fork(true);
|
||||
oldTimeline.time = oldTime;
|
||||
this.timelines.push(this.currentTimeline);
|
||||
return this.currentTimeline;
|
||||
}
|
||||
|
||||
incrementTime(time: number) {
|
||||
this.currentTimeline.forwardTime(this.currentTimeline.time + time);
|
||||
}
|
||||
}
|
||||
|
||||
export class AnimationTimelineVisitor implements AnimationDslVisitor {
|
||||
buildKeyframes(ast: meta.AnimationMetadata, startingStyles: StyleData, finalStyles: StyleData):
|
||||
AnimationTimelineInstruction[] {
|
||||
const context = new AnimationTimelineContext([], []);
|
||||
context.currentTimeline.setStyles(startingStyles);
|
||||
|
||||
visitAnimationNode(this, ast, context);
|
||||
const normalizedFinalStyles = copyStyles(finalStyles, true);
|
||||
|
||||
// this is a special case for when animate(TIME) is used (without any styles)
|
||||
// thus indicating to create an animation arc between the final keyframe and
|
||||
// the destination styles. When this occurs we need to ensure that the styles
|
||||
// that are missing on the finalStyles map are set to AUTO
|
||||
if (Object.keys(context.currentTimeline.getFinalKeyframe()).length == 0) {
|
||||
context.currentTimeline.properties.forEach(prop => {
|
||||
const val = normalizedFinalStyles[prop];
|
||||
if (val == null) {
|
||||
normalizedFinalStyles[prop] = meta.AUTO_STYLE;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
context.currentTimeline.setStyles(normalizedFinalStyles);
|
||||
const timelineInstructions: AnimationTimelineInstruction[] = [];
|
||||
context.timelines.forEach(timeline => {
|
||||
// this checks to see if an actual animation happened
|
||||
if (timeline.hasStyling()) {
|
||||
timelineInstructions.push(timeline.buildKeyframes());
|
||||
}
|
||||
});
|
||||
|
||||
if (timelineInstructions.length == 0) {
|
||||
timelineInstructions.push(createTimelineInstruction([], 0, 0, ''));
|
||||
}
|
||||
return timelineInstructions;
|
||||
}
|
||||
|
||||
visitState(ast: meta.AnimationStateMetadata, context: any): any {
|
||||
// these values are not visited in this AST
|
||||
}
|
||||
|
||||
visitTransition(ast: meta.AnimationTransitionMetadata, context: any): any {
|
||||
// these values are not visited in this AST
|
||||
}
|
||||
|
||||
visitSequence(ast: meta.AnimationSequenceMetadata, context: AnimationTimelineContext) {
|
||||
const subContextCount = context.subContextCount;
|
||||
if (context.previousNode.type == meta.AnimationMetadataType.Style) {
|
||||
context.currentTimeline.forwardFrame();
|
||||
context.currentTimeline.snapshotCurrentStyles();
|
||||
}
|
||||
ast.steps.map(s => visitAnimationNode(this, s, context));
|
||||
context.previousNode = ast;
|
||||
if (context.subContextCount > subContextCount) {
|
||||
context.transformIntoNewTimeline();
|
||||
context.currentTimeline.snapshotCurrentStyles();
|
||||
}
|
||||
}
|
||||
|
||||
visitGroup(ast: meta.AnimationGroupMetadata, context: AnimationTimelineContext) {
|
||||
const innerTimelines: TimelineBuilder[] = [];
|
||||
let furthestTime = context.currentTimeline.currentTime;
|
||||
ast.steps.map(s => {
|
||||
const innerContext = context.createSubContext(false);
|
||||
innerContext.currentTimeline.snapshotCurrentStyles();
|
||||
visitAnimationNode(this, s, innerContext);
|
||||
furthestTime = Math.max(furthestTime, innerContext.currentTimeline.currentTime);
|
||||
innerTimelines.push(innerContext.currentTimeline);
|
||||
});
|
||||
|
||||
context.transformIntoNewTimeline(furthestTime);
|
||||
|
||||
// this operation is run after the AST loop because otherwise
|
||||
// if the parent timeline's collected styles were updated then
|
||||
// it would pass in invalid data into the new-to-be forked items
|
||||
innerTimelines.forEach(
|
||||
timeline => context.currentTimeline.mergeTimelineCollectedStyles(timeline));
|
||||
|
||||
// we do this because the window between this timeline and the sub timeline
|
||||
// should ensure that the styles within are exactly the same as they were before
|
||||
context.currentTimeline.snapshotCurrentStyles();
|
||||
context.previousNode = ast;
|
||||
}
|
||||
|
||||
visitAnimate(ast: meta.AnimationAnimateMetadata, context: AnimationTimelineContext) {
|
||||
const timings = ast.timings.hasOwnProperty('duration') ?
|
||||
<meta.AnimateTimings>ast.timings :
|
||||
parseTimeExpression(<string|number>ast.timings, context.errors);
|
||||
context.currentAnimateTimings = timings;
|
||||
|
||||
if (timings.delay) {
|
||||
context.incrementTime(timings.delay);
|
||||
context.currentTimeline.snapshotCurrentStyles();
|
||||
}
|
||||
|
||||
const astType = ast.styles ? ast.styles.type : -1;
|
||||
if (astType == meta.AnimationMetadataType.KeyframeSequence) {
|
||||
this.visitKeyframeSequence(<meta.AnimationKeyframesSequenceMetadata>ast.styles, context);
|
||||
} else {
|
||||
context.incrementTime(timings.duration);
|
||||
if (astType == meta.AnimationMetadataType.Style) {
|
||||
this.visitStyle(<meta.AnimationStyleMetadata>ast.styles, context);
|
||||
}
|
||||
}
|
||||
|
||||
context.currentAnimateTimings = null;
|
||||
context.previousNode = ast;
|
||||
}
|
||||
|
||||
visitStyle(ast: meta.AnimationStyleMetadata, context: AnimationTimelineContext) {
|
||||
// this is a special case when a style() call is issued directly after
|
||||
// a call to animate(). If the clock is not forwarded by one frame then
|
||||
// the style() calls will be merged into the previous animate() call
|
||||
// which is incorrect.
|
||||
if (!context.currentAnimateTimings &&
|
||||
context.previousNode.type == meta.AnimationMetadataType.Animate) {
|
||||
context.currentTimeline.forwardFrame();
|
||||
}
|
||||
|
||||
const normalizedStyles = normalizeStyles(new AnimationStyles(ast.styles));
|
||||
const easing = context.currentAnimateTimings && context.currentAnimateTimings.easing;
|
||||
if (easing) {
|
||||
normalizedStyles['easing'] = easing;
|
||||
}
|
||||
|
||||
context.currentTimeline.setStyles(normalizedStyles);
|
||||
context.previousNode = ast;
|
||||
}
|
||||
|
||||
visitKeyframeSequence(
|
||||
ast: meta.AnimationKeyframesSequenceMetadata, context: AnimationTimelineContext) {
|
||||
const MAX_KEYFRAME_OFFSET = 1;
|
||||
const limit = ast.steps.length - 1;
|
||||
const firstKeyframe = ast.steps[0];
|
||||
|
||||
let offsetGap = 0;
|
||||
const containsOffsets = firstKeyframe.styles.find(styles => styles['offset'] >= 0);
|
||||
if (!containsOffsets) {
|
||||
offsetGap = MAX_KEYFRAME_OFFSET / limit;
|
||||
}
|
||||
|
||||
const keyframeDuration = context.currentAnimateTimings.duration;
|
||||
const innerContext = context.createSubContext(true);
|
||||
const innerTimeline = innerContext.currentTimeline;
|
||||
innerTimeline.easing = context.currentAnimateTimings.easing;
|
||||
|
||||
// this will ensure that all collected styles so far
|
||||
// are populated into the first keyframe of the keyframes()
|
||||
// timeline (even if there exists a starting keyframe then
|
||||
// it will override the contents of the first frame later)
|
||||
innerTimeline.snapshotCurrentStyles();
|
||||
|
||||
ast.steps.map((step: meta.AnimationStyleMetadata, i: number) => {
|
||||
const normalizedStyles = normalizeStyles(new AnimationStyles(step.styles));
|
||||
const offset = containsOffsets ? <number>normalizedStyles['offset'] :
|
||||
(i == limit ? MAX_KEYFRAME_OFFSET : i * offsetGap);
|
||||
innerTimeline.forwardTime(offset * keyframeDuration);
|
||||
innerTimeline.setStyles(normalizedStyles);
|
||||
});
|
||||
|
||||
// this will ensure that the parent timeline gets all the styles from
|
||||
// the child even if the new timeline below is not used
|
||||
context.currentTimeline.mergeTimelineCollectedStyles(innerTimeline);
|
||||
|
||||
// we do this because the window between this timeline and the sub timeline
|
||||
// should ensure that the styles within are exactly the same as they were before
|
||||
context.transformIntoNewTimeline(context.currentTimeline.time + keyframeDuration);
|
||||
context.currentTimeline.snapshotCurrentStyles();
|
||||
context.previousNode = ast;
|
||||
}
|
||||
}
|
||||
|
||||
export class TimelineBuilder {
|
||||
public time: number = 0;
|
||||
public easing: string = '';
|
||||
private _currentKeyframe: StyleData;
|
||||
private _keyframes = new Map<number, StyleData>();
|
||||
private _styleSummary: {[prop: string]: StyleAtTime} = {};
|
||||
private _localTimelineStyles: StyleData;
|
||||
private _backFill: StyleData = {};
|
||||
|
||||
constructor(
|
||||
public startTime: number, private _globalTimelineStyles: StyleData = null,
|
||||
inheritedBackFill: StyleData = null, inheritedStyles: StyleData = null) {
|
||||
if (inheritedBackFill) {
|
||||
this._backFill = inheritedBackFill;
|
||||
}
|
||||
|
||||
this._localTimelineStyles = Object.create(this._backFill, {});
|
||||
if (inheritedStyles) {
|
||||
this._localTimelineStyles = copyStyles(inheritedStyles, false, this._localTimelineStyles);
|
||||
}
|
||||
|
||||
if (!this._globalTimelineStyles) {
|
||||
this._globalTimelineStyles = this._localTimelineStyles;
|
||||
}
|
||||
this._loadKeyframe();
|
||||
}
|
||||
|
||||
hasStyling(): boolean { return this._keyframes.size > 1; }
|
||||
|
||||
get currentTime() { return this.startTime + this.time; }
|
||||
|
||||
fork(inherit: boolean = false): TimelineBuilder {
|
||||
let inheritedBackFill = inherit ? this._backFill : null;
|
||||
let inheritedStyles = inherit ? this._localTimelineStyles : null;
|
||||
return new TimelineBuilder(
|
||||
this.currentTime, this._globalTimelineStyles, inheritedBackFill, inheritedStyles);
|
||||
}
|
||||
|
||||
private _loadKeyframe() {
|
||||
this._currentKeyframe = this._keyframes.get(this.time);
|
||||
if (!this._currentKeyframe) {
|
||||
this._currentKeyframe = Object.create(this._backFill, {});
|
||||
this._keyframes.set(this.time, this._currentKeyframe);
|
||||
}
|
||||
}
|
||||
|
||||
forwardFrame() {
|
||||
this.time++;
|
||||
this._loadKeyframe();
|
||||
}
|
||||
|
||||
forwardTime(time: number) {
|
||||
this.time = time;
|
||||
this._loadKeyframe();
|
||||
}
|
||||
|
||||
private _updateStyle(prop: string, value: string|number) {
|
||||
if (prop != 'easing') {
|
||||
if (!this._localTimelineStyles[prop]) {
|
||||
this._backFill[prop] = this._globalTimelineStyles[prop] || meta.AUTO_STYLE;
|
||||
}
|
||||
this._localTimelineStyles[prop] = value;
|
||||
this._globalTimelineStyles[prop] = value;
|
||||
this._styleSummary[prop] = {time: this.currentTime, value};
|
||||
}
|
||||
}
|
||||
|
||||
setStyles(styles: StyleData) {
|
||||
Object.keys(styles).forEach(prop => {
|
||||
if (prop !== 'offset') {
|
||||
const val = styles[prop];
|
||||
this._currentKeyframe[prop] = val;
|
||||
this._updateStyle(prop, val);
|
||||
}
|
||||
});
|
||||
Object.keys(this._localTimelineStyles).forEach(prop => {
|
||||
if (!this._currentKeyframe.hasOwnProperty(prop)) {
|
||||
this._currentKeyframe[prop] = this._localTimelineStyles[prop];
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
snapshotCurrentStyles() { copyStyles(this._localTimelineStyles, false, this._currentKeyframe); }
|
||||
|
||||
getFinalKeyframe() { return this._keyframes.get(this.time); }
|
||||
|
||||
get properties() {
|
||||
const properties: string[] = [];
|
||||
for (let prop in this._currentKeyframe) {
|
||||
properties.push(prop);
|
||||
}
|
||||
return properties;
|
||||
}
|
||||
|
||||
mergeTimelineCollectedStyles(timeline: TimelineBuilder) {
|
||||
Object.keys(timeline._styleSummary).forEach(prop => {
|
||||
const details0 = this._styleSummary[prop];
|
||||
const details1 = timeline._styleSummary[prop];
|
||||
if (!details0 || details1.time > details0.time) {
|
||||
this._updateStyle(prop, details1.value);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
buildKeyframes(): AnimationTimelineInstruction {
|
||||
const finalKeyframes: StyleData[] = [];
|
||||
// special case for when there are only start/destination
|
||||
// styles but no actual animation animate steps...
|
||||
if (this.time == 0) {
|
||||
const targetKeyframe = this.getFinalKeyframe();
|
||||
|
||||
const firstKeyframe = copyStyles(targetKeyframe, true);
|
||||
firstKeyframe['offset'] = 0;
|
||||
finalKeyframes.push(firstKeyframe);
|
||||
|
||||
const lastKeyframe = copyStyles(targetKeyframe, true);
|
||||
lastKeyframe['offset'] = 1;
|
||||
finalKeyframes.push(lastKeyframe);
|
||||
} else {
|
||||
this._keyframes.forEach((keyframe, time) => {
|
||||
const finalKeyframe = copyStyles(keyframe, true);
|
||||
finalKeyframe['offset'] = time / this.time;
|
||||
finalKeyframes.push(finalKeyframe);
|
||||
});
|
||||
}
|
||||
|
||||
return createTimelineInstruction(finalKeyframes, this.time, this.startTime, this.easing);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,64 @@
|
||||
/**
|
||||
* @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
|
||||
*/
|
||||
export const ANY_STATE = '*';
|
||||
export declare type TransitionMatcherFn = (fromState: any, toState: any) => boolean;
|
||||
|
||||
export function parseTransitionExpr(
|
||||
transitionValue: string | TransitionMatcherFn, errors: string[]): TransitionMatcherFn[] {
|
||||
const expressions: TransitionMatcherFn[] = [];
|
||||
if (typeof transitionValue == 'string') {
|
||||
(<string>transitionValue)
|
||||
.split(/\s*,\s*/)
|
||||
.forEach(str => parseInnerTransitionStr(str, expressions, errors));
|
||||
} else {
|
||||
expressions.push(<TransitionMatcherFn>transitionValue);
|
||||
}
|
||||
return expressions;
|
||||
}
|
||||
|
||||
function parseInnerTransitionStr(
|
||||
eventStr: string, expressions: TransitionMatcherFn[], errors: string[]) {
|
||||
if (eventStr[0] == ':') {
|
||||
eventStr = parseAnimationAlias(eventStr, errors);
|
||||
}
|
||||
const match = eventStr.match(/^(\*|[-\w]+)\s*(<?[=-]>)\s*(\*|[-\w]+)$/);
|
||||
if (match == null || match.length < 4) {
|
||||
errors.push(`The provided transition expression "${eventStr}" is not supported`);
|
||||
return expressions;
|
||||
}
|
||||
|
||||
const fromState = match[1];
|
||||
const separator = match[2];
|
||||
const toState = match[3];
|
||||
expressions.push(makeLambdaFromStates(fromState, toState));
|
||||
|
||||
const isFullAnyStateExpr = fromState == ANY_STATE && toState == ANY_STATE;
|
||||
if (separator[0] == '<' && !isFullAnyStateExpr) {
|
||||
expressions.push(makeLambdaFromStates(toState, fromState));
|
||||
}
|
||||
}
|
||||
|
||||
function parseAnimationAlias(alias: string, errors: string[]): string {
|
||||
switch (alias) {
|
||||
case ':enter':
|
||||
return 'void => *';
|
||||
case ':leave':
|
||||
return '* => void';
|
||||
default:
|
||||
errors.push(`The transition alias value "${alias}" is not supported`);
|
||||
return '* => *';
|
||||
}
|
||||
}
|
||||
|
||||
function makeLambdaFromStates(lhs: string, rhs: string): TransitionMatcherFn {
|
||||
return (fromState: any, toState: any): boolean => {
|
||||
const lhsMatch = lhs == ANY_STATE || lhs == fromState;
|
||||
const rhsMatch = rhs == ANY_STATE || rhs == toState;
|
||||
return lhsMatch && rhsMatch;
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,43 @@
|
||||
/**
|
||||
* @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 {TransitionFactory} from '@angular/core';
|
||||
import {StyleData} from '../common/style_data';
|
||||
import {AnimationMetadata, AnimationTransitionMetadata} from './animation_metadata';
|
||||
import {buildAnimationKeyframes} from './animation_timeline_visitor';
|
||||
import {TransitionMatcherFn} from './animation_transition_expr';
|
||||
import {AnimationTransitionInstruction, createTransitionInstruction} from './animation_transition_instruction';
|
||||
|
||||
export class AnimationTransitionFactory implements TransitionFactory {
|
||||
private _animationAst: AnimationMetadata;
|
||||
|
||||
constructor(
|
||||
private _triggerName: string, ast: AnimationTransitionMetadata,
|
||||
private matchFns: TransitionMatcherFn[],
|
||||
private _stateStyles: {[stateName: string]: StyleData}) {
|
||||
this._animationAst = ast.animation;
|
||||
}
|
||||
|
||||
match(currentState: any, nextState: any): AnimationTransitionInstruction {
|
||||
if (!oneOrMoreTransitionsMatch(this.matchFns, currentState, nextState)) return;
|
||||
|
||||
const backupStateStyles = this._stateStyles['*'] || {};
|
||||
const currentStateStyles = this._stateStyles[currentState] || backupStateStyles;
|
||||
const nextStateStyles = this._stateStyles[nextState] || backupStateStyles;
|
||||
|
||||
const timelines =
|
||||
buildAnimationKeyframes(this._animationAst, currentStateStyles, nextStateStyles);
|
||||
|
||||
return createTransitionInstruction(
|
||||
this._triggerName, nextState === 'void', currentStateStyles, nextStateStyles, timelines);
|
||||
}
|
||||
}
|
||||
|
||||
function oneOrMoreTransitionsMatch(
|
||||
matchFns: TransitionMatcherFn[], currentState: any, nextState: any): boolean {
|
||||
return matchFns.some(fn => fn(currentState, nextState));
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
/**
|
||||
* @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 {StyleData} from '../common/style_data';
|
||||
import {AnimationEngineInstruction, AnimationTransitionInstructionType} from '../engine/animation_engine_instruction';
|
||||
import {AnimationTimelineInstruction} from './animation_timeline_instruction';
|
||||
|
||||
export interface AnimationTransitionInstruction extends AnimationEngineInstruction {
|
||||
triggerName: string;
|
||||
isRemovalTransition: boolean;
|
||||
fromStyles: StyleData;
|
||||
toStyles: StyleData;
|
||||
timelines: AnimationTimelineInstruction[];
|
||||
}
|
||||
|
||||
export function createTransitionInstruction(
|
||||
triggerName: string, isRemovalTransition: boolean, fromStyles: StyleData, toStyles: StyleData,
|
||||
timelines: AnimationTimelineInstruction[]): AnimationTransitionInstruction {
|
||||
return {
|
||||
type: AnimationTransitionInstructionType.TransitionAnimation,
|
||||
triggerName,
|
||||
isRemovalTransition,
|
||||
fromStyles,
|
||||
toStyles,
|
||||
timelines
|
||||
};
|
||||
}
|
||||
141
modules/@angular/animation/src/dsl/animation_trigger.ts
Normal file
141
modules/@angular/animation/src/dsl/animation_trigger.ts
Normal file
@ -0,0 +1,141 @@
|
||||
/**
|
||||
* @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 {AnimationStyles, Trigger} from '@angular/core';
|
||||
import {StyleData} from '../common/style_data';
|
||||
import {copyStyles, normalizeStyles} from '../common/util';
|
||||
import {AnimationDslVisitor, visitAnimationNode} from './animation_dsl_visitor';
|
||||
import {AnimationAnimateMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationSequenceMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata} from './animation_metadata';
|
||||
import {parseTransitionExpr} from './animation_transition_expr';
|
||||
import {AnimationTransitionFactory} from './animation_transition_factory';
|
||||
import {AnimationTransitionInstruction} from './animation_transition_instruction';
|
||||
import {validateAnimationSequence} from './animation_validator_visitor';
|
||||
|
||||
|
||||
/**
|
||||
* `trigger` is an animation-specific function that is designed to be used inside of Angular2's
|
||||
animation DSL language. If this information is new, please navigate to the {@link
|
||||
Component#animations-anchor component animations metadata page} to gain a better understanding of
|
||||
how animations in Angular2 are used.
|
||||
*
|
||||
* `trigger` Creates an animation trigger which will a list of {@link state state} and {@link
|
||||
transition transition} entries that will be evaluated when the expression bound to the trigger
|
||||
changes.
|
||||
*
|
||||
* Triggers are registered within the component annotation data under the {@link
|
||||
Component#animations-anchor animations section}. An animation trigger can be placed on an element
|
||||
within a template by referencing the name of the trigger followed by the expression value that the
|
||||
trigger is bound to (in the form of `[@triggerName]="expression"`.
|
||||
*
|
||||
* ### Usage
|
||||
*
|
||||
* `trigger` will create an animation trigger reference based on the provided `name` value. The
|
||||
provided `animation` value is expected to be an array consisting of {@link state state} and {@link
|
||||
transition transition} declarations.
|
||||
*
|
||||
* ```typescript
|
||||
* @Component({
|
||||
* selector: 'my-component',
|
||||
* templateUrl: 'my-component-tpl.html',
|
||||
* animations: [
|
||||
* trigger("myAnimationTrigger", [
|
||||
* state(...),
|
||||
* state(...),
|
||||
* transition(...),
|
||||
* transition(...)
|
||||
* ])
|
||||
* ]
|
||||
* })
|
||||
* class MyComponent {
|
||||
* myStatusExp = "something";
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* The template associated with this component will make use of the `myAnimationTrigger` animation
|
||||
trigger by binding to an element within its template code.
|
||||
*
|
||||
* ```html
|
||||
* <!-- somewhere inside of my-component-tpl.html -->
|
||||
* <div [@myAnimationTrigger]="myStatusExp">...</div>
|
||||
tools/gulp-tasks/validate-commit-message.js ```
|
||||
*
|
||||
* {@example core/animation/ts/dsl/animation_example.ts region='Component'}
|
||||
*
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export function trigger(name: string, definitions: AnimationMetadata[]): AnimationTrigger {
|
||||
return new AnimationTriggerVisitor().buildTrigger(name, definitions);
|
||||
}
|
||||
|
||||
/**
|
||||
* @experimental Animation support is experimental.
|
||||
*/
|
||||
export class AnimationTrigger implements Trigger {
|
||||
public transitionFactories: AnimationTransitionFactory[] = [];
|
||||
public states: {[stateName: string]: StyleData} = {};
|
||||
|
||||
constructor(
|
||||
public name: string, states: {[stateName: string]: StyleData},
|
||||
private _transitionAsts: AnimationTransitionMetadata[]) {
|
||||
Object.keys(states).forEach(
|
||||
stateName => { this.states[stateName] = copyStyles(states[stateName], false); });
|
||||
|
||||
const errors: string[] = [];
|
||||
_transitionAsts.forEach(ast => {
|
||||
const exprs = parseTransitionExpr(ast.expr, errors);
|
||||
const sequenceErrors = validateAnimationSequence(ast);
|
||||
if (sequenceErrors.length) {
|
||||
errors.push(...sequenceErrors);
|
||||
} else {
|
||||
this.transitionFactories.push(
|
||||
new AnimationTransitionFactory(this.name, ast, exprs, states));
|
||||
}
|
||||
});
|
||||
|
||||
if (errors.length) {
|
||||
const LINE_START = '\n - ';
|
||||
throw new Error(
|
||||
`Animation parsing for the ${name} trigger have failed:${LINE_START}${errors.join(LINE_START)}`);
|
||||
}
|
||||
}
|
||||
|
||||
matchTransition(currentState: any, nextState: any): AnimationTransitionInstruction {
|
||||
for (let i = 0; i < this.transitionFactories.length; i++) {
|
||||
let result = this.transitionFactories[i].match(currentState, nextState);
|
||||
if (result) return result;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
class AnimationTriggerContext {
|
||||
public errors: string[] = [];
|
||||
public states: {[stateName: string]: StyleData} = {};
|
||||
public transitions: AnimationTransitionMetadata[] = [];
|
||||
}
|
||||
|
||||
class AnimationTriggerVisitor implements AnimationDslVisitor {
|
||||
buildTrigger(name: string, definitions: AnimationMetadata[]): AnimationTrigger {
|
||||
const context = new AnimationTriggerContext();
|
||||
definitions.forEach(def => visitAnimationNode(this, def, context));
|
||||
return new AnimationTrigger(name, context.states, context.transitions);
|
||||
}
|
||||
|
||||
visitState(ast: AnimationStateMetadata, context: any): any {
|
||||
context.states[ast.name] = normalizeStyles(new AnimationStyles(ast.styles.styles));
|
||||
}
|
||||
|
||||
visitTransition(ast: AnimationTransitionMetadata, context: any): any {
|
||||
context.transitions.push(ast);
|
||||
}
|
||||
|
||||
visitSequence(ast: AnimationSequenceMetadata, context: any) {}
|
||||
visitGroup(ast: AnimationGroupMetadata, context: any) {}
|
||||
visitAnimate(ast: AnimationAnimateMetadata, context: any) {}
|
||||
visitStyle(ast: AnimationStyleMetadata, context: any) {}
|
||||
visitKeyframeSequence(ast: AnimationKeyframesSequenceMetadata, context: any) {}
|
||||
}
|
||||
@ -0,0 +1,188 @@
|
||||
/**
|
||||
* @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 {AnimationStyles} from '@angular/core';
|
||||
import {normalizeStyles, parseTimeExpression} from '../common/util';
|
||||
import {AnimationDslVisitor, visitAnimationNode} from './animation_dsl_visitor';
|
||||
import * as meta from './animation_metadata';
|
||||
|
||||
export type StyleTimeTuple = {
|
||||
startTime: number; endTime: number;
|
||||
};
|
||||
|
||||
/*
|
||||
* [Validation]
|
||||
* The visitor code below will traverse the animation AST generated by the animation verb functions
|
||||
* (the output is a tree of objects) and attempt to perform a series of validations on the data. The
|
||||
* following corner-cases will be validated:
|
||||
*
|
||||
* 1. Overlap of animations
|
||||
* Given that a CSS property cannot be animated in more than one place at the same time, it's
|
||||
* important that this behaviour is detected and validated. The way in which this occurs is that
|
||||
* each time a style property is examined, a string-map containing the property will be updated with
|
||||
* the start and end times for when the property is used within an animation step.
|
||||
*
|
||||
* If there are two or more parallel animations that are currently running (these are invoked by the
|
||||
* group()) on the same element then the validator will throw an error. Since the start/end timing
|
||||
* values are collected for each property then if the current animation step is animating the same
|
||||
* property and its timing values fall anywhere into the window of time that the property is
|
||||
* currently being animated within then this is what causes an error.
|
||||
*
|
||||
* 2. Timing values
|
||||
* The validator will validate to see if a timing value of `duration delay easing` or
|
||||
* `durationNumber` is valid or not.
|
||||
*
|
||||
* (note that upon validation the code below will replace the timing data with an object containing
|
||||
* {duration,delay,easing}.
|
||||
*
|
||||
* 3. Offset Validation
|
||||
* Each of the style() calls are allowed to have an offset value when placed inside of keyframes().
|
||||
* Offsets within keyframes() are considered valid when:
|
||||
*
|
||||
* - No offsets are used at all
|
||||
* - Each style() entry contains an offset value
|
||||
* - Each offset is between 0 and 1
|
||||
* - Each offset is greater to or equal than the previous one
|
||||
*
|
||||
* Otherwise an error will be thrown.
|
||||
*/
|
||||
export function validateAnimationSequence(ast: meta.AnimationMetadata) {
|
||||
return new AnimationValidatorVisitor().validate(ast);
|
||||
}
|
||||
|
||||
export class AnimationValidatorVisitor implements AnimationDslVisitor {
|
||||
validate(ast: meta.AnimationMetadata): string[] {
|
||||
const context = new AnimationValidatorContext();
|
||||
visitAnimationNode(this, ast, context);
|
||||
return context.errors;
|
||||
}
|
||||
|
||||
visitState(ast: meta.AnimationStateMetadata, context: any): any {}
|
||||
|
||||
visitTransition(ast: meta.AnimationTransitionMetadata, context: any): any {}
|
||||
|
||||
visitSequence(ast: meta.AnimationSequenceMetadata, context: AnimationValidatorContext): any {
|
||||
ast.steps.forEach(step => visitAnimationNode(this, step, context));
|
||||
}
|
||||
|
||||
visitGroup(ast: meta.AnimationGroupMetadata, context: AnimationValidatorContext): any {
|
||||
const currentTime = context.currentTime;
|
||||
let furthestTime = 0;
|
||||
ast.steps.forEach(step => {
|
||||
context.currentTime = currentTime;
|
||||
visitAnimationNode(this, step, context);
|
||||
furthestTime = Math.max(furthestTime, context.currentTime);
|
||||
});
|
||||
context.currentTime = furthestTime;
|
||||
}
|
||||
|
||||
visitAnimate(ast: meta.AnimationAnimateMetadata, context: AnimationValidatorContext): any {
|
||||
// we reassign the timings here so that they are not reparsed each
|
||||
// time an animation occurs
|
||||
context.currentAnimateTimings = ast.timings =
|
||||
parseTimeExpression(<string|number>ast.timings, context.errors);
|
||||
|
||||
const astType = ast.styles && ast.styles.type;
|
||||
if (astType == meta.AnimationMetadataType.KeyframeSequence) {
|
||||
this.visitKeyframeSequence(<meta.AnimationKeyframesSequenceMetadata>ast.styles, context);
|
||||
} else {
|
||||
context.currentTime +=
|
||||
context.currentAnimateTimings.duration + context.currentAnimateTimings.delay;
|
||||
if (astType == meta.AnimationMetadataType.Style) {
|
||||
this.visitStyle(<meta.AnimationStyleMetadata>ast.styles, context);
|
||||
}
|
||||
}
|
||||
|
||||
context.currentAnimateTimings = null;
|
||||
}
|
||||
|
||||
visitStyle(ast: meta.AnimationStyleMetadata, context: AnimationValidatorContext): any {
|
||||
const styleData = normalizeStyles(new AnimationStyles(ast.styles));
|
||||
const timings = context.currentAnimateTimings;
|
||||
let endTime = context.currentTime;
|
||||
let startTime = context.currentTime;
|
||||
if (timings && startTime > 0) {
|
||||
startTime -= timings.duration + timings.delay;
|
||||
}
|
||||
Object.keys(styleData).forEach(prop => {
|
||||
const collectedEntry = context.collectedStyles[prop];
|
||||
let updateCollectedStyle = true;
|
||||
if (collectedEntry) {
|
||||
if (startTime != endTime && startTime >= collectedEntry.startTime &&
|
||||
endTime <= collectedEntry.endTime) {
|
||||
context.errors.push(
|
||||
`The CSS property "${prop}" that exists between the times of "${collectedEntry.startTime}ms" and "${collectedEntry.endTime}ms" is also being animated in a parallel animation between the times of "${startTime}ms" and "${endTime}ms"`);
|
||||
updateCollectedStyle = false;
|
||||
}
|
||||
|
||||
// we always choose the smaller start time value since we
|
||||
// want to have a record of the entire animation window where
|
||||
// the style property is being animated in between
|
||||
startTime = collectedEntry.startTime;
|
||||
}
|
||||
if (updateCollectedStyle) {
|
||||
context.collectedStyles[prop] = {startTime, endTime};
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
visitKeyframeSequence(
|
||||
ast: meta.AnimationKeyframesSequenceMetadata, context: AnimationValidatorContext): any {
|
||||
let totalKeyframesWithOffsets = 0;
|
||||
const offsets: number[] = [];
|
||||
let offsetsOutOfOrder = false;
|
||||
let keyframesOutOfRange = false;
|
||||
let previousOffset: number = 0;
|
||||
ast.steps.forEach(step => {
|
||||
const styleData = normalizeStyles(new AnimationStyles(step.styles));
|
||||
let offset = 0;
|
||||
if (styleData.hasOwnProperty('offset')) {
|
||||
totalKeyframesWithOffsets++;
|
||||
offset = <number>styleData['offset'];
|
||||
}
|
||||
keyframesOutOfRange = keyframesOutOfRange || offset < 0 || offset > 1;
|
||||
offsetsOutOfOrder = offsetsOutOfOrder || offset < previousOffset;
|
||||
previousOffset = offset;
|
||||
offsets.push(offset);
|
||||
});
|
||||
|
||||
if (keyframesOutOfRange) {
|
||||
context.errors.push(`Please ensure that all keyframe offsets are between 0 and 1`);
|
||||
}
|
||||
|
||||
if (offsetsOutOfOrder) {
|
||||
context.errors.push(`Please ensure that all keyframe offsets are in order`);
|
||||
}
|
||||
|
||||
const length = ast.steps.length;
|
||||
let generatedOffset = 0;
|
||||
if (totalKeyframesWithOffsets > 0 && totalKeyframesWithOffsets < length) {
|
||||
context.errors.push(`Not all style() steps within the declared keyframes() contain offsets`);
|
||||
} else if (totalKeyframesWithOffsets == 0) {
|
||||
generatedOffset = 1 / length;
|
||||
}
|
||||
|
||||
const limit = length - 1;
|
||||
const currentTime = context.currentTime;
|
||||
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;
|
||||
context.currentAnimateTimings.duration = durationUpToThisFrame;
|
||||
this.visitStyle(step, context);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export class AnimationValidatorContext {
|
||||
public errors: string[] = [];
|
||||
public currentTime: number = 0;
|
||||
public currentAnimateTimings: meta.AnimateTimings;
|
||||
public collectedStyles: {[propName: string]: StyleTimeTuple} = {};
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
/**
|
||||
* @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
|
||||
*/
|
||||
export abstract class AnimationStyleNormalizer {
|
||||
abstract normalizePropertyName(propertyName: string, errors: string[]): string;
|
||||
abstract normalizeStyleValue(
|
||||
userProvidedProperty: string, normalizedProperty: string, value: string|number,
|
||||
errors: string[]): string;
|
||||
}
|
||||
|
||||
export class NoOpAnimationStyleNormalizer {
|
||||
normalizePropertyName(propertyName: string, errors: string[]): string { return propertyName; }
|
||||
|
||||
normalizeStyleValue(
|
||||
userProvidedProperty: string, normalizedProperty: string, value: string|number,
|
||||
errors: string[]): string {
|
||||
return <any>value;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,48 @@
|
||||
/**
|
||||
* @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 {AnimationStyleNormalizer} from './animation_style_normalizer';
|
||||
|
||||
export class WebAnimationsStyleNormalizer extends AnimationStyleNormalizer {
|
||||
normalizePropertyName(propertyName: string, errors: string[]): string {
|
||||
return dashCaseToCamelCase(propertyName);
|
||||
}
|
||||
|
||||
normalizeStyleValue(
|
||||
userProvidedProperty: string, normalizedProperty: string, value: string|number,
|
||||
errors: string[]): string {
|
||||
let unit: string = '';
|
||||
const strVal = value.toString().trim();
|
||||
|
||||
if (DIMENSIONAL_PROP_MAP[normalizedProperty] && value !== 0 && value !== '0') {
|
||||
if (typeof value === 'number') {
|
||||
unit = 'px';
|
||||
} else {
|
||||
const valAndSuffixMatch = value.match(/^[+-]?[\d\.]+([a-z]*)$/);
|
||||
if (valAndSuffixMatch && valAndSuffixMatch[1].length == 0) {
|
||||
errors.push(`Please provide a CSS unit value for ${userProvidedProperty}:${value}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
return strVal + unit;
|
||||
}
|
||||
}
|
||||
|
||||
const DIMENSIONAL_PROP_MAP = makeBooleanMap(
|
||||
'width,height,minWidth,minHeight,maxWidth,maxHeight,left,top,bottom,right,fontSize,outlineWidth,outlineOffset,paddingTop,paddingLeft,paddingBottom,paddingRight,marginTop,marginLeft,marginBottom,marginRight,borderRadius,borderWidth,borderTopWidth,borderLeftWidth,borderRightWidth,borderBottomWidth,textIndent'
|
||||
.split(','));
|
||||
|
||||
function makeBooleanMap(keys: string[]): {[key: string]: boolean} {
|
||||
const map: {[key: string]: boolean} = {};
|
||||
keys.forEach(key => map[key] = true);
|
||||
return map;
|
||||
}
|
||||
|
||||
const DASH_CASE_REGEXP = /-+([a-z0-9])/g;
|
||||
export function dashCaseToCamelCase(input: string): string {
|
||||
return input.replace(DASH_CASE_REGEXP, (...m: any[]) => m[1].toUpperCase());
|
||||
}
|
||||
32
modules/@angular/animation/src/engine/animation_driver.ts
Normal file
32
modules/@angular/animation/src/engine/animation_driver.ts
Normal file
@ -0,0 +1,32 @@
|
||||
/**
|
||||
* @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 {AnimationPlayer} from '@angular/core';
|
||||
import {StyleData} from '../common/style_data';
|
||||
import {NoOpAnimationPlayer} from '../private_import_core';
|
||||
|
||||
/**
|
||||
* @experimental
|
||||
*/
|
||||
export class NoOpAnimationDriver implements AnimationDriver {
|
||||
animate(
|
||||
element: any, keyframes: StyleData[], duration: number, delay: number, easing: string,
|
||||
previousPlayers: AnimationPlayer[] = []): AnimationPlayer {
|
||||
return new NoOpAnimationPlayer();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @experimental
|
||||
*/
|
||||
export abstract class AnimationDriver {
|
||||
static NOOP: AnimationDriver = new NoOpAnimationDriver();
|
||||
abstract animate(
|
||||
element: any, keyframes: StyleData[], duration: number, delay: number, easing: string,
|
||||
previousPlayers?: AnimationPlayer[]): AnimationPlayer;
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
/**
|
||||
* @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 {TransitionInstruction} from '@angular/core';
|
||||
|
||||
export const enum AnimationTransitionInstructionType {TransitionAnimation, TimelineAnimation}
|
||||
|
||||
export interface AnimationEngineInstruction extends TransitionInstruction {
|
||||
type: AnimationTransitionInstructionType;
|
||||
}
|
||||
@ -0,0 +1,236 @@
|
||||
/**
|
||||
* @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 {AnimationPlayer, Injectable} from '@angular/core';
|
||||
import {StyleData} from '../common/style_data';
|
||||
import {AnimationTimelineInstruction} from '../dsl/animation_timeline_instruction';
|
||||
import {AnimationTransitionInstruction} from '../dsl/animation_transition_instruction';
|
||||
import {AnimationStyleNormalizer} from '../dsl/style_normalization/animation_style_normalizer';
|
||||
import {AnimationGroupPlayer, NoOpAnimationPlayer, TransitionEngine} from '../private_import_core';
|
||||
|
||||
import {AnimationDriver} from './animation_driver';
|
||||
import {AnimationEngineInstruction, AnimationTransitionInstructionType} from './animation_engine_instruction';
|
||||
|
||||
export declare type AnimationPlayerTuple = {
|
||||
element: any; player: AnimationPlayer;
|
||||
};
|
||||
|
||||
@Injectable()
|
||||
export class DomAnimationTransitionEngine extends TransitionEngine {
|
||||
private _flaggedInserts = new Set<any>();
|
||||
private _queuedRemovals: any[] = [];
|
||||
private _queuedAnimations: AnimationPlayerTuple[] = [];
|
||||
private _activeElementAnimations = new Map<any, AnimationPlayer[]>();
|
||||
private _activeTransitionAnimations = new Map<any, {[triggerName: string]: AnimationPlayer}>();
|
||||
|
||||
constructor(private _driver: AnimationDriver, private _normalizer: AnimationStyleNormalizer) {
|
||||
super();
|
||||
}
|
||||
|
||||
insertNode(container: any, element: any) {
|
||||
container.appendChild(element);
|
||||
this._flaggedInserts.add(element);
|
||||
}
|
||||
|
||||
removeNode(element: any) { this._queuedRemovals.push(element); }
|
||||
|
||||
process(element: any, instructions: AnimationEngineInstruction[]): AnimationPlayer {
|
||||
const players = instructions.map(instruction => {
|
||||
if (instruction.type == AnimationTransitionInstructionType.TransitionAnimation) {
|
||||
return this._handleTransitionAnimation(
|
||||
element, <AnimationTransitionInstruction>instruction);
|
||||
}
|
||||
if (instruction.type == AnimationTransitionInstructionType.TimelineAnimation) {
|
||||
return this._handleTimelineAnimation(
|
||||
element, <AnimationTimelineInstruction>instruction, []);
|
||||
}
|
||||
return new NoOpAnimationPlayer();
|
||||
});
|
||||
return optimizeGroupPlayer(players);
|
||||
}
|
||||
|
||||
private _handleTransitionAnimation(element: any, instruction: AnimationTransitionInstruction):
|
||||
AnimationPlayer {
|
||||
const triggerName = instruction.triggerName;
|
||||
const elmTransitionMap = getOrSetAsInMap(this._activeTransitionAnimations, element, {});
|
||||
|
||||
let previousPlayers: AnimationPlayer[];
|
||||
if (instruction.isRemovalTransition) {
|
||||
// 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)
|
||||
previousPlayers = copyArray(this._activeElementAnimations.get(element));
|
||||
} else {
|
||||
previousPlayers = [];
|
||||
const existingPlayer = elmTransitionMap[triggerName];
|
||||
if (existingPlayer) {
|
||||
previousPlayers.push(existingPlayer);
|
||||
}
|
||||
}
|
||||
|
||||
// it's important to do this step before destroying the players
|
||||
// so that the onDone callback below won't fire before this
|
||||
eraseStyles(element, instruction.fromStyles);
|
||||
|
||||
// we first run this so that the previous animation player
|
||||
// data can be passed into the successive animation players
|
||||
const players = instruction.timelines.map(
|
||||
timelineInstruction => this._buildPlayer(element, timelineInstruction, previousPlayers));
|
||||
|
||||
previousPlayers.forEach(previousPlayer => previousPlayer.destroy());
|
||||
|
||||
const player = optimizeGroupPlayer(players);
|
||||
player.onDone(() => {
|
||||
player.destroy();
|
||||
const elmTransitionMap = this._activeTransitionAnimations.get(element);
|
||||
if (elmTransitionMap) {
|
||||
delete elmTransitionMap[triggerName];
|
||||
if (Object.keys(elmTransitionMap).length == 0) {
|
||||
this._activeTransitionAnimations.delete(element);
|
||||
}
|
||||
}
|
||||
deleteFromArrayMap(this._activeElementAnimations, element, player);
|
||||
setStyles(element, instruction.toStyles);
|
||||
});
|
||||
|
||||
this._queuePlayer(element, player);
|
||||
elmTransitionMap[triggerName] = player;
|
||||
|
||||
return player;
|
||||
}
|
||||
|
||||
private _handleTimelineAnimation(
|
||||
element: any, instruction: AnimationTimelineInstruction,
|
||||
previousPlayers: AnimationPlayer[]): AnimationPlayer {
|
||||
const player = this._buildPlayer(element, instruction, previousPlayers);
|
||||
player.onDestroy(() => { deleteFromArrayMap(this._activeElementAnimations, element, player); });
|
||||
this._queuePlayer(element, player);
|
||||
return player;
|
||||
}
|
||||
|
||||
private _buildPlayer(
|
||||
element: any, instruction: AnimationTimelineInstruction,
|
||||
previousPlayers: AnimationPlayer[]): AnimationPlayer {
|
||||
return this._driver.animate(
|
||||
element, this._normalizeKeyframes(instruction.keyframes), instruction.duration,
|
||||
instruction.delay, instruction.easing, previousPlayers);
|
||||
}
|
||||
|
||||
private _normalizeKeyframes(keyframes: StyleData[]): StyleData[] {
|
||||
const errors: string[] = [];
|
||||
const normalizedKeyframes: StyleData[] = [];
|
||||
keyframes.forEach(kf => {
|
||||
const normalizedKeyframe: StyleData = {};
|
||||
Object.keys(kf).forEach(prop => {
|
||||
let normalizedProp = prop;
|
||||
let normalizedValue = kf[prop];
|
||||
if (prop != 'offset') {
|
||||
normalizedProp = this._normalizer.normalizePropertyName(prop, errors);
|
||||
normalizedValue =
|
||||
this._normalizer.normalizeStyleValue(prop, normalizedProp, kf[prop], errors);
|
||||
}
|
||||
normalizedKeyframe[normalizedProp] = normalizedValue;
|
||||
});
|
||||
normalizedKeyframes.push(normalizedKeyframe);
|
||||
});
|
||||
if (errors.length) {
|
||||
const LINE_START = '\n - ';
|
||||
throw new Error(
|
||||
`Unable to animate due to the following errors:${LINE_START}${errors.join(LINE_START)}`);
|
||||
}
|
||||
return normalizedKeyframes;
|
||||
}
|
||||
|
||||
private _queuePlayer(element: any, player: AnimationPlayer) {
|
||||
const tuple = <AnimationPlayerTuple>{element, player};
|
||||
this._queuedAnimations.push(tuple);
|
||||
player.init();
|
||||
|
||||
const elementAnimations = getOrSetAsInMap(this._activeElementAnimations, element, []);
|
||||
elementAnimations.push(player);
|
||||
}
|
||||
|
||||
triggerAnimations() {
|
||||
while (this._queuedAnimations.length) {
|
||||
const {player, element} = this._queuedAnimations.shift();
|
||||
// in the event that an animation throws an error then we do
|
||||
// not want to re-run animations on any previous animations
|
||||
// if they have already been kicked off beforehand
|
||||
if (!player.hasStarted()) {
|
||||
player.play();
|
||||
}
|
||||
}
|
||||
|
||||
this._queuedRemovals.forEach(element => {
|
||||
if (this._flaggedInserts.has(element)) return;
|
||||
|
||||
let parent = element;
|
||||
let players: AnimationPlayer[];
|
||||
while (parent = parent.parentNode) {
|
||||
const match = this._activeElementAnimations.get(parent);
|
||||
if (match) {
|
||||
players = match;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (players) {
|
||||
optimizeGroupPlayer(players).onDone(() => remove(element));
|
||||
} else {
|
||||
if (element.parentNode) {
|
||||
remove(element);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
this._queuedRemovals = [];
|
||||
this._flaggedInserts.clear();
|
||||
}
|
||||
}
|
||||
|
||||
function getOrSetAsInMap(map: Map<any, any>, key: any, defaultValue: any) {
|
||||
let value = map.get(key);
|
||||
if (!value) {
|
||||
map.set(key, value = defaultValue);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function deleteFromArrayMap(map: Map<any, any[]>, key: any, value: any) {
|
||||
let arr = map.get(key);
|
||||
if (arr) {
|
||||
const index = arr.indexOf(value);
|
||||
if (index >= 0) {
|
||||
arr.splice(index, 1);
|
||||
if (arr.length == 0) {
|
||||
map.delete(key);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setStyles(element: any, styles: StyleData) {
|
||||
Object.keys(styles).forEach(prop => { element.style[prop] = styles[prop]; });
|
||||
}
|
||||
|
||||
function eraseStyles(element: any, styles: StyleData) {
|
||||
Object.keys(styles).forEach(prop => {
|
||||
// IE requires '' instead of null
|
||||
// see https://github.com/angular/angular/issues/7916
|
||||
element.style[prop] = '';
|
||||
});
|
||||
}
|
||||
|
||||
function optimizeGroupPlayer(players: AnimationPlayer[]): AnimationPlayer {
|
||||
return players.length == 1 ? players[0] : new AnimationGroupPlayer(players);
|
||||
}
|
||||
|
||||
function copyArray(source: any[]): any[] {
|
||||
return source ? source.splice(0) : [];
|
||||
}
|
||||
|
||||
function remove(element: any) {
|
||||
element.parentNode.removeChild(element);
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
/**
|
||||
* @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
|
||||
*/
|
||||
|
||||
export interface DOMAnimation {
|
||||
cancel(): void;
|
||||
play(): void;
|
||||
pause(): void;
|
||||
finish(): void;
|
||||
onfinish: Function;
|
||||
position: number;
|
||||
currentTime: number;
|
||||
addEventListener(eventName: string, handler: (event: any) => any): any;
|
||||
dispatchEvent(eventName: string): any;
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
/**
|
||||
* @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 {AnimationPlayer} from '@angular/core';
|
||||
|
||||
import {StyleData} from '../../common/style_data';
|
||||
import {AnimationDriver} from '../animation_driver';
|
||||
|
||||
import {WebAnimationsPlayer} from './web_animations_player';
|
||||
|
||||
export class WebAnimationsDriver implements AnimationDriver {
|
||||
animate(
|
||||
element: any, keyframes: StyleData[], duration: number, delay: number, easing: string,
|
||||
previousPlayers: AnimationPlayer[] = []): WebAnimationsPlayer {
|
||||
const playerOptions: {[key: string]: string |
|
||||
number} = {'duration': duration, 'delay': delay, 'fill': 'forwards'};
|
||||
|
||||
// we check for this to avoid having a null|undefined value be present
|
||||
// for the easing (which results in an error for certain browsers #9752)
|
||||
if (easing) {
|
||||
playerOptions['easing'] = easing;
|
||||
}
|
||||
|
||||
const previousWebAnimationPlayers = <WebAnimationsPlayer[]>previousPlayers.filter(
|
||||
player => { return player instanceof WebAnimationsPlayer; });
|
||||
return new WebAnimationsPlayer(element, keyframes, playerOptions, previousWebAnimationPlayers);
|
||||
}
|
||||
}
|
||||
|
||||
export function supportsWebAnimations() {
|
||||
return typeof Element !== 'undefined' && typeof(<any>Element).prototype['animate'] === 'function';
|
||||
}
|
||||
@ -0,0 +1,194 @@
|
||||
/**
|
||||
* @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 {AUTO_STYLE, AnimationPlayer} from '@angular/core';
|
||||
|
||||
import {DOMAnimation} from './dom_animation';
|
||||
|
||||
export class WebAnimationsPlayer implements AnimationPlayer {
|
||||
private _onDoneFns: Function[] = [];
|
||||
private _onStartFns: Function[] = [];
|
||||
private _onDestroyFns: Function[] = [];
|
||||
private _player: DOMAnimation;
|
||||
private _duration: number;
|
||||
private _initialized = false;
|
||||
private _finished = false;
|
||||
private _started = false;
|
||||
private _destroyed = false;
|
||||
private _finalKeyframe: {[key: string]: string | number};
|
||||
|
||||
public parentPlayer: AnimationPlayer = null;
|
||||
public previousStyles: {[styleName: string]: string | number};
|
||||
|
||||
constructor(
|
||||
public element: any, public keyframes: {[key: string]: string | number}[],
|
||||
public options: {[key: string]: string | number},
|
||||
previousPlayers: WebAnimationsPlayer[] = []) {
|
||||
this._duration = <number>options['duration'];
|
||||
|
||||
this.previousStyles = {};
|
||||
previousPlayers.forEach(player => {
|
||||
let styles = player._captureStyles();
|
||||
Object.keys(styles).forEach(prop => this.previousStyles[prop] = styles[prop]);
|
||||
});
|
||||
}
|
||||
|
||||
private _onFinish() {
|
||||
if (!this._finished) {
|
||||
this._finished = true;
|
||||
this._onDoneFns.forEach(fn => fn());
|
||||
this._onDoneFns = [];
|
||||
}
|
||||
}
|
||||
|
||||
init(): void {
|
||||
if (this._initialized) return;
|
||||
this._initialized = true;
|
||||
|
||||
const keyframes = this.keyframes.map(styles => {
|
||||
const formattedKeyframe: {[key: string]: string | number} = {};
|
||||
Object.keys(styles).forEach((prop, index) => {
|
||||
let value = styles[prop];
|
||||
if (value == AUTO_STYLE) {
|
||||
value = _computeStyle(this.element, prop);
|
||||
}
|
||||
if (value != undefined) {
|
||||
formattedKeyframe[prop] = value;
|
||||
}
|
||||
});
|
||||
return formattedKeyframe;
|
||||
});
|
||||
|
||||
const previousStyleProps = Object.keys(this.previousStyles);
|
||||
if (previousStyleProps.length) {
|
||||
let startingKeyframe = keyframes[0];
|
||||
let missingStyleProps: string[] = [];
|
||||
previousStyleProps.forEach(prop => {
|
||||
if (startingKeyframe[prop] != null) {
|
||||
missingStyleProps.push(prop);
|
||||
}
|
||||
startingKeyframe[prop] = this.previousStyles[prop];
|
||||
});
|
||||
|
||||
if (missingStyleProps.length) {
|
||||
for (let i = 1; i < keyframes.length; i++) {
|
||||
let kf = keyframes[i];
|
||||
missingStyleProps.forEach(prop => { kf[prop] = _computeStyle(this.element, prop); });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this._player = this._triggerWebAnimation(this.element, keyframes, this.options);
|
||||
this._finalKeyframe = _copyKeyframeStyles(keyframes[keyframes.length - 1]);
|
||||
|
||||
// this is required so that the player doesn't start to animate right away
|
||||
this._resetDomPlayerState();
|
||||
this._player.addEventListener('finish', () => this._onFinish());
|
||||
}
|
||||
|
||||
/** @internal */
|
||||
_triggerWebAnimation(element: any, keyframes: any[], options: any): DOMAnimation {
|
||||
// jscompiler doesn't seem to know animate is a native property because it's not fully
|
||||
// supported yet across common browsers (we polyfill it for Edge/Safari) [CL #143630929]
|
||||
return <DOMAnimation>element['animate'](keyframes, options);
|
||||
}
|
||||
|
||||
get domPlayer() { return this._player; }
|
||||
|
||||
onStart(fn: () => void): void { this._onStartFns.push(fn); }
|
||||
|
||||
onDone(fn: () => void): void { this._onDoneFns.push(fn); }
|
||||
|
||||
onDestroy(fn: () => void): void { this._onDestroyFns.push(fn); }
|
||||
|
||||
play(): void {
|
||||
this.init();
|
||||
if (!this.hasStarted()) {
|
||||
this._onStartFns.forEach(fn => fn());
|
||||
this._onStartFns = [];
|
||||
this._started = true;
|
||||
}
|
||||
this._player.play();
|
||||
}
|
||||
|
||||
pause(): void {
|
||||
this.init();
|
||||
this._player.pause();
|
||||
}
|
||||
|
||||
finish(): void {
|
||||
this.init();
|
||||
this._onFinish();
|
||||
this._player.finish();
|
||||
}
|
||||
|
||||
reset(): void {
|
||||
this._resetDomPlayerState();
|
||||
this._destroyed = false;
|
||||
this._finished = false;
|
||||
this._started = false;
|
||||
}
|
||||
|
||||
private _resetDomPlayerState() {
|
||||
if (this._player) {
|
||||
this._player.cancel();
|
||||
}
|
||||
}
|
||||
|
||||
restart(): void {
|
||||
this.reset();
|
||||
this.play();
|
||||
}
|
||||
|
||||
hasStarted(): boolean { return this._started; }
|
||||
|
||||
destroy(): void {
|
||||
if (!this._destroyed) {
|
||||
this._resetDomPlayerState();
|
||||
this._onFinish();
|
||||
this._destroyed = true;
|
||||
this._onDestroyFns.forEach(fn => fn());
|
||||
this._onDestroyFns = [];
|
||||
}
|
||||
}
|
||||
|
||||
get totalTime(): number { return this._duration; }
|
||||
|
||||
setPosition(p: number): void { this._player.currentTime = p * this.totalTime; }
|
||||
|
||||
getPosition(): number { return this._player.currentTime / this.totalTime; }
|
||||
|
||||
private _captureStyles(): {[prop: string]: string | number} {
|
||||
const styles: {[key: string]: string | number} = {};
|
||||
if (this.hasStarted()) {
|
||||
Object.keys(this._finalKeyframe).forEach(prop => {
|
||||
if (prop != 'offset') {
|
||||
styles[prop] =
|
||||
this._finished ? this._finalKeyframe[prop] : _computeStyle(this.element, prop);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return styles;
|
||||
}
|
||||
}
|
||||
|
||||
function _computeStyle(element: any, prop: string): string {
|
||||
return (<any>window.getComputedStyle(element))[prop];
|
||||
}
|
||||
|
||||
function _copyKeyframeStyles(styles: {[style: string]: string | number}):
|
||||
{[style: string]: string | number} {
|
||||
const newStyles: {[style: string]: string | number} = {};
|
||||
Object.keys(styles).forEach(prop => {
|
||||
if (prop != 'offset') {
|
||||
newStyles[prop] = styles[prop];
|
||||
}
|
||||
});
|
||||
return newStyles;
|
||||
}
|
||||
13
modules/@angular/animation/src/private_import_core.ts
Normal file
13
modules/@angular/animation/src/private_import_core.ts
Normal file
@ -0,0 +1,13 @@
|
||||
/**
|
||||
* @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 {__core_private__ as r} from '@angular/core';
|
||||
|
||||
export const AnimationGroupPlayer: typeof r.AnimationGroupPlayer = r.AnimationGroupPlayer;
|
||||
export const NoOpAnimationPlayer: typeof r.NoOpAnimationPlayer = r.NoOpAnimationPlayer;
|
||||
export const TransitionEngine: typeof r.TransitionEngine = r.TransitionEngine;
|
||||
19
modules/@angular/animation/src/version.ts
Normal file
19
modules/@angular/animation/src/version.ts
Normal file
@ -0,0 +1,19 @@
|
||||
/**
|
||||
* @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
|
||||
*/
|
||||
|
||||
/**
|
||||
* @module
|
||||
* @description
|
||||
* Entry point for all public APIs of the animation package.
|
||||
*/
|
||||
|
||||
import {Version} from '@angular/core';
|
||||
/**
|
||||
* @stable
|
||||
*/
|
||||
export const VERSION = new Version('0.0.0-PLACEHOLDER');
|
||||
Reference in New Issue
Block a user