HTML5 Canvas，易于使用

Question

I have the following function:

this.alphaArray = function() {
  var alpha   = this.alphStr,
    , alphArr = [],
    , alphInc = (this.alphStr - this.alphEnd) / this.frames;

  for (var i=0;i<this.frames;i++) {
    alphArr.push(alpha);
    alpha -= alphInc;
  }

  return alphArr;
};

The variables are as such:

• this.alphStr - The starting alpha value, currently 1 (100% opaque).
• alphArr - An array that the function builds that holds the alpha value for each frame of the animation (used in a loop alongside the drawImage() function.
• alphInc - The increment that is subtracted from the previous alpha before push() 'd into the array.
• this.alphEnd - The ending alpha value that the images will appear as at the end of the frames, currently .01 (1% opaque).
• this.frames - the total amount of frames (and therefor array values) that the animation is shown for.

So to add context to this function, here it is with all the values I currently have plugged in:

this.alphaArray = function() {
  var alpha   = 1,
    , alphArr = [],
    , alphInc = (1 - .01) / this.1000; // 0.00099

  for (var i=0;i<this.frames;i++) {
    alphArr.push(alpha);
    alpha -= 0.00099;
  }

  return alphArr;
};

As stated before, ultimately alphaArr with be iterated through in a while() loop, and will be assigned to context.globalAlpha before drawing an image. Right now it reduces opaqueness in a linear fashion, using a static increment (or rather, decrement) value. I want to apply an ease-in affect on the transparency using the above method of assigning all the interations in an array. Given the values for the initial transparency, the ending transparency, and the duration of the animation ( this.frames ), how can I apply an ease-in effect where it starts out slowly decreasing in opaqueness, and by the end in the opaqueness reduces much quicker?

Answer 1

When decrementing, multiply by the current frame like so

var frameSum = 0;
for (var i=0; i < this.frames; i++)
{
  frameSum = frameSum + i;
}

var origAlpha = alpha;
for (var i=0; i < this.frames; i++) 
{
  alphArr.push(alpha);
  alpha -= (origAlpha / frameSum) * i;
}

This will increase the opaqueness as you go farther on. You can add some other multiples to the i value if you want to adjust the speed.

Edit

Fixed the loop to correctly end at 0 on the final frame.

Answer 2

Use one of the commonly known easing functions.

See, for instance, the jQuery Easing library: http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js

-- and plugging easeOutQuad from there into your code --

function makeAlphaArray(from, to, frames, easingFunc) {
    var arr = [], delta = to - from;
    for(var i = 0; i < frames; i++) arr.push(easingFunc(0, i, from, delta, frames));
    return arr;
}

this.alphaArray = function() {
    return makeAlphaArray(
      this.alphStr, this.alphEnd, this.frames,
      function /* easeOutQuad */ (x, t, b, c, d){return -c *(t/=d)*(t-2) + b;}
    );
};