Javascript Easing not working correctly - EaseInCirc?

时间:2018-10-24 11:25:20

标签: javascript photoshop-script easing

using Javascript in Photoshop Scripting, I wish to change the Opacity of X layers from Opacity 0 to Opacity 100, but in a gradual/slow to lastly hastened manner e.g. 'EaseInCirc' I believe.

The code I am using (not successfully) is: https://jsfiddle.net/09onhmy7/

numberOfLayers = 20;
myOpacity = 0;
x=0;
for(i = 0 ; i < numberOfLayers ; i++){
    myIncrements = EaseExpo(i, 1, x, numberOfLayers);
    x = myIncrements + myIncrements;
    myOpacity = myOpacity + parseInt(myIncrements,10); 
    if (myOpacity > 100) {myOpacity = 100 ;} 
    document.write(myOpacity+",");
}

I found the EaseExpo(EaseInCirc) code on-line (http://gizma.com/easing/):

// t = current time
// b = start value
// c = change in value
// d = duration
// (t and d) can be frames

function EaseExpo(t, b, c, d) {
  //EaseInCirc
    return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
}

…but so far the code returns values that don't distribute as expected from 0 - 100 -- and most likely never will, as I don't know how to go about transposing them to suit the 0-100 bounds.

Basically, I'm trying to create an iteration of values (that aren't lineal) from 0 - X to represent a rate of change that slowly ramps up to maximum velocity (I'm pretty sure it’s a squareroot graph/function?) that I'm trying to replicate.

The values that will be input will always start at 0, but could have a maximum of any value. The trick is, I need to be able to always transpose the end values into a 0-100 result.

e.g. A) 40 values = 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,30,32,34,36,39,42,46,51,58,68,83,100

e.g. B) 18 values = 1,3,5,7,9,11,13,15,17,20,23,27,32,39,49,64,88,100

I cant for the life of me work out how to do it -- or should I be using different math to achieve what I want? Many thanks in advance, Livy

0 个答案:

没有答案