Думаю, я наконец-то нашла свою нишу в этой области.

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

Сейчас я трачу больше времени на то, чтобы возиться со своим стилем, чем писать настоящий React. Кажется, что с каждой новой технологией, которую я касаюсь, меня больше всего интересуют визуальные компоненты.

Для моего последнего проекта мы с партнером создавали интерфейс React с Rails API. Мы решили, что хотим написать работающую игру, цель которой - собрать как можно больше монет, пока у вас не кончатся жизни. Не уверен, откуда пришло вдохновение. Мой брат привязан к своему DS и не может перестать играть в SmashBros ... Я как-то провожу параллель (это уже досягаемость).

Мой партнер и я понятия не имели, как мы подойдем к этому. Ни один из нас никогда не писал игру с нуля, поэтому мы знали, что нам придется изучить некоторые новые приемы, чтобы осуществить это. Введите HTML Canvas. Оглядываясь назад, можно сказать, что интегрировать Canvas с нашими компонентами React не имело абсолютно никакого смысла. Однако красота незнания в том, что вы находитесь в идеальном положении, чтобы учиться.

Мы каким-то образом справились с этим, и я должен сказать, что это наполовину прилично. У нас был крайний срок, который нужно было уложить, так что, конечно, он не идеален. У каждого из нас были десятки идей, которые так и не нашли воплощения. В целом, это рабочая, двумерная, бесконечно повторяющаяся, многосимвольная игра с двумя уникальными мирами, в которых можно работать. Неплохо для 10-дневного периода. Я, безусловно, пользуюсь потенциалом Canvas и, скорее всего, вернусь к нему в будущих проектах.

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

Вот три мои лучшие библиотеки, которые стоит изучить в будущем:

  • React Spring: преимущество здесь в том, что это API анимации, основанный на физике. Spring делает упор на кривые и плавность, а не на анимацию, основанную на продолжительности.

  • Framer Motion: похоже, это ранее известная поза. Листая их документацию, я могу оценить простоту синтаксиса.
  • React Transition Group: судя по тому, что я читал об этой библиотеке, она не такая сложная по сравнению с двумя предыдущими, но это обязательно будет хорошим учебником для того, чтобы в основном иметь дело с базовый CSS. Я сразу заметил некоторые знакомые концепции, такие как переходы, основанные на таких событиях, как вход / выход мыши и так далее.

Основное преимущество, которое я получил от попытки реализовать холст HTML в среде React, было подтверждением моей любви к интерфейсу. Я разрывался между желанием сосредоточиться на изучении навыков фронтенд-разработки, но и тем, чтобы не позволить кораблю плыть на Python. Я по-прежнему собираюсь оставаться открытым для таких вещей, как Python или Rails, но пока ничто не вызывает моего интереса, как движение пикселей организованным (или хаотическим) образом.