Skip to content

Commit

Permalink
fix(animations): make sure easing values work with web-animations (an…
Browse files Browse the repository at this point in the history
  • Loading branch information
matsko authored and mhevery committed Mar 17, 2017
1 parent 2a0e55f commit f925910
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 23 deletions.
35 changes: 22 additions & 13 deletions packages/animations/browser/src/dsl/animation_timeline_visitor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -267,14 +267,18 @@ export class AnimationTimelineVisitor implements AnimationDslVisitor {

const normalizedStyles = normalizeStyles(ast.styles);
const easing = context.currentAnimateTimings && context.currentAnimateTimings.easing;
if (easing) {
normalizedStyles['easing'] = easing;
}

context.currentTimeline.setStyles(normalizedStyles);
this._applyStyles(normalizedStyles, easing, context);
context.previousNode = ast;
}

private _applyStyles(styles: ɵStyleData, easing: string, context: AnimationTimelineContext) {
if (styles.hasOwnProperty('easing')) {
easing = easing || styles['easing'] as string;
delete styles['easing'];
}
context.currentTimeline.setStyles(styles, easing);
}

visitKeyframeSequence(
ast: AnimationKeyframesSequenceMetadata, context: AnimationTimelineContext) {
const MAX_KEYFRAME_OFFSET = 1;
Expand All @@ -299,7 +303,7 @@ export class AnimationTimelineVisitor implements AnimationDslVisitor {
(step.offset != null ? step.offset : parseFloat(normalizedStyles['offset'] as string)) :
(i == limit ? MAX_KEYFRAME_OFFSET : i * offsetGap);
innerTimeline.forwardTime(offset * duration);
innerTimeline.setStyles(normalizedStyles);
this._applyStyles(normalizedStyles, null, innerContext);
});

// this will ensure that the parent timeline gets all the styles from
Expand All @@ -316,6 +320,7 @@ export class AnimationTimelineVisitor implements AnimationDslVisitor {
export class TimelineBuilder {
public duration: number = 0;
public easing: string = '';
private _previousKeyframe: ɵStyleData = {};
private _currentKeyframe: ɵStyleData;
private _keyframes = new Map<number, ɵStyleData>();
private _styleSummary: {[prop: string]: StyleAtTime} = {};
Expand All @@ -339,6 +344,9 @@ export class TimelineBuilder {
}

private _loadKeyframe() {
if (this._currentKeyframe) {
this._previousKeyframe = this._currentKeyframe;
}
this._currentKeyframe = this._keyframes.get(this.duration);
if (!this._currentKeyframe) {
this._currentKeyframe = Object.create(this._backFill, {});
Expand All @@ -357,19 +365,20 @@ export class TimelineBuilder {
}

private _updateStyle(prop: string, value: string|number) {
if (prop != 'easing') {
this._localTimelineStyles[prop] = value;
this._globalTimelineStyles[prop] = value;
this._styleSummary[prop] = {time: this.currentTime, value};
}
this._localTimelineStyles[prop] = value;
this._globalTimelineStyles[prop] = value;
this._styleSummary[prop] = {time: this.currentTime, value};
}

setStyles(styles: ɵStyleData) {
setStyles(styles: ɵStyleData, easing: string = null) {
if (easing) {
this._previousKeyframe['easing'] = easing;
}
Object.keys(styles).forEach(prop => {
if (prop !== 'offset') {
const val = styles[prop];
this._currentKeyframe[prop] = val;
if (prop !== 'easing' && !this._localTimelineStyles[prop]) {
if (!this._localTimelineStyles[prop]) {
this._backFill[prop] = this._globalTimelineStyles[prop] || AUTO_STYLE;
}
this._updateStyle(prop, val);
Expand Down
19 changes: 9 additions & 10 deletions packages/animations/browser/test/dsl/animation_spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -160,9 +160,9 @@ export function main() {
];

const player = invokeAnimationSequence(steps)[0];
const lastKeyframe = player.keyframes[1];
const lastKeyframeEasing = <string>lastKeyframe['easing'];
expect(lastKeyframeEasing.replace(/\s+/g, '')).toEqual('cubic-bezier(.29,.55,.53,1.53)');
const firstKeyframe = player.keyframes[0];
const firstKeyframeEasing = firstKeyframe['easing'] as string;
expect(firstKeyframeEasing.replace(/\s+/g, '')).toEqual('cubic-bezier(.29,.55,.53,1.53)');
});
});

Expand Down Expand Up @@ -524,8 +524,8 @@ export function main() {

const player = invokeAnimationSequence(steps)[0];
expect(player.keyframes).toEqual([
{opacity: 0, offset: 0}, {opacity: 0, offset: .25},
{opacity: 1, offset: 1, easing: 'ease-out'}
{opacity: 0, offset: 0}, {opacity: 0, offset: .25, easing: 'ease-out'},
{opacity: 1, offset: 1}
]);
});

Expand All @@ -540,9 +540,8 @@ export function main() {

const player = players[0];
expect(player.keyframes).toEqual([
{width: 0, offset: 0}, {width: 10, offset: .25, easing: 'linear'},
{width: 20, offset: .75, easing: 'ease-out'},
{width: 30, offset: 1, easing: 'ease-in'}
{width: 0, offset: 0, easing: 'linear'}, {width: 10, offset: .25, easing: 'ease-out'},
{width: 20, offset: .75, easing: 'ease-in'}, {width: 30, offset: 1}
]);
});

Expand Down Expand Up @@ -626,8 +625,8 @@ export function main() {

const players = invokeAnimationSequence(steps, fromStyles, toStyles);
expect(players[0].keyframes).toEqual([
{background: 'blue', offset: 0},
{background: 'red', easing: 'ease-out', offset: 1}
{background: 'blue', offset: 0, easing: 'ease-out'},
{background: 'red', offset: 1}
]);
});
});
Expand Down

0 comments on commit f925910

Please sign in to comment.