<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

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

Зачем Вы изучаете программирование/создание сайтов?

Анимированный градиент Granim.js

Анимированный градиент Granim.js

На этом уроке мы научимся применять анимированные градиенты, используя JavaScript библиотеку – Granim.js. Вы увидите, как просто работать с этой замечательной библиотекой, тем более, когда есть все примеры вариантов анимации на сайте. Вам останется, только копировать код, вставлять в свой проект , меняя или добавляя некоторые параметры.

Официальный сайт: https://sarcadass.github.io/granim.js/examples.html

Базовая анимация градиентов

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

See the Pen Basic gradients animation with granim.js by porsake (@porsake) on CodePen.

Идентификатор у элемента (element) - #canvas-basic, должен быть один и тот же в HTML/CSS/JS коде.

Градиент может иметь четыре направления

  • left-right: слева направо
  • top-bottom: сверху вниз
  • diagonal: по диагонали
  • radial: из центра к краям

Замените в коде дефолтное значение на нужное вам.

direction: 'left-right'

Можно поменять длительность анимации градиента.

transitionSpeed: 5000

Заменить код цвета градиента.

gradients: [ ['#AA076B', '#61045F']]

Градиенты с картинкой и режимом наложения.

Это вариант, когда градиенты с двумя цветами накладываются на фоновое изображение. В примере по умолчанию, стоит режим – multiply (умножение). Можно поиграться с разными режимами смешивания, подобрав более эффектный.

See the Pen Gradients with an image with granim.js by porsake (@porsake) on CodePen.

Дополнительные параметры для options.image.

По умолчанию, изображение расположено в центре, по осям X и Y, но эти значения можно заменить на left, right, top, bottom.

position: ['center', 'center']

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

loop: true

Градиенты с маской изображения

Анимация применяется вовсе, не к текстовому логотипу, который прописан в HTML коде, а к графическому логотипу logo-mask.png. Вам надо, например в программе Photoshop сделать "дырку от бублика", то есть вместо букв создать прозрачную маску и сохранить в формате PNG с прозрачностью. Именно эта прозрачность, заполняющая контуры букв логотипа и заполняется анимированным градиентом.

Анимированный градиент Granim.js.

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

See the Pen Gradients with an image mask by porsake (@porsake) on CodePen.


Интерактивные градиенты

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

See the Pen Interactive Gradients by porsake (@porsake) on CodePen.

Требуется подключить библиотеку jQuery.

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

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

loop: false

Подключить библиотеку Granim.js можно через внешнюю CDN ссылку.

<script src='https://cdnjs.cloudflare.com/ajax/libs/granim/1.1.1/granim.min.js'></script>

Или скачать файл granim.min.js, тогда путь до файла укажите свой.

<script src='js/granim.min.js'></script>

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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