Харківський національний університет Повітряних Сил імені Івана Кожедуба

Анотация: Проведено дослідження можливості використання кривих Безьє для покращення 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/.