如何在iPhone上實現「淡入淡出」效果？

Question

我在想如何實現類似於this one implemented in flash的效果。它只是一個黑屏，當用戶觸摸並拖動它時，會產生類似於在Flash動畫中看到的效果。

這個效果叫什麼？你有更好的例子嗎？
我最大的問題之一就是清楚地說明我在說什麼。我需要一個名稱來表示這種類型的效果，以及一個可以顯示我在說什麼的視頻。這將有助於他人更好地理解問題。

我能想到的最接近的術語描述了類似的是pointer trail。唯一的區別是，它不會顯示光標，而是顯示出一條可以逐漸消失的實線。 website that made the flash example，稱之爲粒子重影。它的另一個例子是YouTube video for HP，它顯示了0:30到0:36之間的效果。它開始更像油漆，但最終變成衰落的尾跡效應。

如果您對此效果有更好的名稱或更好的示例，請提及它，我會更新該帖子。

需要哪種iPhone技術？
OpenGL or Quartz 2D？我猜測由於速度的原因，核心圖形不存在問題。我失蹤的任何其他技術？它需要足夠快而沒有任何滯後。假設在任何給定點上都會持續一秒左右的軌跡，當用戶快速移動手指時，可能會有相當數量的動畫像素。可能甚至填充大部分需要淡出像素的屏幕。效果應該看起來非常優雅，就像XP中指針軌跡的劈啪聲一樣。

它將如何實施？
理想情況下，我不希望淡出效果像閃光燈示例（它是一個完美的圓圈）那樣僵硬，更像是在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）。

有沒有我忘記提供的其他信息？
是否還有其他問題我建議你問我？

Answer 1

pheelicks具有良好的設計，實施簡單，而且可能效果不錯。它的缺點是不得不在每一幀重新計算整個屏幕，這可能比最佳效率低。我會提出下面的設計，可能會有更好的性能（或者它可能會有更差的性能;大多數性能都必須經過測試才能看到）。

對於每個圓圈，生成一個不透明的CALayer並將其附加到您的視圖。將它的contents指定爲預渲染圓圈CGImageRef。附加一個淡入淡出的動畫。將它附加到視圖。使用動畫委託，在完成動畫時刪除圖層。那麼我可能會重新使用該層，而不是摧毀它並創建一個新層。它已經有了你的圈子，所以重複使用它應該非常便宜。 （編輯：我正在重新思考這個問題，你甚至不需要移除和重新添加圖層，只需將它移動到新的位置，或者如果你不需要它就可以隱藏它，如果你想要一個簡單的方法來刪除整個線索在不需要的時候了「蹤跡」層的圖層。）

我的方案的優點是，它僅計算，無論像素，並依賴於iPhone的最優化的繪圖系統做計算。它可以生成大量的圖層，但是系統的設計是爲了處理這些圖層（並且圖層數量由您的路徑長度和幀率來確定）。代碼也應該非常簡單。

Answer 2

我會做到以下幾點：

• 創建位圖上，你會畫，稱之爲畫布
• 創建圖像代表的線索，在您的示例實心圓
• 每一幀在用戶當前有其手指的地方繪製此圓圈
• 同樣在每一幀上，將變換應用於畫布，該變換將每個像素的alpha乘以小於1的值，即0.99

這將使屏幕上的所有內容逐漸淡化，最近繪製的圓圈最容易看到。

我在閃存（汽車後面灰塵）做過類似的事情，它工作得很好

至於技術，你很可能與石英做到這一點，只有當表現太糟糕了我會切換OpenGL的

Answer 3

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

1. 繪製出步道作爲一個形象，你需要有大小實驗，但跟蹤圖像應該有一個alpha通道。
2. 接下來添加代碼來計算指針的移動向量。
3. 現在計算垂直於指針運動矢量的直線。
4. 創建沿着你計算的線落下的點，這些點應該偏離指針的位置（距離取決於指針的大小）。
5. 隨着時間的推移，存儲上面計算出的兩點的緩衝區。
6. 現在，您將使用OpenGL創建一個使用緩衝區中的點作爲頂點的四邊形條。
7. 最後，將您繪製的紋路圖像應用於您創建的四邊形條紋。

Answer 4

如果您下載Cocos2D並啓動ParticlesTest，您將看到許多與此效果相似的示例。