Question

我有以下功能：

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;
};

变量是这样的：

this.alphStr - 起始alpha值，目前为1（100％不透明）。
alphArr - 函数构建的数组，用于保存动画每帧的alpha值（用于drawImage()函数旁边的循环。
alphInc - 从push()进入数组之前的前一个alpha减去的增量。
this.alphEnd - 图像在帧结束时显示的结束alpha值，当前为.01（1％不透明）。
this.frames - 显示动画的帧总数（及其数组值）。

所以要为这个函数添加上下文，这里有我目前插入的所有值：

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;
};

如前所述，最终alphaArr将在while()循环中进行迭代，并在绘制图像之前分配给context.globalAlpha。现在，它使用静态增量（或更确切地说，减量）值以线性方式减少不透明度。我想使用上面分配数组中所有内部的方法对透明度应用缓入效果。给定初始透明度，结束透明度和动画持续时间（this.frames）的值，如何在不透明度开始缓慢减小的情况下应用缓入效果，并在结束时使用不透明度会降低得多吗？

Answer 1

递减时，乘以当前帧，如此

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;
}

随着你走得更远，这会增加不透明度。如果要调整速度，可以为i值添加一些其他倍数。

修改

修正了在最终帧上正确结束0的循环。

Answer 2

使用一种众所周知的缓动函数。

例如，请参阅jQuery Easing库：http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js

- 并将easeOutQuad从那里插入您的代码 -

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;}
    );
};

HTML5 Canvas，easy-in globalAlpha

2 个答案: