Как будет реализован эффект «исчезающего касания» на iPhone?

Question

Мне интересно, как бы вы реализовали эффект, подобный , этот реализован во флэш-памяти . Это будет просто черный экран, который, когда пользователь прикасается к нему и перетаскивает его, производит эффект, аналогичный тому, который можно увидеть во флэш-фильме.

Как называется этот эффект? У вас есть лучший пример?
Одна из моих самых больших проблем - точно сформулировать, о чем я говорю. Мне нужно как название для этого типа эффекта, так и видео, которое может показать, о чем я говорю. Это поможет другим лучше понять проблему.

Ближайший термин, который я могу придумать, который описывает нечто подобное, - это указатель . Единственное отличие состоит в том, что вместо того, чтобы показывать курсор, он будет показывать твердый след, который плавно исчезает. Веб-сайт , который сделал пример флеш , называет его Particle Ghosting . Другой пример этого - это видео YouTube для HP , которое показывает эффект от 0:30 до 0:36. Он начинает больше походить на краску, но в конечном итоге превращается в эффект исчезающего следа.

Если у вас есть лучшее название для этого эффекта или лучший пример, пожалуйста, укажите это, и я обновлю пост.

Какая технология iPhone потребуется?
OpenGL или Кварц 2D? Я предполагаю, что основная графика исключена из-за скорости. Любая другая технология, которую я пропускаю? Это должно быть достаточно быстро, без каких-либо задержек. Если предположить, что в любой заданной точке длится около секунды, в то же время может быть значительное количество анимированных пикселей, когда пользователь быстро перемещает палец. Возможно, даже заполнение большей части экрана пикселями, которые нужно потушить. Эффект должен выглядеть очень элегантно, ничего похожего на изменчивость следа указателя в XP.

Как это будет реализовано?
В идеале, я не хочу, чтобы эффект затухания был таким же жестким, как в примере со вспышкой (где это идеальный круг), и больше похож на видео HP, где затухание более органично (где на затухании разные каждая точка тропы).

Буду ли я манипулировать отдельными пикселями напрямую? То есть нужно ли отслеживать каждый пиксель, на который переместился палец, и неоднократно вызывать функцию, такую ​​как PaintPixel (x, y, яркость), которая изменяет значение RGB пикселя? Это похоже на чрезмерное количество пиксельных модификаций и звучит так, как будто это замедлит работу всей системы. Тем не менее, я никогда не делал такого рода вещи раньше, поэтому я не знаю, так ли это обычно. Например, давайте предположим, что одно касание занимает 32x32 пикселей. У нас есть 32 х 32 = 1024 пикселей для каждого прикосновения. По мере движения пальца необходимо будет анимировать дополнительные 1024 пикселя, большинство из которых уже перекрываются с предыдущим касанием. Предполагая, что палец прошел по высоте iPhone за секунду, мы говорим о 480 x 32 пикселях = 15 360 пикселях, которые обновляются много раз в секунду.

Буду ли я использовать небольшой видеоклип, который исчезает с белого на черный, и просто генерировать множество экземпляров видеоклипа при движении пальца? У меня нет версии Flash, которая может открыть пример Flash, поэтому я не могу изучить его исходный код, но я предполагаю, что он просто создает новые экземпляры видеоклипов, когда точка перемещается. Это немного сложно для органического затухания, которое, вероятно, потребует создания нескольких затухающих видеоклипов и случайного выбора одного для каждой точки.

Буду ли я использовать набор изображений (например, 100 или около того кругов, каждый из которых представляет прикосновение, переходящее от сплошного белого к черному), а затем создавать и заменять их экземпляры по мере того, как время идет? Например, при перемещении пальца в этой точке я отобразил бы touch100.jpg, который представляет чистый белый цвет, и на следующей итерации та же точка отобразит touch99.jpg, затем touch98.jpg, продолжая, пока не достигнет touch0.jpg, который представляет чистый черный.

Есть другие идеи, которые мне не хватает?

