“褪色的触摸痕迹”会如何产生？效果可以在iPhone上实现吗？
我想知道如何实现类似于 在 Flash 中实现的效果。它只是一个黑屏，当用户触摸并拖动它时，会产生类似于 Flash 电影中看到的效果。
这种效应叫什么？你有更好的例子吗？
我最大的问题之一是准确地阐明我在说什么。我需要此类效果的名称以及可以显示我正在谈论的内容的视频。这将有助于其他人更好地理解问题。
我能想到的描述类似内容的最接近的术语是指针轨迹。唯一的区别是，它不会显示光标，而是显示一条逐渐消失的实心轨迹。 制作 Flash 示例的网站将其称为粒子重影 。另一个示例是 HP 的 YouTube 视频，其中显示了 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，然后是 touch98.jpg，继续直到到达 touch0.jpg，这代表纯黑色。
我还缺少其他想法吗？
如果这些想法听起来很奇怪，我很抱歉。正如你可能知道的那样，我以前从未做过类似的事情，所以我不知道实现这种效果的通常方法是什么，我只是抛出我能想到的任何想法。
您会推荐哪些资源来学习如何实现这一点？
您是否会向尝试学习如何实现此类事情的人推荐任何学习材料？
当我需要了解一种完全不同的技术来实现它（例如 OpenGL）时，我不想花大量时间学习一种技术（例如 Quartz）。
还有其他我忘记提供的信息吗？
您还有什么建议我问的其他问题吗？
I'm wondering about how you would implement an effect similar to this one implemented in flash. It would just be a black screen which, when the user touches and drags over it, produces an effect similar to the one seen in the flash movie.
What is this effect called? Do you have a better example?
One of my biggest problems is articulating exactly what it is I'm talking about. I need both a name for this type of effect as well as a video that can display what it is I'm talking about. This would help others understand the problem better.
The closest term I could think of which describes something similar is a pointer trail. The only difference being that instead of showing the cursor, it would show a solid trail that gently fades away. The website that made the flash example, calls it Particle Ghosting. Another example of it is in this YouTube video for HP, which shows the effect between 0:30 to 0:36. It starts out more like paint, but eventually turns into the fading trail effect.
If you have a better name for this effect or a better example, please mention it and I will update the post.
Which iPhone technology would be required?
OpenGL or Quartz 2D? I'm guessing core graphics is out of the question due to speed. Any other technology I'm missing? It needs to be fast enough without any lag. Assuming a trail that lasts about a second at any given point, there may be a considerable amount of animated pixels at the same time when the user moves their finger fast. Possibly even filling up most of the screen with pixels that need to be faded out. The effect should look very elegant, nothing like the choppiness of the pointer trail in XP.
How would it be implemented?
Ideally, I don't want the fadeout effect to be as rigid as it is in the flash example (where it's a perfect circle), and more like in the HP video where the fade out is more organic (where there are different fadeouts at every point in the trail).
Would I manipulate individual pixels directly? I.e. would I need to keep track of every pixel that the finger has moved over and call a function repeatedly such as PaintPixel(x, y, brightness) which modifies the RGB value of the pixel? This seems like an excessive amount of pixel modification and sounds like it would slow the whole system down. However, I have never done this kind of thing before, so I wouldn't know if this is how it's usually done. For example, let's assume that a single touch takes up 32x32 pixels. We have 32 x 32 = 1024 pixels for each touch. As the finger moves, an additional 1024 pixels will need to be animated, most of which are already overlapping with the previous touch. Assuming the finger passed over the height of the iPhone within a second, we're talking about 480 x 32 pixels = 15,360 pixels being updated many times a second.
Would I use a small video clip that fades from white to black and just generate a lot of instances of the video clip as the finger moves? I don't have a version of Flash that can open up the flash example, so I can't examine the source code of it, but I'm guessing that it's just creating new instances of video clips as the dot moves around. This gets a bit tricky for an organic fade out which would probably involve making several fade out video clips and randomly choosing one for each point.
Would I use a set of images (e.g. 100 or so circles each representing a touch which fades from solid white to black) and then create and replace instances of them as time progresses? For example, as the finger moves I would display touch100.jpg at that point, which represents pure white, and in the next iteration the same point would display touch99.jpg, then touch98.jpg, continuing until it reaches touch0.jpg, which represents pure black.
Any other ideas I'm missing?
I'm sorry if these ideas sound outlandish. As you can probably tell, I have never done anything similar to this before so I don't know what the usual way of implementing this kind of effect is and I'm just throwing out any idea I can think of.
Which resources would you recommend to learn how to implement this?
Is there any learning material you would recommend for someone trying to learn how to implement this kind of thing?
I don't want to spend a bunch of time learning one technology (e.g. Quartz) when I would need to know an entirely different technology to implement it (e.g. OpenGL).
Is there any other information I forgot to provide?
Are there any additional questions you would recommend I ask?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
pheelicks 设计良好，实现简单，并且效果良好。它的缺点是必须每帧重新计算整个屏幕，这可能比最佳效率低。我建议以下设计可能具有更好的性能（或者可能具有更差的性能；大多数性能都必须经过测试才能看到）。
对于每个圆圈，生成一个不透明的
CALayer并将其附加到您的视图。将其内容指定为预渲染的圆圈CGImageRef。为其添加淡入淡出动画。将其附加到视图。使用动画委托，在图层完成动画时将其删除。然后我可能会重新使用该层，而不是销毁它并创建一个新层。毕竟它已经有你的圈子了，所以重复使用它应该非常便宜。 （编辑：我正在重新考虑这一点；您甚至不必删除并重新添加图层，只需将其移动到新位置，或者如果不需要则隐藏它。您可以将所有这些圆圈子化如果您想要一种简单的方法来在不需要时删除整个轨迹，请使用“轨迹”图层的图层。）我的方案的优点是它只计算重要的像素，并依赖 iPhone 的优化绘图系统来进行计算。它可以生成大量层，但系统旨在处理该问题（层数由路径长度和帧速率决定）。代码也应该非常简单。
pheelicks has a good design, simple to implement, and it may work well. It has the disadvantage of having to re-calculate the entire screen every frame, which may be less efficient than would be optimal. I would propose the following design that may have better performance (or it may have worse performance; most performance things have to be tested to see).
For every circle, generate a non-opaque
CALayerand attach it to your view. Assign itscontentsto be a pre-rendered circleCGImageRef. Attach a fade animation to it. Attach it to the view. Using an animation delegate, remove the layer when it completes its animation. I would probably then re-use the layer rather than destroying it and creating a new one. It already has your circle in it after-all, so reusing it should be extremely cheap. (EDIT: I was rethinking this; you don't even have to remove and re-add the layer, just move it to its new location, or hide it if you don't need it. You could make all these circles sub-layers of a "trail" layer if you wanted an easy way to remove the whole trail when it's not needed.)The advantage of my scheme is that it only calculates pixels that matter, and relies on the iPhone's optimized drawing system to do the calculations. It can generate a large number of layers, but the system is designed to handle that (and the number of layers is fixed by your trail-length and frame-rate). The code should also be very simple.
我将执行以下操作：
这将使屏幕上的所有内容慢慢淡出，最近绘制的圆圈最为可见。
我在Flash中做过类似的事情（汽车后面的灰尘），它工作得很好
至于技术，你可能可以用Quartz来做到这一点，只有当性能太差时我才会切换到OpenGL
I would do the following:
This will make everything that is on screen slowly fade, with the circles drawn most recently being most visible.
I've done similar things in Flash (dust behind a car) and it works pretty well
As for a technology, you could probably do this with Quartz, only if the performance was too bad would I switch to OpenGL
如果您想使用 OpenGL，您可以：
If you'd like to use OpenGL you can:
如果您下载 Cocos2D 并启动 ParticlesTest，您将看到许多与此效果类似的示例。
If you download Cocos2D and launch the ParticlesTest, you will see many examples that are similar to this effect.