Автор оригинала: FreeCodeCamp Community Member.

Мэтью Чой

Это третья часть сооружения калькулятора диапазона батареи Tesla с React Series.

В части 1 мы создали приложение только с точкой реакции, а в части 2 мы преобразовали приложение путем введения Redux, решением государственного управления.

Часть 1, которая фокусируется на реакции, здесь :

Строительство Калькулятор температуры батареи Tesla с реакцией (часть 1) В этой серии статей я буду проходить вас через процесс создания калькулятора линейки батареи Tesla с реакцией … medium.freecodeCamp.com.

Часть 2, которая фокусируется на redux, здесь :

Строительство Калькулятор температуры батареи Tesla с реакцией (часть 2: Redux версия) В этом руководстве является вторая часть сооружения калькулятора температуры батареи Tesla с реакцией. medium.freecodecamp.com

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

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

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

Именно так:

Вы можете проверить Живая демонстрация Отказ

И вот Полный исходный код Отказ

В Часть 3 , мы сделаем пошаговый взгляд на процесс создания наших готовых приложений более стильно, используя CSS анимация Отказ

1. Разогрев

Давайте начнем с разогрева перед началом.

1-1. Основной пример анимации CSS

Анимация CSS позволяет элементу постепенно меняться из одного стиля к другому.

Анимация CSS состоит из двух компонентов:

• Стиль, описывающий анимацию CSS
• Набор ключевых кадров, которые указывают на начало и конечные состояния стиля анимации

Вот простой пример. В этом примере цвет фона одного элемента постепенно меняется с красного до желтого более 5 секунд.

Чтобы создать анимацию CSS, вам нужно два шага:

1-2. Еще один пример анимации CSS

Вот что мы начинаем с. У него есть заголовок Tesla, какой-то титул и хорошее изображение автомобиля Tesla.

1-3 состава это откажется

Вот три элемента красиво размещены. Давайте посмотрим, как эти три элемента медленно появляются на белом экране, как один или два актера, танцы на сцене ничем на белом фоне.

Сначала определите последовательность анимации с помощью ключевых кадров. Затем примените класс Animate-Pop-in с свойством анимации, определенного элементам Div и H1.

Теперь вы можете видеть, что три элемента отображаются медленно увеличиваются в размерах более 6 секунд.

1-4 кубический Безье

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

• легкость – скорость немного по середине, а затем замедляется к концу
• облегчить – начинается медленно и ускоряется до конца
• ослабить – начинается быстро, и замедляется до конца
• облегчить – начинает медленно, ускоряется до середины, затем замедляется до конца
• линейный – постоянная скорость анимации во всем

Важно, чтобы они по сути основаны на Кривая Безье .

1-5 Создание пользовательской скорости

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

Однако определение скорости анимации в формате Cubic-Bezier не интуитивно.

Вот фантастический Инструмент Визуализировать, как работает Cubic-Bezier.

Вот пример нанесения пользовательской скорости вместо ослабления.

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

2. Упражнение

Как мы видели в демо, мы применим анимацию до двух точек в нашем приложении:

• Когда приложение загружено
• Когда происходит действие пользователя

2.1 Когда приложение загружено

Давайте посмотрим на всю макет нашего приложения. Компонентная структура приложения, которую мы создали в части 1, часть 2 вообще не меняется. Просто ему необходимо определить атрибут анимации и @KeyFrames в соответствующем файле CSS. Файл CSS для модификации помечен зеленым.

2.1.1 Представляем Animista

Разве не было бы неплохо иметь инструмент, который позволяет нам посмотреть, каков эффект анимации возможны перед их применением? И как эффекты будут смотреть, как только вы их применили? Как вы могли бы объединить несколько анимационных свойств в одном месте? Для этого именно инструмент: Animista Отказ

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

Не забудьте нажать кнопку Добавить в избранное и получите код ключевой кадры на странице загрузки.

2.1.2 Настройка части 2 База кода проекта

Если вы хотите перейти непосредственно к части 3, не глядя на часть 2, вам необходимо сначала построить кодовую базу, клонируя код часть 2.

• Гит клон https://github.com/gyver98/redux-tesla-battery-range-calculator-tutorial
• Установка NPM
• Начнем NPM

После начала NPM давайте убедитесь, что приложение работает.

2.1.3 Tesla Header

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

Во-первых, откройте Header.css Файл и вставьте свойства анимации и значения ключевых кадров, скопированные из Animista. Затем измените его, чтобы обратиться к этому классу в Header.js файл.

• Проверьте Header.css.
• Проверьте Header.js.

2.1.4

заглавие

Focus-In-Contract-BCK Эффект, вероятно, будет работать для Tesla Title. Дайте эффект анимации так же, как вы сделали в заголовке Тесла.

Обратите внимание, что заголовок

элемент определен в App.js/app.css.

• Проверьте App.js.
• Проверьте App.csss.

2.1.5 Teslacar

Для компонента Teslacar, который имеет самые динамические эффекты, давайте применяем следующие два эффекта.

• Tesla Car: Slide-In-Elliptic-Dote-FWD
• Tesla Wheels: отскок

/src./Components/teslacar/teslacar.css.

.tesla-car-animation {  -webkit-animation: slide-in-elliptic-bottom-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;	-moz-animation: slide-in-elliptic-bottom-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;	animation: slide-in-elliptic-bottom-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;  }  

.tesla-wheels-animation {  -webkit-animation: bounce-in-top 2.3s both;  -moz-animation: bounce-in-top 2.3s both;  animation: bounce-in-top 2.3s both;}

@-webkit-keyframes slide-in-elliptic-bottom-fwd{0%{-webkit-transform:translateY(600px) rotateX(30deg) scale(0);transform:translateY(600px) rotateX(30deg) scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:0}100%{-webkit-transform:translateY(0) rotateX(0) scale(1);transform:translateY(0) rotateX(0) scale(1);-webkit-transform-origin:50% -1400px;transform-origin:50% -1400px;opacity:1}}@keyframes slide-in-elliptic-bottom-fwd{0%{-webkit-transform:translateY(600px) rotateX(30deg) scale(0);transform:translateY(600px) rotateX(30deg) scale(0);-webkit-transform-origin:50% 100%;transform-origin:50% 100%;opacity:0}100%{-webkit-transform:translateY(0) rotateX(0) scale(1);transform:translateY(0) rotateX(0) scale(1);-webkit-transform-origin:50% -1400px;transform-origin:50% -1400px;opacity:1}}

@-webkit-keyframes bounce-in-top{0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateY(-65px);transform:translateY(-65px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateY(-28px);transform:translateY(-28px);-webkit-animation-timing-function:ease-in}90%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}

@keyframes bounce-in-top{0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateY(-65px);transform:translateY(-65px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateY(-28px);transform:translateY(-28px);-webkit-animation-timing-function:ease-in}90%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}

/src/components/teslacar/teslacar.js.

const TeslaCar = (props) => (  
    
          <;/div>  
);

• Проверьте Teslacar.js.
• Проверьте Teslacar.css.

На данный момент вы должны увидеть это:

2.1.6 Teslastats.

На этот раз давайте дадим компонент Teslastats A щель в горизонтали Эффект анимации. Дайте задержку 2 секунды, чтобы начать после прогонов анимации Teslacar.

• Проверьте Teslastats.css.
• Проверить Teslastats.js.

2.1.7 Контроль Tesla

Счетчик скорости, счетчик температуры и компоненты климата и колес обернуты в Tesla-Controls Класс, поэтому мы можем просто модифицировать App.csss и app.js следующим образом, не модифицируя CSS каждого компонента.

Обеспечить те же анимационные эффекты, что применительно к компоненту Teslastats. Дайте задержку 2,5 секунды, чтобы начать после прогонов анимации Teslastats.

• Проверьте App.csss.
• Проверьте App.js.

Вот что вы должны видеть:

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

2.2 Когда происходит действие пользователя

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

2.2.1 Скоростной счетчик

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

