Пользователи используют смайлики больше, чем текст, чтобы выразить свои чувства, вот руководство, чтобы начать работу с примерами.

Фон

Все мы используем эмодзи в повседневной жизни. Используя холст в Jetpack compose, мы можем рисовать различные крутые смайлики!

Сегодня мы собираемся реализовать 6 эмодзи в Jetpack compose. Мы будем использовать составной холст, чтобы нарисовать их.

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

Хорошо, давайте начнем с первого!

1. Запутался

Чтобы нарисовать запутанный смайлик, мы использовали drawArc(), drawCircle() и drawline() методы canvas.

Здесь,

  1. drawArc() используется для рисования эмодзи кругов.
  2. drawCircle() методы в разных точках используются для рисования глаз
  3. drawLine() в конце используется, чтобы показать запутанное выражение лица.

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

Теперь, чтобы переместить глаза на заданные значения смещения, мы можем сделать что-то вроде —

Здесь наши глаза переместятся на offsetX в диапазоне (0f,15f,-15f,0f) означает 0f to -15f, затем -15f to 15f и, наконец, от 15f to 0f, поскольку мы использовали -offsetX в приведенном выше коде.

Мы можем заметить, что animateValues, который является компонуемым, поможет нам изменить значения в зависимости от целевых позиций.

Типичный компонуемый animateValues будет выглядеть примерно так. Просто отметим, что мы уже использовали это в нашей статье об анимации прогресса создания Jetpack.

Полный состав для смущенных эмодзи доступен наGithub.

2. Счастливый

Чтобы нарисовать счастливый смайлик, мы использовали методы холста drawArc(), drawCircle() и drawPath() в Jetpack compose.

Здесь,

  1. drawArc() используется для рисования эмодзи кругов.
  2. drawCircle() методов в различных точках используются для рисования глаз
  3. и drawPath() в конце используется для отображения счастливого выражения лица.

Чтобы нарисовать счастливую лицевую дорожку:

  1. Установите начальную точку пути на (x0, y0) с помощью метода moveTo(), где x0 — это 22 % размера пути (250), а y0 — 70 % размера пути.
  2. Нарисуйте изогнутый путь от начальной позиции (x0, y0) до (x1, y1) и завершите путь в (x2, y2), где x1 составляет 50% размера пути, а y1 — 80% размера пути, x2 — 78. % размера пути, а y2 составляет 70% размера пути.
  3. Снова нам нужно вернуться, чтобы завершить счастливое лицо рта. Итак, нарисуйте изогнутый путь от (x2, y2) до (x3, y3) и конечный путь в (x0, y0), где x3 составляет 50% размера пути, y3 составляет 95% размера пути, (x0, y0) равны 22% и 70% размера пути.

Полный состав для счастливых эмодзи доступен наGithub.

3. Круто

Чтобы нарисовать крутой эмодзи, мы снова использовали методы холста drawArc(), drawCircle() и drawPath() в Jetpack compose.

Здесь,

  1. drawArc() используется для рисования эмодзи круг.
  2. drawCircle() методы в разных точках используются для рисования глаз
  3. а drawPath() в конце используется для отображения выражений языка.

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

Полный состав для крутых эмодзи доступен на Github.

4. Восклицательный знак

Чтобы нарисовать восклицательный смайлик, мы снова использовали drawArc(), drawCircle() методы холста в Jetpack compose.

Здесь,

  1. drawArc() используется для рисования круга эмодзи.
  2. drawCircle() методы в разных точках используются для рисования глаз

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

Теперь, чтобы увеличить глаза, у нас может быть что-то вроде:

Здесь мы использовали infiniteTransition и помним его, чтобы сохранить его в памяти компоновки для компонуемых объектов.

Мы можем использовать animateFloat для создания анимации типа float, которая работает бесконечно как часть infiniteTransition.

Как только анимация будет создана, она будет работать от начального значения (1f) до целевого значения (30f) и будет повторяться вечно.

Здесь мы использовали tween как AnimationSpec на основе продолжительности, и он использует замедление для настройки доли анимации.

Замедление позволяет анимируемому значению ускоряться и замедляться, а не двигаться с постоянной скоростью.

Tween также имеет другой параметр, называемый durationMills, который представляет собой период ожидания после каждой итерации нашей анимации (мы использовали 1500 в примере анимации Twin).

Вот и все, что нужно для увеличения глаз смайликов.

Полная компоновка для восклицательного знака emoji доступна на Github.

5. Длинный язык

Чтобы нарисовать эмодзи с длинным языком, мы использовали drawArc(), drawOval() и drawPath() методы холста в Jetpack compose.

Здесь,

  1. drawArc() используется для рисования эмодзи круг.
  2. drawOval() методы в различных точках используются для рисования глаз
  3. а drawPath() в конце используется для отображения длинноязычных выражений.

Чтобы нарисовать длинный язык смайликов, вы можете выполнить шаги счастливого рта смайликов.

Полный состав для смайликов с длинным языком доступен на Github.

6. Грустный

Чтобы нарисовать грустный смайлик, мы использовали методы холста drawArc(), drawOval() и drawPath() в Jetpack compose.

Здесь

  1. drawArc() используется для рисования эмодзи круг
  2. drawOval() методы в различных точках используются для рисования глаз и
  3. drawPath() в конце используется для отображения грустных выражений.

Чтобы нарисовать грустные смайлики рот, вы можете выполнить шаги по пути счастливого смайлика.

Полный состав для грустных смайликов доступен на Github.

Заключить

Вот и все смайлики, надеюсь, вы узнали что-то новое!

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

Не волнуйтесь, если вы не получили все смайлики. Вы можете найти полный исходный код всех вышеперечисленных анимаций на Github.

Как всегда, отзывы и предложения приветствуются. Не стесняйтесь добавлять их в раздел ответов.

Связанные популярные статьи



Анимации прогресса в Jetpack Compose с примерами
Анимации необходимы в современных мобильных приложениях для обеспечения плавного взаимодействия с пользователем.blog.canopas.com





Анимации в Jetpack Compose с примерами
Привет, ребята, сегодня мы собираемся изучить, как реализовать анимацию в Jetpack Compose. Полный исходный код этого…blog.canopas.com



Если вам нравится то, что вы читаете, обязательно 👏👏👏 ниже — как писатель это означает мир!

Подпишитесь на Canopas, чтобы получать новости об интересных технических статьях!

Счастливые смайлики!