如何在 iPhone 上实现“淡入淡出”效果？

Question

我想知道您将如何实现类似于this one implemented in flash 的效果。它只是一个黑屏，当用户触摸并拖动它时，会产生类似于 Flash 电影中看到的效果。

这个效果叫什么？你有更好的例子吗？
我最大的问题之一是准确地表达我在说什么。我需要这种效果的名称以及可以显示我正在谈论的内容的视频。这将有助于其他人更好地理解问题。

我能想到的最接近描述类似事物的术语是pointer trail。唯一的区别是它不会显示光标，而是会显示一条逐渐消失的实心轨迹。 website that made the flash example，称之为Particle Ghosting。另一个例子是在这个YouTube video for HP，它显示了0:30到0:36之间的效果。它开始更像是油漆，但最终变成了褪色的痕迹效果。

如果您对此效果有更好的名称或更好的示例，请提及，我会更新帖子。

需要哪种 iPhone 技术？
OpenGL 还是 Quartz 2D？由于速度，我猜核心图形是不可能的。我还缺少其他任何技术吗？它需要足够快而没有任何延迟。假设轨迹在任何给定点持续大约一秒，当用户快速移动手指时，可能同时存在大量动画像素。甚至可能用需要淡出的像素填充大部分屏幕。效果应该看起来很优雅，一点也不像 XP 中指针轨迹的起伏。

如何实施？
理想情况下，我不希望淡出效果像 flash 示例中那样僵硬（它是一个完美的圆圈），更像是在 HP 视频中，淡出更加有机（在路径中的每个点）。

我会直接操作单个像素吗？ IE。我是否需要跟踪手指移动过的每个像素并重复调用一个函数，例如修改像素 RGB 值的 PaintPixel(x,y,brightness)？这似乎是过多的像素修改，听起来会减慢整个系统的速度。但是，我以前从未做过这种事情，所以我不知道这是否是通常的做法。例如，假设单次触摸占用 32x32 像素。每次触摸我们有 32 x 32 = 1024 像素。随着手指的移动，将需要额外的 1024 像素进行动画处理，其中大部分已经与之前的触摸重叠。假设手指在一秒钟内越过 iPhone 的高度，我们说的是 480 x 32 像素 = 15,360 像素每秒更新多次。

我是否会使用一个从白色渐变到黑色的小视频剪辑，并在手指移动时生成大量视频剪辑实例？我没有可以打开 flash 示例的 Flash 版本，所以我无法检查它的源代码，但我猜它只是在点移动时创建视频剪辑的新实例。这对于有机淡出来说有点棘手，可能需要制作几个淡出视频剪辑并为每个点随机选择一个。

我是否会使用一组图像（例如，100 个左右的圆圈，每个圆圈代表从纯白色变为黑色的触摸），然后随着时间的推移创建和替换它们的实例？例如，当手指移动时，我会在那个点显示 touch100.jpg，它代表纯白色，在下一次迭代中，同一点将显示 touch99.jpg，然后是 touch98.jpg，一直持续到它到达 touch0.jpg，这代表纯黑色。

我还缺少其他想法吗？

如果这些想法听起来很古怪，我很抱歉。正如您可能知道的那样，我以前从未做过类似的事情，所以我不知道实现这种效果的通常方法是什么，我只是抛出我能想到的任何想法。

您会推荐哪些资源来了解如何实施？
有没有什么学习材料可以推荐给尝试学习如何实现这种东西的人？

当我需要了解一种完全不同的技术来实现它（例如 OpenGL）时，我不想花大量时间学习一种技术（例如 Quartz）。

还有其他我忘记提供的信息吗？
您还有其他问题建议我问吗？

Answer 1

pheelick 的设计不错，易于实现，并且可能运行良好。它的缺点是必须每帧重新计算整个屏幕，这可能不如最佳效率。我会提出以下设计，它可能具有更好的性能（或者可能具有更差的性能；大多数性能必须经过测试才能看到）。

对于每个圆圈，生成一个不透明的CALayer 并将其附加到您的视图中。将其contents 指定为预渲染圆圈CGImageRef。为其附加淡入淡出动画。将其附加到视图。使用动画委托，在完成动画时移除层。然后我可能会重新使用该层，而不是破坏它并创建一个新层。毕竟它已经有了你的圈子，所以重复使用它应该非常便宜。 （编辑：我正在重新考虑这一点；您甚至不必删除并重新添加图层，只需将其移动到新位置，或者在不需要时将其隐藏。您可以将所有这些圈子设为子-如果您想要一种简单的方法在不需要时删除整个路径，则可以使用“路径”层。）

我的方案的优点是它只计算重要的像素，并依靠 iPhone 优化的绘图系统来进行计算。它可以生成大量层，但系统旨在处理这些（层数由您的路径长度和帧速率固定）。代码也应该很简单。

Answer 2

我会做以下事情：

• 创建一个您将在其上绘制的位图，将其称为您的画布
• 创建代表轨迹的图像，在您的示例中为实心圆
• 每一帧都画出用户当前手指所在的圆圈
• 同样在每一帧上，对画布应用一个变换，将每个像素的 alpha 乘以一个小于 1 的值，即 0.99

这将使屏幕上的所有内容慢慢消失，最近绘制的圆圈最明显。

我在 Flash 中做过类似的事情（汽车后面的灰尘），效果很好

至于技术，你可以用Quartz做这个，只有性能太差我才会切换到OpenGL

Answer 3

如果您想使用 OpenGL，您可以：

1. 将轨迹绘制为图像，您需要试验大小，但轨迹图像应具有 Alpha 通道。
2. 接下来添加代码来计算指针的移动向量。
3. 现在计算垂直于指针移动矢量的直线。
4. 创建沿您计算的线落下的点，这些点应偏离指针的位置（距离取决于指针的大小）。
5. 存储上面计算的两个点随时间变化的缓冲区。
6. 现在，您将使用 OpenGL 创建一个四边形带，使用缓冲区中的点作为顶点。
7. 最后将您作为纹理绘制的轨迹图像应用到您创建的四边形。

Answer 4

如果你下载Cocos2D并启动ParticlesTest，你会看到很多类似这个效果的例子。