Мы определили MapStatetOronops. и mapdispatchtopops. Как способ создать контейнер TeslaspeedCounter в части 2 и общаться с магазином Redux. Затем мы ссылаемся на состояние в компоненте Teslacounter через соединять И когда происходит действие, мы отправляем его в магазин redux для обновления нового состояния и визуализации представления.

На следующем рисунке хорошо показывает этот поток.

Итак, как вы анимируете, когда новое состояние отображается событием Click Speed Up? После определения анимации в Teslacounter.css, вы хотите добавить класс The Flip-In-Hor, который вы хотите подать заявку, следующим образом?

  
    { currentValue }    { initValues.unit }<;/span>  

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

2.2.2 Teslacounter.css.

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

• перевернуть
• верхушка
• Keyframes Flip-In-Hor-Dote
• Keyframes Flip-In-Hor-Top

• Проверьте Teslacounter.css.

2.2.3 Teslacounter.js.

Чтобы применить разные анимационные эффекты в соответствии со событием скорости вверх/вниз, нам нужно знать тип события, обновлять его в магазине Redux с редуктором, и иметь новое значение состояния, передаваемое в Teslacounter через реквизиты. Вместо того, чтобы добавить этот тип события в магазин redux, давайте реализовать его таким образом, чтобы справиться с местное государство Teslacounter. Поскольку местное состояние требуется, измените текущий Функциональный компонент Teslacounter как Компонент класса Отказ

Нам также нужен метод обновления жизненного цикла ComponentWillReceiveProps () здесь. Этот метод называется, когда реквизиты передаются на компонент Teslacounter. Компонент Teslacounter имеет два кнопки вверх/вниз, которая позволяет пользователю изменять значение счетчика, нажав на него. Кнопка связана с событием OnClick и устанавливает состояние в хранилище Redux через диспетку действия. Новое значение состояния затем передается в компонент Teslacounter в качестве опоры через Connect () в контейнере Teslacounter.

В любое время пользователя нажимает кнопку вверх/вниз, это начинается обновление для компонента Teslacounter. Первый метод, называемый компонентом, это ComponentWillReceiveProps (NextProops) прохождение в новом змеевом цене. Это позволяет нам сравнивать входящие реквизиты против наших текущих реквизитов и создавать логические решения на основе стоимости. Мы можем получить наши текущие реквизиты, позвонив Это .props и новое значение – это NextProops аргумент передан методу.

Так почему нам нужны компонентыWillReceiveProps? Это крючок, который позволяет нам смотреть в предстоящие Обновить Отказ Если у нас есть состояние, которое является расчетом реквизит, мы можем безопасно применить логику здесь и хранить результат, используя this.settate () Отказ

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

Вы можете увидеть весь поток через следующее изображение.

• Проверьте Teslacoutner.js.

Теперь нажмите на счетчики скорости и температуры, чтобы подтвердить, что анимация была применена. Но есть одна проблема. Если вы нажмете кнопку вверх/вниз попеременно, они работают нормально. Если вы нажмете одну и ту же кнопку непрерывно, анимация не будет применена. Это связано с тем, что класс анимации меняется только при изменении типа события.

Чтобы решить эту проблему, добавьте анимацияeffect к местному государству и поселям на инициализации прикладного класса анимации через 0,5 секунды.

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

• Проверить Teslacounter.js.js.

2.2.4 Теславеэлс анимация

Наконец, давайте применим анимационные эффекты при нажатии на колеса.

Во-первых, отскок в топ уже определен в Teslacar.css, поэтому давайте определим дополнительные отскочить анимация. Затем откройте файл Teslacar.js и замените Tesla-Car-анимацию, которая уже была применена в разделе Teslacar 2.1.5 с Тесла-колесная анимация – $ {rops.wheelsize} Отказ

• Проверьте Teslacar.css.
• Проверьте Teslacar.js.

У вас должен быть полностью работающий калькулятор Tesla Range с анимацией:

• Проверьте Полный исходный код

Оригинал: “https://www.freecodecamp.org/news/building-teslas-battery-range-calculator-with-react-part-3-css-animation-797476dc1b37/”