Question

我想逐步像素化网页上的图像，并将像素化设置为过渡动画。像素化将通过使用小像素开始，并且像素将逐渐变大。最后，像素化将反转，然后显示第二个图像。

我正在寻找像像素效果here这样的效果 - 您需要选择像素化作为过渡，然后点击图像。

是的，我可以使用该库，但我已经有了raphael画布，我很想知道这是否可能（以及如何）。

Answer 1

Raphael并不是真的可以使用光栅图形，它是一个矢量库。在画布上实现它。

Answer 2

我认为最好的选择是使用另一个库来进行像素化（就像你链接的那个，如果你不介意许可）。 Raphael.js不支持这种效果，因为它是一个矢量库。您可以将Raphael.js SVG转换为图像并对其运行效果 - 请参阅 this 。

注意：这不是您问题的直接解决方案，但它提供了另一种替代方案，如何实现像素化效果（对于寻找解决方案的其他用户）。

有一个 close-pixelate 项目。它是一个脚本，能够使用HTML5 canvas元素将图像转换为像素化版本，并在MIT许可下获得许可。

GitHub项目页面是 here 。可以找到额外的示例 here 。

<强>用法：

document.getElementById('portrait-image').closePixelate([
  { resolution : 24 },
  { shape : 'circle', resolution : 24, size: 16, offset: 12, alpha: 0.5 }
]);

Answer 3

对于Internet Explorer，它非常简单，因为默认情况下支持像素化效果作为扩展的CSS属性。

仅限Pixelate效果的IE属性：

-ms-filter: "progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=30, Duration=1)";
filter: progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=30, Duration=1);

对于其他浏览器，您可以根据以下代码开发自己的解决方案：

http://phrogz.net/tmp/canvas_image_zoom.html

使用raphael.js可以实现这种像素化效果吗？

3 个答案: