简体   繁体   中英

Reversing easing function

I have the following function:

Math.easeIn = function (val, min, max) {
  strength = 4;
  val /= max;
  return (max-1)*Math.pow(val, strength) + min;
};

Given Math.easeIn(5, 1, 10) , I get 1.5625 . I would like a function that given a val of 1.5625 , it returns 5 .

Ie Math.easeOut(1.5625, 1, 10) -> 5

My math skills are letting me down here.

 Math.easeIn = function (val, min, max) { strength = 4; val /= max; return (max-1)*Math.pow(val, strength) + min; }; Math.easeOut = function (val, min, max) { var strength = 4, res; res = (val-min)/(max-1); res = Math.pow(res, 1/strength); return max*res; }; document.body.innerHTML = '<p>easeIn : ' + Math.easeIn(5, 1, 10) + '</p>'; document.body.innerHTML += '<p>easeOut : ' + Math.easeOut(1.5625, 1, 10) + '</p>'; 

I obtained this by reversing your easeIn function:

res = (max - 1) * Math.pow(val/max, strength) + min     // Your easeIn function
res - min = (max - 1) * Math.pow(val/max, strength)
(res - min)/(max - 1) = Math.pow(val/max, strength)
Math.pow( (res - min)/(max - 1), 1/strength ) = val / max
Math.pow( (res - min)/(max - 1), 1/strength ) * max = val   // Your easeOut function

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM