Question

我试图“粉碎”一个元素 - 例如，一个图像 - 然后发送它随机方向飞行。当碎片到达目的地（即 x 以像素为单位的距离）时，它们变成原始图像的较小版本。 jQuery UI的explode效果是不够的，因为它不会使方向随机化，并且它会平分分割（即必须可以整除为完美的方块）。

我发现了this JSFiddle，我理解它是如何工作的 - 它在<span>标签中包含“点击此处”的每个字母，然后动画以不同方向发送它们，同时缩放字体大小和淡入淡出他们出去了 - 但我不知道如何将这样的东西改编成单个元素/图像，其内容不能以这种方式切割。

  $o.html($o.text().replace(/([\S])/g, "<span>$1</span>"));
  $o.css("position", "relative");
  $("span", $o).each(function(i) {
    var newTop = Math.floor(Math.random()*500)*((i%2)?1:-1);
    var newLeft = Math.floor(Math.random()*500)*((i%2)?1:-1);

    $(this).css({position: "relative",
      opacity: 1,
      fontSize: 12,
      top: 0,
      left: 0
    }).animate({
      opacity: 0,
      fontSize: 84,
      top: newTop,
      left:newLeft
    },1000);
  });

关于如何完成我所指的任何想法？不是必须寻找解决方案;只是一个有用的手来指导我。

Answer 1

我一直在研究一个小的JavaScript库，分割出一张图片：Shatter.js

这会让你半途而废。你只需要添加自己的物理/重力就可以使得到的图像在所有方向上爆炸。

项目页面底部列出了一些示例，显示图像正在破碎。

Answer 2

您将不得不将元素渲染到画布上，然后可以“剪切”并爆炸。您可以在此处阅读有关渲染到画布的信息：

Rendering HTML elements to <canvas>

粉碎一个元素，随机发送碎片

2 个答案: