<MyRusakov.ru />

Создание игр на Unreal Engine 4

Создание игр на Unreal Engine 4

Данный курс научит Вас созданию игр на Unreal Engine 4. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.

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

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства» и «Создание прототипа RPG с открытым миром».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Анимация - увеличение числа на JS

Анимация - увеличение числа на JS

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

1) Создадим в HTML файле блок, где будет выводится данное число.

<div id="out" class="out-num">0</div>

2) Создадим две переменные:

  • time - общее время отработки анимации числа и присвоим ей значение 10000 миллисекунд.
  • step - шаг с которым будет увеличиваться число, присвоим значение 1

const time = 10000;
const step = 1;


3) Создадим функцию outName

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

function outNum(num, elem) {
    // тело функции
};

Поскольку наше число будет выводится внутри тега div, то получим элемент по идентификатору внутри функции. Введем новую переменную elem, в которую получим тег div с идентификатором out.

function outNum(num, elem) {
    let elem = document.querySelector('#out');
};

Раз отсчет числа будет начинаться от нуля, значит присвоим счетчику n значение 0. Также нужно определиться с количеством шагов от выводимого числа до результата, пока не пройдут 10000 мс. Заранее округляем полученное число в переменную t с помощью метода Math.round (нам не нужно дробное число) и прописываем математическое действие. Делим время на результат от деления числа на шаг и получаем нужное время в переменную t. Затем зададим интервал с двумя параметрами, первый интервал это функция, а второй параметр - время t.

function outNum(num, elem) {
    let e = document.querySelector('#out');
    n = 0;
    let t = Math.round(time/(num/step));
    let interval = setInterval(() => {}, t);
};

Нам нужно наращивать наше число. Когда счетчик n достигнет определенного числа, то мы отменяем работу функции через clearInterval. Далее выводим само число в HTML-документе.

function outNum(num, elem) {
    let e = document.querySelector('#out');
    n = 0;
    let t = Math.round(time/(num/step));
    let interval = setInterval(() => {
        n = n + step;
        if(n == num) {
              clearInterval(interval);
         }
    e.innerHTML = n;
    },
t);
};


4) Запустим функцию outNum

Первым параметром мы передаем целевое число, на котором анимация закончится. Вторым параметром - элемент, где выводить число на странице сайта. Скорость анимации числа напрямую зависит от шага и времени отводимого для полного цикла. Увеличив время, можно замедлить скорость смены чисел. Значения переменных time, step и передаваемое число в первом параметре функции, можно менять под ваши задачи.

outNum(100, '#out');

5) Зададим CSS стили для красоты

.out-num {
    font-family: Impact, sans-serif;
    font-size: 70px;
    font-weight: 900;
    margin: 30px;
}

Мы видим, как за 10 секунд произошло увеличение числа на единицу с 0 до 100.

Если вам интересно изучать JavaScript, то переходите на мой видеокурс по JavaScript и осваивайте очень востребованную профессию фронтенд-разработчика.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

Praizzem Praizzem 18.01.2021 04:16:20

Доброго времени. Впервые нахожусь на данном сайте, нашёл здесь много полезной информации. Созрела пара вопросов: 1) Насколько актуальная информация опубликована в целом? 2) Оформление сайта кажется устаревшим, что насчёт редизайна? (Кажется, что ресурс устарел, это отпугивает)

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.