Извините, если эти идеи звучат странно. Как вы, вероятно, можете сказать, я никогда не делал ничего подобного раньше, поэтому я не знаю, каков обычный способ реализации такого рода эффекта, и я просто выбрасываю любую идею, о которой могу подумать.

Какие ресурсы вы бы порекомендовали, чтобы узнать, как это реализовать?
Есть ли учебный материал, который вы бы порекомендовали кому-то, кто пытается научиться реализовывать подобные вещи?

Я не хочу тратить кучу времени на изучение одной технологии (например, Quartz), когда мне нужно будет знать совершенно другую технологию для ее реализации (например, OpenGL).

Есть ли какая-либо другая информация, которую я забыл предоставить?
Есть ли какие-либо дополнительные вопросы, которые вы бы порекомендовали мне задать?

Answer 1

pheelicks имеет хороший дизайн, прост в реализации и может хорошо работать. Недостатком является необходимость пересчета всего экрана в каждом кадре, что может быть менее эффективным, чем было бы оптимальным. Я хотел бы предложить следующий дизайн, который может иметь лучшую производительность (или может иметь худшую производительность; большинство вещей производительности должны быть проверены, чтобы увидеть).

Для каждого круга создайте непрозрачный CALayer и прикрепите его к своему виду. Назначьте contents предварительно отрисованный круг CGImageRef. Прикрепите анимацию исчезновения к нему. Прикрепите его к виду. Используя делегат анимации, удалите слой, когда он завершит анимацию. Вероятно, я бы использовал слой повторно, а не уничтожил бы его и создал новый. В конце концов, в нем уже есть ваш круг, поэтому его повторное использование должно быть чрезвычайно дешевым. (РЕДАКТИРОВАТЬ: я переосмыслил это; вам даже не нужно удалять и повторно добавлять слой, просто переместить его на новое место или скрыть, если он вам не нужен. Вы можете сделать все эти круги подгруппами. слои слоя «след», если вам нужен простой способ удалить весь след, когда он не нужен.)

Преимущество моей схемы в том, что она рассчитывает только те пиксели, которые имеют значение, и полагается на оптимизированную систему рисования iPhone для выполнения расчетов. Он может генерировать большое количество слоев, но система рассчитана на это (и количество слоев определяется длиной трейла и частотой кадров). Код также должен быть очень простым.

Answer 2

Я бы сделал следующее:

• Создайте растровое изображение, на котором вы будете рисовать, назовите его холстом
• Создайте изображение, представляющее след, в вашем примере сплошной круг
• Каждый кадр рисует этот круг, где у пользователя в данный момент есть палец.
• Также для каждого кадра применяется преобразование к холсту, которое умножает альфа каждого пикселя на значение меньше 1, т.е.0,99

Это приведет к тому, что все, что на экране, будет постепенно исчезать, а нарисованные круги будут наиболее заметными.

Я делал подобные вещи во Flash (пыль за машиной).) и он работает довольно хорошо

Что касается технологии, вы, вероятно, могли бы сделать это с Quartz, только если бы производительность была слишком плохой, я бы переключился на OpenGL

Answer 3

Если вы скачаете Cocos2D и запустите ParticlesTest, вы увидите много примеров, похожих на этот эффект.

Answer 4

Если вы хотите использовать OpenGL, вы можете:

1. Нарисуйте след в виде изображения, вам нужно будет поэкспериментировать с размерами, но изображение следа должно иметь альфа-канал.
2. Далее добавьте код для расчета вектора движения для вашего указателя.
3. Теперь вычислите линию, перпендикулярную вектору движения для вашего указателя.
4. Создайте точки, которые падают вдоль линии, которую вы рассчитали, эти точки должны быть смещены от положения вашего указателя (расстояние зависит от размера вашего указателя).
5. Хранить буфер из двух точек, рассчитанных выше с течением времени.
6. Теперь вы будете использовать OpenGL для создания четырехугольной полосы, используя точки в вашем буфере в качестве вершин.
7. Наконец примените изображение тропы, которое вы нарисовали в качестве текстуры, к полосе квадратов, которую вы создали.