扭曲一系列像素以使图像的某些部分看起来“抖动”

Question

我正在努力使图像的一部分在视觉上“摇晃”。

如果你能想象摇动一盘果冻，它向后移动的流体运动和第四（三维）是我想要实现的。

以下是一个示例：http://www.jigglystuff.com/

这是展示所需动作的gif：

我在想我要做的一些事情是：

当光标拖动图像的一部分时......

• 向右移动，光标右侧的像素将会缩小/重叠，左侧的像素将会扩展，显示为弯曲到右侧
• 向左移动，移动光标左侧的像素将会缩小/重叠，右侧的像素将会扩展，显示为弯曲到左侧
• 垂直方向的逻辑相同

我不确定如何解决这个问题 - 任何例子，扩展到我的逻辑或资源都会受到高度赞赏。

Answer 1

要在您的示例中实现创建抖动效果的“缩放”，请使用控件纹理和合适的映射函数（例如，相对于您定义的锚点的指数）。要隔离要进行抖动的部分，请使用常规的乘法屏蔽步骤。

有一个使用控件纹理here的位移示例。将此与您自己的缩放过滤器或评论中链接的缩放过滤器相结合，您应该好好去！

所以，重申：

1. 根据鼠标位置创建控件纹理
2. 掩盖你的形象
3. 应用您选择和设计的矢量场算法