cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(animations): make animations work in AOT (#14775)

Browse Source
This commit is contained in:
Matias Niemelä
2017-03-01 17:13:06 -08:00
committed by Igor Minar
parent 3168ef75da
commit 9560ad81b9
13 changed files with 119 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
modules/@angular/platform-browser/animations/src/dsl/animation_timeline_visitor.ts
View File

@ -278,7 +278,7 @@ export class AnimationTimelineVisitor implements AnimationDslVisitor {
const firstKeyframe = ast.steps[0];
let offsetGap = 0;
const containsOffsets = firstKeyframe.styles.find(styles => styles['offset'] >= 0);
const containsOffsets = getOffset(firstKeyframe) != null;
if (!containsOffsets) {
offsetGap = MAX_KEYFRAME_OFFSET / limit;
}
@ -291,8 +291,9 @@ export class AnimationTimelineVisitor implements AnimationDslVisitor {
ast.steps.forEach((step: AnimationStyleMetadata, i: number) => {
const normalizedStyles = normalizeStyles(step.styles);
const offset = containsOffsets ? <number>normalizedStyles['offset'] :
(i == limit ? MAX_KEYFRAME_OFFSET : i * offsetGap);
const offset = containsOffsets ?
(step.offset != null ? step.offset : parseFloat(normalizedStyles['offset'] as string)) :
(i == limit ? MAX_KEYFRAME_OFFSET : i * offsetGap);
innerTimeline.forwardTime(offset * duration);
innerTimeline.setStyles(normalizedStyles);
});
@ -424,3 +425,22 @@ export class TimelineBuilder {
return createTimelineInstruction(finalKeyframes, this.duration, this.startTime, this.easing);
}
}
function getOffset(ast: AnimationStyleMetadata): number {
let offset = ast.offset;
if (offset == null) {
const styles = ast.styles;
if (Array.isArray(styles)) {
for (let i = 0; i < styles.length; i++) {
const o = styles[i]['offset'] as number;
if (o != null) {
offset = o;
break;
}
}
} else {
offset = styles['offset'] as number;
}
}
return offset;
}

8
modules/@angular/platform-browser/animations/src/dsl/animation_transition_factory.ts
View File

@ -5,7 +5,8 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {AnimationMetadata, AnimationTransitionMetadata, ɵStyleData} from '@angular/animations';
import {AnimationMetadata, AnimationTransitionMetadata, sequence, ɵStyleData} from '@angular/animations';
import {buildAnimationKeyframes} from './animation_timeline_visitor';
import {TransitionMatcherFn} from './animation_transition_expr';
import {AnimationTransitionInstruction, createTransitionInstruction} from './animation_transition_instruction';
@ -17,7 +18,10 @@ export class AnimationTransitionFactory {
private _triggerName: string, ast: AnimationTransitionMetadata,
private matchFns: TransitionMatcherFn[],
private _stateStyles: {[stateName: string]: ɵStyleData}) {
this._animationAst = ast.animation;
const normalizedAst = Array.isArray(ast.animation) ?
sequence(<AnimationMetadata[]>ast.animation) :
<AnimationMetadata>ast.animation;
this._animationAst = normalizedAst;
}
match(currentState: any, nextState: any): AnimationTransitionInstruction {

24
modules/@angular/platform-browser/animations/src/dsl/animation_trigger.ts
View File

@ -93,9 +93,23 @@ class AnimationTriggerVisitor implements AnimationDslVisitor {
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) {}
visitSequence(ast: AnimationSequenceMetadata, context: any) {
// these values are not visited in this AST
}
visitGroup(ast: AnimationGroupMetadata, context: any) {
// these values are not visited in this AST
}
visitAnimate(ast: AnimationAnimateMetadata, context: any) {
// these values are not visited in this AST
}
visitStyle(ast: AnimationStyleMetadata, context: any) {
// these values are not visited in this AST
}
visitKeyframeSequence(ast: AnimationKeyframesSequenceMetadata, context: any) {
// these values are not visited in this AST
}
}

14
modules/@angular/platform-browser/animations/src/dsl/animation_validator_visitor.ts
View File

@ -5,7 +5,7 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {AnimateTimings, AnimationAnimateMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationSequenceMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata} from '@angular/animations';
import {AnimateTimings, AnimationAnimateMetadata, AnimationGroupMetadata, AnimationKeyframesSequenceMetadata, AnimationMetadata, AnimationMetadataType, AnimationSequenceMetadata, AnimationStateMetadata, AnimationStyleMetadata, AnimationTransitionMetadata, sequence} from '@angular/animations';
import {normalizeStyles, parseTimeExpression} from '../util';
@ -52,7 +52,9 @@ export type StyleTimeTuple = {
* Otherwise an error will be thrown.
*/
export function validateAnimationSequence(ast: AnimationMetadata) {
return new AnimationValidatorVisitor().validate(ast);
const normalizedAst =
Array.isArray(ast) ? sequence(<AnimationMetadata[]>ast) : <AnimationMetadata>ast;
return new AnimationValidatorVisitor().validate(normalizedAst);
}
export class AnimationValidatorVisitor implements AnimationDslVisitor {
@ -62,9 +64,13 @@ export class AnimationValidatorVisitor implements AnimationDslVisitor {
return context.errors;
}
visitState(ast: AnimationStateMetadata, context: any): any {}
visitState(ast: AnimationStateMetadata, context: any): any {
// these values are not visited in this AST
}
visitTransition(ast: AnimationTransitionMetadata, context: any): any {}
visitTransition(ast: AnimationTransitionMetadata, context: any): any {
// these values are not visited in this AST
}
visitSequence(ast: AnimationSequenceMetadata, context: AnimationValidatorContext): any {
ast.steps.forEach(step => visitAnimationNode(this, step, context));

8
modules/@angular/platform-browser/animations/src/util.ts
View File

@ -49,9 +49,13 @@ export function parseTimeExpression(exp: string | number, errors: string[]): Ani
return {duration, delay, easing};
}
export function normalizeStyles(styles: ɵStyleData[]): ɵStyleData {
export function normalizeStyles(styles: ɵStyleData | ɵStyleData[]): ɵStyleData {
const normalizedStyles: ɵStyleData = {};
styles.forEach(data => copyStyles(data, false, normalizedStyles));
if (Array.isArray(styles)) {
styles.forEach(data => copyStyles(data, false, normalizedStyles));
} else {
copyStyles(styles, false, normalizedStyles);
}
return normalizedStyles;
}

34
modules/@angular/platform-browser/animations/test/dsl/animation_spec.ts
View File

@ -5,7 +5,7 @@
* 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, AnimationMetadata, animate, group, keyframes, sequence, style, ɵStyleData} from '@angular/animations';
import {AUTO_STYLE, AnimationMetadata, AnimationMetadataType, animate, group, keyframes, sequence, style, ɵStyleData} from '@angular/animations';
import {Animation} from '../../src/dsl/animation';
import {AnimationTimelineInstruction} from '../../src/dsl/animation_timeline_instruction';
@ -374,6 +374,38 @@ export function main() {
expect(finalAnimatePlayerKeyframes[0]['height']).toEqual('300px');
expect(finalAnimatePlayerKeyframes[1]['height']).toEqual('500px');
});
it('should respect offsets if provided directly within the style data', () => {
const steps = animate(1000, keyframes([
style({opacity: 0, offset: 0}), style({opacity: .6, offset: .6}),
style({opacity: 1, offset: 1})
]));
const players = invokeAnimationSequence(steps);
expect(players.length).toEqual(1);
const player = players[0];
expect(player.keyframes).toEqual([
{opacity: 0, offset: 0}, {opacity: .6, offset: .6}, {opacity: 1, offset: 1}
]);
});
it('should respect offsets if provided directly within the style metadata type', () => {
const steps =
animate(1000, keyframes([
{type: AnimationMetadataType.Style, offset: 0, styles: {opacity: 0}},
{type: AnimationMetadataType.Style, offset: .4, styles: {opacity: .4}},
{type: AnimationMetadataType.Style, offset: 1, styles: {opacity: 1}},
]));
const players = invokeAnimationSequence(steps);
expect(players.length).toEqual(1);
const player = players[0];
expect(player.keyframes).toEqual([
{opacity: 0, offset: 0}, {opacity: .4, offset: .4}, {opacity: 1, offset: 1}
]);
});
});
describe('group()', () => {