easing of gotoandstop (flash-js migration)

[arthurb65311981]

hi

sos! (designer searching for help from coders).

i'm trying to build an animation, that interacts with user input: mousewheel, keyboard and touch. the idea disscussed previously in this thread:

https://forums.adobe.com/thread/2190958

​now. i have a movieclip with animation on main stage, everything works fine(forward/backward etc.), but instead of straight motion, i want to implement some easing to scroll. every time, when i swipe, when i press key, or when i move mousewheel, i want my (stopped) animation move some frames forward/backward respectively with easing. i found some code, based on robert penner equations, but my knowlege isn't enough for implement it. any help will be appreciated.

yay.

document.addEventListener('mousewheel',f.bind(this));
document.addEventListener('DOMMouseScroll',f.bind(this));
document.addEventListener('keydown',k.bind(this));
var time = 0;
var diff = 30;
var minTime = 0;
var maxTime = 1000;
function easeInOutQuad(t, b, c, d) {
  if ((t /= d / 2) < 1) return c / 2 * t * t + b;
  return -c / 2 * ((--t) * (t - 2) - 1) + b;
}
function easing(){
for (var i = 0, len = diff; i <= len; i++) {
  (function(s) {setTimeout(function() {console.log(s);}, time);})(i);
  time = easeInOutQuad(i, minTime, maxTime, diff);
  console.log(time);
}
}
function f(e){
if (e.wheelDelta > 0||e.detail>0){
  easing();
  this.mymc.gotoAndStop(this.mymc.currentFrame+s);
  } else if(e.wheelDelta < 0||e.detail<0){
  easing();
  this.mymc.gotoAndStop(this.mymc.currentFrame-s)
}
}
function k(event){
if (event.which===37){this.mymc.gotoAndStop(this.mymc.currentFrame-1);}
if (event.which===39){this.mymc.gotoAndStop(this.mymc.currentFrame+1);}
}

**gives me .s from easing function "undefined".

[ClayUUID]

I believe that even if you could get this to work, it wouldn't look very good. When you're easing an object the easing formula can create infinitely many positions between the start and stop points. But a timeline only has a finite number of discrete positions, so a slow ease would result in coarse, jumpy animation.

[arthurb65311981]

thank you for your response.

you think even in high fps it will cause problems? i mean, easing is very short here - 30 positions in one second, and that's all. and i can make movie even more faster, let's say, 60 fps?

*this example of code give acceptable results (amount of events per second), imho.

but, again, unfortunately, i am not coder.

var time = 0;

var diff = 30;

var minTime = 0;

var maxTime = 1000;

function easeInOutQuad(t, b, c, d) {

  if ((t /= d / 2) < 1) return c / 2 * t * t + b;

  return -c / 2 * ((--t) * (t - 2) - 1) + b;

}

for (var i = 0, len = diff; i <= len; i++) {

  (function(s) {setTimeout(function() {console.log(s);}, time);})(i);

  time = easeInOutQuad(i, minTime, maxTime, diff);

  console.log(time);

}

**btw, can you help me with coding?

[ClayUUID · Accepted solution]

Smoothness will be a function of both frame rate and number of frames. The higher the number of frames the better.

Now, it's kind of pointless to try rolling your own easing when Animate has a perfectly good Tween library built in. However, the tween library can't make function calls, it can only set property values. So what you can do every time the mouse wheel moves is start a new tween of a variable value, then attach an event listener to the tween that takes that variable's changed values and translates it into a gotoAndStop() call.

Something like this:

this.stop();

if (!this.init) {

    this.init = true; // ensure this only runs once

    document.addEventListener("mousewheel", scrollHandler.bind(this));

    document.addEventListener("DOMMouseScroll", scrollHandler.bind(this));

    document.addEventListener("keydown", keyHandler.bind(this));

    var conClip = this; // clip being controlled

    var wheelInc = 10; // frames

    var tweenDuration = 500; // milliseconds

    var wheelTween; // wheel tween handle

}

function scrollHandler(evt) {

    var delta, newFrame;

    if (evt.wheelDelta > 0 || evt.detail > 0) {

        delta = wheelInc;

    }

    else if (evt.wheelDelta < 0 || evt.detail < 0) {

        delta = -wheelInc;

    }

    newFrame = calcNewFrame(delta);

    // initialize virtual frame counter

    conClip.wheelFrame = conClip.currentFrame;

    // tween virtual counter from current value to new value

    if (wheelTween) {

        wheelTween.removeAllEventListeners();

    }

    wheelTween = createjs.Tween.get(conClip, {override:true}).to({wheelFrame: newFrame}, tweenDuration, createjs.Ease.quintOut);

    // every time tween updates, move controlled clip frame to value of virtual frame counter

    wheelTween.addEventListener("change", updateFrame.bind(conClip));

}

function keyHandler(evt) {

    var delta;

    if (evt.keyCode === 37) { // left arrow

        delta = -1;

    }

    else if (evt.keyCode === 39) { // right arrow

        delta = 1;

    }

    conClip.gotoAndStop(calcNewFrame(delta));

}

function calcNewFrame(delta) {

    var newFrame = conClip.currentFrame + delta;

    if (newFrame < 0) {

        newFrame = 0;   

    }

    if (newFrame > conClip.totalFrames - 1) {

        newFrame = conClip.totalFrames - 1;

    }

    return newFrame;

}

function updateFrame() {

    this.gotoAndStop(Math.floor(this.wheelFrame));

}

Note the use of createjs.Ease.quintOut as the ease equation. You can use any of the built-in eases that are listed here: CreateJS Ease Equations

[arthurb65311981]

wow! kinda magic! thank you, it works!