search

naver / egjs-axes

A module used to change the information of user action entered by various input devices such as touch screen or mouse into the logical virtual coordinates.
https://naver.github.io/egjs-axes/
MIT License
179 stars 32 forks source link

v3: add animation controlling methods #175

Closed malangfox closed 2 years ago

malangfox commented 2 years ago

Details

Added methods which controls current animation.

stop()

Stop an animation in progress by triggering stop() from AnimationManager.

updateAnimationPos(pos: Axis, restart: boolean = false)

Change the destination of an animation in progress.

There are two ways to change the current destination keeping original duration.

When parameter restart is true, restarting the animation which starts from current position and ends at new destination. That duration is used as the remaining duration when the method is called. In this case, The progress of the animation is reset and the result of the easing function starts over from zero.

When parameter restart is false, The progress of the animation is kept. The remaining progress is treated as the total progress towards the new destination.

For example, In case of using animation function like this, and original duration of animation is 1000 ms. Moving x: 0, y:0 to x:100, y:100 and updateAnimationPos is called after 300 ms to x: 200, y:200.

function anim(durationPercent) {
    if (durationPercent > 0.5) return 1;
    return 0;
}

If restart is true, new animation will complete after 350 ms. Since we have 700 ms duration left and The progress of the animation is reset when updateAnimationPos is called.

If restart is false, new animation will complete after 200 ms. Since original animation ends after 500 ms from beginning and updateAnimationPos is called after 300 ms,

updateAnimationDuration(dutation: number, restart: boolean = false)

Change the duration of an animation in progress.

There are also two ways to change the current destination keeping original duration.

When parameter restart is true, restarting the animation which starts from current position and ends at current destination. That duration is changed to new duration that calculated by new duration and elapsed time. In this case, The progress of the animation is reset and the result of the easing function starts over from zero.

When parameter restart is false, The progress of the animation can be kept using durationOffset.

We can use durationOffset for keeping animation ratio after total duration is changed. oldRatio = (diffTime + oldDurationOffset) / oldDuration, oldDurationOffset is basically 0. newRatio = (diffTime + newDurationOffset) / newDuration = oldRatio Therefore, newDurationOffset = oldRatio * newDuration - diffTime

So total duration can be changed with keeping current animation ratio.

Should updateAnimationPos and updateAnimationDuration be integrated into one method?

In the beginning, I was thinking about declaring changeable animation param types and use method like this. updateAnimationParam(param: { pos?: Axes; duratiron?: number }, restart: boolean = false)

But I thought it is unnecessary to declare a new type for just two parameters. Any recommendations about this is welcomed.

WoodNeck commented 2 years ago

Can we check any visual demo for this? You can deploy a demo in your forked repository and show us.