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

Про застосування кривих Безьє для покращення CSS анімації

І.М. Єгорова, К.Д. Антіпенко
Аннотации на языках:


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