javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +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

18
core/src/components/menu/menu.tsx
View File

@ -3,6 +3,7 @@ import { Build, Component, ComponentInterface, Element, Event, EventEmitter, Hos
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
import { Gesture, GestureDetail, IonicAnimation, MenuChangeEventDetail, MenuControllerI, MenuI, Side } from '../../interface';
import { Point, getTimeGivenProgression } from '../../utils/animation/cubic-bezier';
import { GESTURE_CONTROLLER } from '../../utils/gesture';
import { assert, isEndSide as isEnd } from '../../utils/helpers';
@ -418,11 +419,26 @@ export class Menu implements ComponentInterface, MenuI {
}
this.lastOnEnd = detail.timeStamp;
// 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.
*/
newStepValue += getTimeGivenProgression(new Point(0, 0), new Point(0.4, 0), new Point(0.6, 1), new Point(1, 1), stepValue);
this.animation
.easing('cubic-bezier(0.4, 0.0, 0.6, 1)')
.onFinish(() => this.afterAnimation(shouldOpen), {
oneTimeCallback: true
})
.progressEnd(shouldComplete, stepValue, realDur);
.progressEnd(shouldComplete, newStepValue, realDur);
}
private beforeAnimation(shouldOpen: boolean) {