«Щелчок Таноса» или искусство в разработке

Ресурсы Вселенной ограничены, а постоянно растущее население планеты может привести к голодному вымиранию всего человечества в ближайшем будущем. Чтобы спасти людей от голодного вымирания, киновселенная Marvel придумала оригинальный способ решения проблемы. Она создала могущественного титана по имени Танос, взявшего на себя миссию спасителя. Идея Таноса состояла в том, чтобы собрав шесть Камней Бесконечности и объединив их силу в специальной Перчатке, раз и навсегда избавиться от половины населения планеты, просто щелкнув пальцами.

Эта история породила метафорическое значение, а фраза "Щелчок Таноса" стала крылатой и приобрела вполне реальные события. К примеру в бизнесе такое действие иронично называют жесткими антикризисными мерами, когда руководство компании одним махом увольняет большое количество сотрудников, дабы сократить расходы и спастись от банкротства.

Искусство программирования

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

Крылатая фраза Стива Джобса гласит: "Думай иначе". Это означает, что сегодня уже недостаточно просто уметь программировать - нужно создавать нечто неожиданное. Уже не достаточно того, чтобы приложение просто работало, важно, чтобы оно увлекало пользователя и не оставляло ни единого шанса конкурентам. В общем, настало время превращать программный код в настоящее искусство. О том как это сделать и пойдёт речь в данной статье.

Так как статья расчитана на Java-разработчиков, я расскажу о том, как можно применить метод "Щелчка Таноса" при решении задач построения графического интерфейса приложения. В качестве примера я расскажу, как реализовать удаление элементов списка сообщений в чате с применением эффекта взрыва, при котором сообщение будто разрывается на мелкие кусочки и растворяется в пространстве.

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

Магия

В этом примере будут использоваться только нативные компоненты ОС Андроид, поэтому дополнительные библиотеки не потребуются. Это сделает код чистым и легковесным без лишнего "шума и пыли". Итак, для реализации задуманного будем работать с растровым изображением (Bitmap) и аниматором ValueAnimator. Нам потребуется создать кастомный View который и возьмёт на себя всю работу.

На первом этапе нужно получить целевой View (TextView или любой другой) из списка сообщений и сконвертировать его в Bitmap. Иными словами создадим скриншот этого элемента а сам элемент сделаем невидимым View.GONE Далее мы будем работать с картинкой уже скрытого сообщения а само сообщение можно будет просто удалить.

Далее полученное растровое изображение нужно просканировать по сетке с определенным шагом (меньший шаг - лучше эффект но выше нагрузка на процессор). Для каждого полученного пикселя нужно создать объект-частицу (Particle) с исходными координатами (x, y) и цветом.

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

С помощью ValueAnimator от 0 до 1 запускается цикл перерисовки. На каждом кадре в методе onDraw кастомного View координаты частиц должны изменяться, а их прозрачность alpha уменьшаться. После частицы нужно нарисовать на холсте через drawPoint или drawCircle.

Для хранения параметров частиц создадим специальный класс:

public class Particle {
    float cx; // Текущая координата X
    float cy; // Текущая координата Y
    float originalX;
    float originalY;
    int color;
    float radius;
    
    // Скорости и направление разлета
    float vx;
    float vy;
    float alpha = 1.0f;
}

Теперь получим растровое изображение самого элемента сообщения:

// Конвертируем View в Bitmap
targetView.setDrawingCacheEnabled(true);
Bitmap bitmap = Bitmap.createBitmap(targetView.getDrawingCache());
targetView.setDrawingCacheEnabled(false);
targetView.setVisibility(View.GONE); // Скрываем оригинал
// Получаем размеры изображения
int width = bitmap.getWidth();
int height = bitmap.getHeight();

Теперь нужно нарезать картинку на пиксели и задать необходимые параметры частицам:

// Задаём переменные
List<Particle> particles;
Random random = new Random();

// Шаг сетки
int step = 4; 

// Нарезаем Bitmap на пиксели-частицы
for (int y = 0; y < height; y += step) {
    for (int x = 0; x < width; x += step) {
        int color = bitmap.getPixel(x, y);
        // Пропускаем полностью прозрачные пиксели
        if (color == 0) continue; 

        Particle particle = new Particle(); // <- класс частиц описанный выше
        particle.originalX = x;
        particle.originalY = y;
        particle.cx = x;
        particle.cy = y;
        particle.color = color;
        particle.radius = step / 2f;

        // Задаём случайный вектор разлета
        particle.vx = (random.nextFloat() - 0.5f) * 20f;
        particle.vy = (random.nextFloat() - 0.7f) * 15f;

        particles.add(particle);
    }
}

Когда частицы собраны в коллекцию можно запускать анимацию:

// Задаём переменные
ValueAnimator animator;
// Настраиваем и запускаем аниматор
animator = ValueAnimator.ofFloat(0f, 1f);
animator.setDuration(1200); // Длительность анимации в мс
animator.setInterpolator(new AccelerateDecelerateInterpolator());
        
animator.addUpdateListener(animation -> {
    float progress = (float) animation.getAnimatedValue();
    updateParticles(progress);
    invalidate(); // Перерисовка холста
});

animator.addListener(new android.animation.AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(android.animation.Animator.AnimatorListener animation) {
        if (endListener != null) endListener.onEnd();
    }
});

animator.start();

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

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (particles == null) return;

    for (Particle p : particles) {
        paint.setColor(p.color);
        paint.setAlpha((int) (p.alpha * 255));
        canvas.drawCircle(p.cx, p.cy, p.radius, paint);
    }
}

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

for (Particle p : particles) {
    // Изменяем координаты с учетом скорости
    p.cx += p.vx;
    p.cy += p.vy;
    p.vy += 0.5f; // Гравитация тянет частицы вниз
            
    // Плавное исчезновение (alpha от 1 до 0 во второй половине анимации)
    if (progress > 0.5f) {
        p.alpha = 1.0f - ((progress - 0.5f) * 2f);
    }
}

Интегрировать можно как в Activity так и во Fragment. Чтобы запустить эффект "Щелчок Таноса" или разрыва сообщения на частицы для конкретного сообщения (например, по клику или таймеру автоудаления), нужно добавить описанный выше кастомный View поверх корневого макета и выполнить код.

// Корневой контейнер (например, FrameLayout или ConstraintLayout)
ViewGroup rootLayout = findViewById(id.root_layout); 

// Само сообщение
TextView messageTextView = findViewById(id.tvMessage); 

// Создаем оверлей для анимации поверх экрана используя наш кастомный View
DisappearAnimationView animView = new DisappearAnimationView(this);
rootLayout.addView(animView, new ViewGroup.LayoutParams(
    ViewGroup.LayoutParams.MATCH_PARENT, 
    ViewGroup.LayoutParams.MATCH_PARENT
));

Для повышения производительности в манифесте нужно включить аппаратное ускорение - android:hardwareAccelerated="true".

Выводы

Добавление таких красивых эффектов делает приложение живым и запоминающимся. Вместо скучного исчезновения текста пользователь видит классную анимацию, которая превращает обычное удаление сообщения в маленькое эстетическое удовольствие. Это создает ощущение премиального продукта, над которым по-настоящему старались. Такие детали вызывают у пользователей "вау-эффект", повышают доверие к приложению и заставляют пользователя возвращаться в него снова просто потому, что им приятно пользоваться.

Ниже представлено демо видео примера как работает описанный мною выше код.

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.