1. Наука
  2. Видання
  3. Системи обробки інформації
  4. 2(157)'2019
  5. О применении кривых Безье для улучшения CSS анимации

О применении кривых Безье для улучшения CSS анимации

И.Н. Егорова, К.Д. Антипенко
Системи обробки інформації. — 2019. — № 2(157). – С. 40-44.
УДК 4.928
Мова статті: українська
Анотації на мовах:


Анотація: Проведено исследование возможности использования кривых Безье для улучшения CSS анимации. Рассмотрены методы создания веб-анимации на основе кривых Безье с использованием языков CSS3, SVG или элемента Canvas. Разработаны рекомендации по эффективному использованию кубических кривых для анимирования объектов веб-интерфейса. В работе проведен эксперимент, в котором анимация реализована как с применением кривых Безье, так и без них. Анализ полученных данных показал, что плавность движения значительно улучшает восприятие веб-интерфейса пользователем и выделяет веб-ресурс среди аналогов. Использование кубической кривой Безье в CSS анимации позволяет создавать уникальные комбинации движений объектов во времени.


Ключові слова: анимация, кривая Безье, UI элемент, пользовательский интерфейс

Список літератури

1. Johnston O. The Illusion of Life: Disney Animation / O. Johnston, F. Thomas. – New York, 1995. – 576 p.
2. Официальный сайт w3.org. Web Animations [Електронний ресурс]. – Режим доступу: www.w3.org/TR/web-animations-1/.
3. Основні поняття та властивості кривих Безьє [Електронний ресурс]. – Режим доступу: www.mathros.net.ua/kryvi-bezje.html.
4. Хемминг Р.В. Численные методы / Р.В. Хемминг. – М.: Наука, 1972. – 400 с.
5. Официальный сайт w3schools.com. Метод HTML Canvas bezierCurveTo() [Електронний ресурс]. – Режим доступу: www.w3schools.com/tags/canvas_beziercurveto.asp.
6. Официальный сайт developer.mozilla.org. Пути (paths) [Електронний ресурс]. – Режим доступу: developer.mozilla.org/ru/docs/Web/SVG/Tutorial/Paths/.
7. Официальный сайт w3schools.com. Функция CSS cubic-bezier() [Електронний ресурс]. – Режим доступу: www.w3schools.com/cssref/func_cubic-bezier.asp.
8. Ситник А. Функция плавности (easing) [Електронний ресурс] / А. Ситник, И. Соловьев. – 2018. – Режим доступу: easings.net/ru.
9. Официальный сайт htmlbook.ru. Справочник CSS, transition-timing-function [Електронний ресурс]. – Режим доступу: htmlbook.ru/css/transition-timing-function.
10. Скитский Т. Полное руководство по правильному использованию анимации в UX [Електронний ресурс] / Т. Скитский. – 2018. – Режим доступу: uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9.
11. Нильсен Дж. Сила десяти: временные рамки в пользовательском опыте [Електронний ресурс] / Дж. Нильсен. – 2009. – Режим доступу: www.nngroup.com/articles/powers-of-10-time-scales-in-ux/.
12. Нильсен Дж. Время отклика: три важных ограничения [Електронний ресурс] / Дж. Нильсен. – 1993. – Режим доступу: www.nngroup.com/articles/response-times-3-important-limits/.

Інформація про авторів публікації:
Бібліографічний опис для цитування:
Егорова И. Н. О применении кривых Безье для улучшения CSS анимации / И.Н. Егорова, К.Д. Антипенко  // Системи обробки інформації. – 2019. – № 2(157). – С. 40-44. https://doi.org/10.30748/soi.2019.157.05.

Whoops, looks like something went wrong.