javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 08:09:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(animation): add cubic-bezier conversions for gesture animations (#19134)

Browse Source 
* enable linear easing switch on progressEnd

* Add easing to menu

* remove console log

* Add tests

* clean up code

* update comments
This commit is contained in:
Liam DeBeasi
2019-08-19 13:18:49 -04:00
committed by GitHub
parent fd65765bdf
commit 5a2c441b3c
7 changed files with 226 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
core/src/components/nav/nav.tsx
View File

@ -3,6 +3,7 @@ import { Build, Component, Element, Event, EventEmitter, Method, Prop, Watch, h
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
import { Animation, AnimationBuilder, ComponentProps, FrameworkDelegate, Gesture, IonicAnimation, NavComponent, NavOptions, NavOutlet, NavResult, RouteID, RouteWrite, RouterDirection, TransitionDoneFn, TransitionInstruction, ViewController } from '../../interface';
import { Point, getTimeGivenProgression } from '../../utils/animation/cubic-bezier';
import { assert } from '../../utils/helpers';
import { TransitionOptions, lifecycle, setPageHidden, transition } from '../../utils/transition';
@ -966,7 +967,26 @@ export class Nav implements NavOutlet {
this.sbAni.onFinish(() => {
this.animationEnabled = true;
}, { oneTimeCallback: true });
this.sbAni.progressEnd(shouldComplete, stepValue, dur);
// Account for rounding errors in JS
let newStepValue = (shouldComplete) ? -0.001 : 0.001;
/**
* Animation will be reversed here, so need to
* reverse the easing curve as well
*
* Additionally, we need to account for the time relative
* to the new easing curve, as `stepValue` is going to be given
* in terms of a linear curve.
*/
if (!shouldComplete) {
this.sbAni.easing('cubic-bezier(1, 0, 0.68, 0.28)');
newStepValue += getTimeGivenProgression(new Point(0, 0), new Point(1, 0), new Point(0.68, 0.28), new Point(1, 1), stepValue);
} else {
newStepValue += getTimeGivenProgression(new Point(0, 0), new Point(0.32, 0.72), new Point(0, 1), new Point(1, 1), stepValue);
}
this.sbAni.progressEnd(shouldComplete, newStepValue, dur);
}
}