3

对不起，如果标题令人困惑。我已经尽力撰写它，如果您要理解我的要求，请随时在评论中建议更好的标题。

我尝试制作的动画可以很容易地由视频编辑器完成，但在我看来使用 CSS/JS 并不那么容易：首先，我不是在谈论图像中的滑动，图像根本没有移动。我希望它从一边到另一边出现，但以渐变透明的方式出现。想象一下图像上有一个渐变的不透明度蒙版，使其左端的不透明度为1，右端的不透明度为0。当这个蒙版从左向右移动时，就是我想要实现的动画。

我可以将图像分成几块，并控制每一块的不透明度，必须有一定数量的块才能使整个动画流畅和吸引人。

我在想的另一种方法是使用画布，您可以在其中按像素操作图像，正如本页所建议的那样，我可以做到

// get the image data object
var image = ctx.getImageData(0, 0, 500, 200);
// get the image data values 
var imageData = image.data,
length = imageData.length;
// set every fourth value to 50
for(var i=3; i < length; i+=4){  
    imageData[i] = 50;
}
// after the manipulation, reset the data
image.data = imageData;
// and put the imagedata back to the canvas
ctx.putImageData(image, 0, 0);

然而，该页面仅采用静态图像而不是动画。我想知道如果我使用这种方法是否会破坏性能。此外，这种方法涉及很多丑陋的计算。

我想我想要实现的不是很奇怪，那么有没有什么javascript插件可以实现呢？

4

3 回答 3

2

我正在尝试制作的动画可以很容易地由视频编辑器完成，[...] 图像根本没有移动。我希望它左右出现

在视频行业，我们称之为软擦拭（AKA 软边擦拭），制作起来并不复杂。

您所需要的只是一个可以使用线性渐变制作的 alpha 蒙版。然后使用带有上下文的翻译属性和 xor 复合模式来对其进行动画处理。

xor 模式的作用是根据绘制到它的 alpha 通道来反转 alpha 通道。这样做的好处是画布元素也变得透明，因此任何背景都可以显示出来。您可以保留默认补偿。模式以及这将使背景变黑。

渐变是这样制作的（颜色值与 xor 模式无关，只是 alpha 通道值）：

var g = ctx.createLinearGradient(0, 0, ctx.canvas.width, 0);
g.addColorStop(0, "rgba(0,0,0,0)");
g.addColorStop(1, "rgba(0,0,0,1)");
ctx.fillStyle = g;

（有关如何通过创建平滑渐变来避免“亮线”伪影，请参阅此答案）。

现在创建一个基于位置绘制完整帧的函数，该位置t是与画布宽度相结合的归一化值 - 请记住，我们需要使用双倍宽度：渐变 + 渐变退出的空间 -

function render(t) {
  var w = t * ctx.canvas.width;                                // width based on t
  ctx.drawImage(img, 0, 0);                                    // render bg. image
  ctx.translate(-ctx.canvas.width + w, 0);                     // translate on x-axis
  ctx.fillRect(0, 0, ctx.canvas.width * 2, ctx.canvas.height); // render gradient mask
}

在动画循环中调用它 until t=2，但可以选择设置globalCompositeOperation为xor，我们很高兴。动画循环本身将为我们重置转换：

演示

var ctx = c.getContext("2d"),
    img = new Image,
    t = 0, step = 0.02

// alpha mask
var g = ctx.createLinearGradient(0, 0, ctx.canvas.width, 0);
g.addColorStop(0, "rgba(0,0,0,0)");
g.addColorStop(1, "rgba(0,0,0,1)");
ctx.fillStyle = g;
ctx.globalCompositeOperation = "xor";

// load bg image
img.onload = animate;
img.src = "http://i.imgur.com/d0tZU7n.png";

function animate() {
  ctx.setTransform(1,0,0,1,0,0);                  // reset any transformations
  ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
  render(t);
  t += step;
  if (t <= 2) requestAnimationFrame(animate);     // 2 since we need double width
  else {t=0; setTimeout(animate, 2000)};          // just to repeat anim. for demo
}

function render(t) {
  var w = t * ctx.canvas.width;                   // width based on t
  ctx.drawImage(img, 0, 0);
  ctx.translate(-ctx.canvas.width + w, 0);         // translate on x-axis
  ctx.fillRect(0, 0, ctx.canvas.width*2, ctx.canvas.height);
}
body {background:url(http://i.imgur.com/OT99vSA.jpg) repeat}
<canvas width=658 height=325 id=c></canvas>

于 2016-04-12T03:28:26.160 回答
1

使用上下文复合属性通过渐变进行遮罩。创建一个与图像或显示画布大小相同的屏幕外画布，以最小者为准。

对于每一帧，使用适当的色标（CSS 颜色格式rgba(red, green, blue, alpha)）创建渐变以设置 alpha 值。

清除屏幕外画布

ctxOffScreen.clearRect( 0, 0, ctxOffScreen.canvas.width, ctxOffScreen.canvas.height);

然后将屏幕画布的合成值设置为

ctxOffScreen.globalCompositeOperation = "source-over";

将图像渲染到它上面

ctxOffScreen.drawImage(image, 0, 0, ctxOffScreen.canvas.width, ctxOffScreen.canvas.height);

然后将comp设置为

ctxOffScreen.globalCompositeOperation = "destination-in";

这将匹配已经绘制的像素与您接下来绘制的相同 alpha 值（渐变蒙版）

然后将填充样式设置为您创建的渐变并在顶部绘制一个矩形

ctxOffScreen.fillStyle = gradient;
ctxOffScreen.fillRect( 0, 0, ctxOffScreen.canvas.width, ctxOffScreen.canvas.height);

然后只需将屏幕外画布渲染到屏幕画布上

ctx.drawImage(ctxOffScreen.canvas, 0, 0);

如果你使用

ctxOffScreen.globalCompositeOperation = "destination-out";

而不是"destination-in"您将反转您使用渐变创建的蒙版。

于 2016-04-11T23:24:15.937 回答
0

作为替代方案canvas，您可以使用svg. CSS 渐变是不可动画的，但是其他属性svg是动画的，所以你可以找到一些创造性的方法来动画渐变。

#Mask rect {
  x: 400px;
  transition: 1s;
}

svg:hover #Mask rect {
  x: -400px; 
}

svg {
  border: 2px solid black;
  background-color: #ee3377;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
  <defs>
    <linearGradient id="Gradient">
      <stop offset="0" stop-color="white" stop-opacity="0" />
      <stop offset=".5" stop-color="white" stop-opacity="1" />
    </linearGradient>
    <mask id="Mask">
      <rect width="800" height="400" fill="url(#Gradient)"  />
    </mask>
  </defs>
  <image xlink:href="http://i.imgur.com/g3D5jNz.jpg" width="400" height="400" mask="url(#Mask)"></image>
</svg>

您可能可以offset直接为属性设置动画，我还没有测试过。

于 2016-04-11T23:55:52.840 回答