From 7c4dc9535cf07aa28545a15183a42b835ea347f8 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 18 Jul 2019 15:54:48 -0400 Subject: [PATCH] add progress methods, use force linear --- core/src/components/nav/nav.tsx | 3 +- core/src/utils/animation/animation.ts | 82 ++++++++++++------- .../utils/animation/test/animation.spec.ts | 10 +++ core/src/utils/transition/index.ts | 3 +- 4 files changed, 66 insertions(+), 32 deletions(-) diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx index 46e6834fdf..29d4cf1e6d 100644 --- a/core/src/components/nav/nav.tsx +++ b/core/src/components/nav/nav.tsx @@ -953,9 +953,8 @@ export class Nav implements NavOutlet { } private onMove(stepValue: number) { - console.log('step', stepValue, this.sbAni); if (this.sbAni) { - (this.sbAni as any).playStep(stepValue); + (this.sbAni as any).progressStep(stepValue); } } diff --git a/core/src/utils/animation/animation.ts b/core/src/utils/animation/animation.ts index a09a121ca2..b1128a71d2 100644 --- a/core/src/utils/animation/animation.ts +++ b/core/src/utils/animation/animation.ts @@ -15,11 +15,13 @@ export interface Animation { animationFinish(): void; play(): Animation; - playStep(step: number): Animation; pause(): Animation; stop(): Animation; destroy(): Animation; - progressStart(): Animation; + + progressStart(forceLinearEasing: boolean): Animation; + progressStep(step: number): Animation; + progressEnd(shouldComplete: boolean, step: number): Animation; from(property: string, value: any): Animation; to(property: string, value: any): Animation; @@ -142,7 +144,6 @@ export const createAnimation = (animationNameValue: string | undefined): Animati let _iterations: number | undefined; let _fill: 'auto' | 'none' | 'forwards' | 'backwards' | 'both' | undefined; let _direction: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse' | undefined; - let _keyframes: any[] = []; let initialized = false; @@ -163,6 +164,8 @@ export const createAnimation = (animationNameValue: string | undefined): Animati let onFinishCallback: any | undefined; let numAnimationsRunning = 0; + + let shouldForceLinearEasing = false; /** * Destroy this animation and all child animations. @@ -321,6 +324,7 @@ export const createAnimation = (animationNameValue: string | undefined): Animati }; const getEasing = (): string | undefined => { + if (shouldForceLinearEasing) { return 'linear'; } if (_easing !== undefined) { return _easing; } if (parentAnimation) { return parentAnimation.getEasing(); } @@ -347,7 +351,7 @@ export const createAnimation = (animationNameValue: string | undefined): Animati return undefined; }; - + const getKeyframes = (): any[] => { return _keyframes; }; @@ -520,7 +524,8 @@ export const createAnimation = (animationNameValue: string | undefined): Animati iterationsCount = (getIterations() === Infinity) ? 'infinite' : getIterations()!.toString(); } - element.style.setProperty('animation-directiteration-countion', iterationsCount); + element.style.setProperty('animation-iteration-countion', iterationsCount); + element.style.setProperty('animation-play-state', 'paused'); }); if (elements.length > 0) { @@ -571,30 +576,58 @@ export const createAnimation = (animationNameValue: string | undefined): Animati initialized = true; }; - const playStep = (step: number): Animation => { + const progressStep = (step: number): Animation => { + if (step > 1) { + step = 0.99; + } else if (step < 0) { + step = 0; + } + childAnimations.forEach(animation => { - animation.playStep(step); + animation.progressStep(step); }); - - progressStart(); - pause(); - + if (getDuration() !== undefined) { if (supportsWebAnimations()) { webAnimations.forEach(animation => { animation.currentTime = animation.effect.getComputedTiming().delay + (getDuration()! * step); + animation.pause(); }); } else { const animationDuration = `-${getDuration()! * step}ms`; - + elements.forEach(element => { (element as HTMLElement).style.animationDelay = animationDuration; + (element as HTMLElement).style.animationPlayState = 'paused'; }); } } return generatePublicAPI(); }; + + const progressStart = (forceLinearEasing = false): Animation => { + childAnimations.forEach(animation => { + animation.progressStart(forceLinearEasing); + }); + + shouldForceLinearEasing = forceLinearEasing; + + if (!initialized) { + initializeAnimation(); + } + + return generatePublicAPI(); + }; + + const progressEnd = (shouldComplete: boolean, step: number): Animation => { + shouldComplete; + step; + + shouldForceLinearEasing = false; + + return generatePublicAPI(); + }; const pause = (): Animation => { childAnimations.forEach(animation => { @@ -620,8 +653,10 @@ export const createAnimation = (animationNameValue: string | undefined): Animati childAnimations.forEach(animation => { animation.play(); }); - - progressStart(true); + + if (!initialized) { + initializeAnimation(); + } if (supportsWebAnimations()) { webAnimations.forEach(animation => { @@ -695,19 +730,6 @@ export const createAnimation = (animationNameValue: string | undefined): Animati return from(property, fromValue).to(property, toValue); }; - const progressStart = (reset = false): Animation => { - if (initialized && reset) { - initialized = false; - cleanUpElements(); - } - - if (!initialized) { - initializeAnimation(); - } - - return generatePublicAPI(); - }; - const generatePublicAPI = (): Animation => { return { parentAnimation, @@ -729,7 +751,6 @@ export const createAnimation = (animationNameValue: string | undefined): Animati play, pause, stop, - playStep, destroy, keyframes, addAnimation, @@ -758,7 +779,10 @@ export const createAnimation = (animationNameValue: string | undefined): Animati beforeRemoveClass, beforeAddClass, onFinish, - progressStart + + progressStart, + progressStep, + progressEnd }; }; diff --git a/core/src/utils/animation/test/animation.spec.ts b/core/src/utils/animation/test/animation.spec.ts index be3de990e9..fdbbc764a3 100644 --- a/core/src/utils/animation/test/animation.spec.ts +++ b/core/src/utils/animation/test/animation.spec.ts @@ -293,6 +293,16 @@ describe('Animation Class', () => { expect(childAnimation.getEasing()).toEqual('linear'); }); + it('should get linear easing when forceLinear is set', () => { + animation.easing('ease-in-out'); + + animation.progressStart(true); + expect(animation.getEasing()).toEqual('linear'); + + animation.progressEnd(); + expect(animation.getEasing()).toEqual('ease-in-out'); + }); + it('should get undefined when duration not set', () => { expect(animation.getDuration()).toEqual(undefined); }); diff --git a/core/src/utils/transition/index.ts b/core/src/utils/transition/index.ts index 36e13d5100..7ba78d71ee 100644 --- a/core/src/utils/transition/index.ts +++ b/core/src/utils/transition/index.ts @@ -148,7 +148,8 @@ const playTransition = async (trans: any, opts: TransitionOptions): Promise