如何在iPhone上实现“褪色触摸轨迹”效果?

时间:2010-02-26 13:50:47

标签: iphone graphics effects

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

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

我能想到的最接近的术语是pointer trail。唯一的区别是,它不是显示光标,而是显示一条轻微消失的坚固轨迹。 website that made the flash example将其称为粒子重影。另一个例子就是这个YouTube video for HP,它显示了0:30到0:36之间的效果。它开始更像是油漆,但最终变成了褪色的痕迹效应。

如果您有更好的名称或更好的例子,请提及它,我会更新帖子。

需要哪种iPhone技术?
OpenGL还是Quartz 2D?由于速度原因,我猜测核心图形是不可能的。我缺少的任何其他技术?它需要足够快,没有任何滞后。假设在任何给定点处持续大约一秒的轨迹,当用户快速移动他们的手指时,可能同时存在相当大量的动画像素。可能甚至用大量需要淡化的像素填满屏幕。效果应该看起来非常优雅,就像XP中指针轨迹的波动一样。

如何实施?
理想情况下,我不希望淡出效果像在flash示例中那样严格(它是一个完美的圆圈),更像是在HP视频中淡出更有机(在哪里有不同的淡出)小道中的每一点)。

我会直接操纵单个像素吗?即我是否需要跟踪手指移动的每个像素并重复调用一个函数,例如PaintPixel(x,y,brightness),它会修改像素的RGB值?这似乎是一个过多的像素修改和声音,它会减慢整个系统。但是,我之前从未做过这种事情,所以我不知道这是不是通常的做法。例如,假设单次触摸占用32x32像素。每次触摸我们有32 x 32 = 1024像素。当手指移动时,需要额外设置1024个像素,其中大部分已经与之前的触摸重叠。假设手指在一秒钟内超过了iPhone的高度,我们说的是480 x 32像素= 15,360像素,每秒更新很多次。

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

我会使用一组图像(例如100个左右的圆圈,每个圆圈代表从纯白色变为黑色的触摸),然后随着时间的推移创建并替换它们的实例?例如,当手指移动时,我将在该点显示touch100.jpg,表示纯白色,并且在下一次迭代中,相同的点将显示touch99.jpg,然后触摸98.jpg,继续直到它到达touch0.jpg,代表纯黑色。

我缺少任何其他想法?

如果这些想法听起来很古怪,我很抱歉。你可能会说,我之前从未做过类似的事情,所以我不知道实现这种效果的常用方法是什么,我只是抛弃了我能想到的任何想法。

您会建议哪些资源来学习如何实施?
对于试图学习如何实现此类事情的人,您是否会推荐任何学习材料?

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

我忘了提供其他信息吗? 你问我会问你还有其他问题吗?

4 个答案:

答案 0 :(得分:1)

我会做以下事情:

  • 创建一个您将绘制的位图,将其称为画布
  • 创建表示路径的图像,在您的示例中为实心圆圈
  • 每个框架绘制用户当前手指的圆圈
  • 同样在每一帧上,将一个变换应用到画布上,该变换将每个像素的alpha乘以一个小于1的值,即0.99

这将使屏幕上的所有内容逐渐淡出,最近绘制的圆圈最明显。

我在Flash中做过类似的事情(车后面的灰尘)并且效果很好

对于一项技术,你可以用Quartz做到这一点,只有当性能太糟糕时才会切换到OpenGL

答案 1 :(得分:1)

pheelicks具有良好的设计,易于实现,并且可以很好地工作。它的缺点是必须每帧重新计算整个屏幕,这可能不如最佳效率。我建议使用可能具有更好性能的以下设计(或者它可能具有更差的性能;大多数性能事物必须经过测试才能看到)。

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

我的方案的优点是它只计算重要的像素,并依靠iPhone的优化绘图系统来进行计算。它可以生成大量的层,但系统设计用于处理(并且层的数量由路径长度和帧速率固定)。代码也应该非常简单。

答案 2 :(得分:0)

如果您想使用OpenGL,您可以:

  1. 将图片作为图像绘制出来,您需要尝试使用尺寸,但是图片应该有一个Alpha通道。
  2. 接下来添加代码以计算指针的移动向量。
  3. 现在计算一条垂直于指针运动矢量的直线。
  4. 创建沿您计算的线落下的点,这些点应该偏离指针的位置(距离取决于指针的大小)。
  5. 随着时间的推移,存储上面计算的两点的缓冲区。
  6. 现在,您将使用OpenGL创建一个四边形条带,使用缓冲区中的点作为顶点。
  7. 最后将您绘制的纹理图像应用于您创建的四边形条带。

答案 3 :(得分:0)

如果您下载Cocos2D并启动ParticlesTest,您会看到许多与此效果类似的示例。