<MyRusakov.ru />

Программирование на C# с Нуля до Гуру

Программирование на C# с Нуля до Гуру

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

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

Помимо самого курса Вас ждут ещё 3 бесплатных ценных Бонуса: «Технология Windows Presentation Foundation», «Создание библиотеки классов» и «Правильная работа со справочником».

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

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

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

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

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

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

Плавная анимация движения на CSS

Плавная анимация движения на CSS

Как происходит анимация движения? Это когда анимируемый объект на сайте меняет свое горизонтальное и вертикальное положение в заданное время. Скорость анимации напрямую зависит от того, какое расстояние проходит объект за такое-то время. Чем меньше установленное время, тем быстрее движется объект и наоборот – увеличение отведенного времени, замедляет движение.

Анимацию движения легко можно создавать только на CSS, не прибегая к JS. Как минимум есть два варианта, какие свойства применять для анимации:

  1. top, bottom, left, right
  2. transform: translate

Для примера создадим фигуру и заставим её двигаться вниз и вправо.

<div class="square"></div> // HTML

// CSS
.square {
    width: 200px;
    height: 200px;
    border-radius: 10px;
    background-color: #d42929;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;

    animation: move 3s linear alternate infinite;
}

Разберем последнюю строку в коде:

  • move - название анимации, должно совпадать с @keyframes
  • 3s - длительность анимации
  • linear - линейное движение (по линии)
  • alternate - воспроизводит анимацию в обратном порядке
  • infinite - задает бесконечное повторение
Плавная анимация движения на CSS.

Пример анимации (вариант 1)

Как происходит анимация, когда мы используем top, bottom, right, left? Нам нужно сдвинуть фигуру на 200 пикселей вправо и вниз. Для этого пропишем для первого кадра исходные позиции элемента на странице. А для последнего кадра - положение элемента, где анимация должна закончиться.

@keyframes move {
    0% {
        top: 0;
        left: 0;
    }
    100% {
        top: 200px;
        left: 200px;
    }
}

Движение элемента между первым и последним кадром называется анимацией. Наш элемент будет сдвигаться на 1 пиксель в течении заданного времени. Браузер будет прорисовывать фигуру каждый раз заново на новой позиции, и так 200 раз туда и столько же обратно. Какие есть недостатки у этого способа анимации? Во первых нет плавности. Видно невооруженным глазом, как фигура дергается, словно спускается по ступенькам. Во вторых, это сильно нагружает браузер и на слабом компьютере анимация будет двигаться рывками.

Пример анимации (вариант 2)

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

@keyframes move {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(200px, 200px, 0);
    }
}

Итоги

Правильная CSS анимация движения должна создаваться при помощи трансформации (transform: translate). Так мы получим плавное движение объекта и не ухудшим скорость работы сайта.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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