Javascript HTML5画布，轻松融入globalAlpha

我有以下功能：

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

---

如前所述，最终将在

while（）

循环中迭代

alpharr

，并在绘制图像之前分配给

context.globalAlpha

。现在，它使用静态增量（或者更确切地说，递减）值以线性方式降低不透明性。我想使用上面指定数组中所有交互的方法，对透明度应用一种轻松的效果。给定动画的初始透明度、结束透明度和持续时间（

this.frames

）的值，我如何在开始时不透明性缓慢降低，到最后不透明性降低得更快的情况下应用“易用性”

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

var frameSum=0；
for（var i=0；i

这将增加不透明性，因为你继续前进。如果要调整速度，可以向i值添加其他倍数

编辑

---

修复了循环在最后一帧正确结束于0的问题。

递减时，按如下方式乘以当前帧

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

var frameSum=0；
for（var i=0；i

这将增加不透明性，因为你继续前进。如果要调整速度，可以向i值添加其他倍数

编辑

---

修复了循环在最后一帧上正确结束于0的问题。

使用一种常见的缓和功能

例如，请参见jQuery库：

--然后将

easeOutQuad

从那里插入到您的代码中--

函数makeAlphaArray（from、to、frames、easingFunc）{
var arr=[]，delta=to-from；
对于（var i=0；i

使用一种常见的缓解功能

例如，请参见jQuery库：

--然后将

easeOutQuad

从那里插入到您的代码中--

函数makeAlphaArray（from、to、frames、easingFunc）{
var arr=[]，delta=to-from；
对于（var i=0；i

Look-at（这是我的第二次谷歌点击btw=/）。Look-at（这是我的第二次谷歌点击btw=/）。不幸的是，这将超出

this.sclMin

（否定），这将导致globalAlpha设置为1。示例返回的数组中，

this.frames

的值设置为10（为简洁起见）将是：[1,0.9001,0.7003,0.4006,0.0010000000000000009，-0.4985，-1.0979，-1.7972000000000001，-2.5964]，不幸的是，这将使其超出

this.sclMin

（负值），从而导致globalAlpha设置为1。如果将

this.frames

的值设置为10（为简洁起见），则返回的数组示例为：[1,0.9001,0.7003,0.4006,0.0010000000000000009，-0.4985，-1.0979，-1.7972000000000001，-2.5964]

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