1. Science
  2. Publications
  3. Information Processing Systems
  4. 2(157)'2019
  5. Using Bezier curves for improving CSS animations

Using Bezier curves for improving CSS animations

I. Iegorova, K. Antipenko
Annotations languages:


Description: Bezier curves usage possibilities for improvement of CSS animations taking physical properties of real-world objects into account have been studied. Methods for creation of web animation based on Bezier curves with CSS3, SVG and Canvas have been analyzed in this paper. The main application area of Bezier curves in cascading stylesheets are transitions and animation where interim conditions calculation are required. Several kinds of cubical curves were considered for solving different animation tasks. Standard gain and attenuation curve considered optimum in most of cases. Usually it is used for popup menus and for modal window opening. Besides objects different properties change function time interval of such changes is also defined during animation. Application areas during interface designing are diverse - from navigation implementation and special effects to the events sequence animation or feedback visualization. This paper contains conducted experiment, which has animation implemented with Bezier curves and without them. The main purpose of the experiment lies in evaluation of possibility to improve CSS animation by Bezier curves usage. Online store cased has been analyzed. Created animation in case of specific product image is pressed by user opens modal window with complete information regarding the good. The same animation closes modal window. It is determined that animation without cubical curve leads to immediate image enlargement which falls out of human sight perception. Frequent change of object states without smooth animation will have negative impact as on users attention so on the sight. Therefore, Bezier curve usage for implementation of CSS animation allows to improve the UI and to make the user experience more comfortable and convenient. As a result of conducted research expedience of Bezier curves usage for CSS animation improvement has been proven. Experiment conducted according to formulated recommendations. Analysis of obtained data showed that smoothness of movements significantly improves concentration of users attention, has positive effect on perception and distinguishes the web resource among analogues.


Keywords: animation, Bezier curve, UI element, user interface

References

1. Johnston, O. and Thomas, F. (1995), The Illusion of Life: Disney Animation, New York, 576 p.
2. The official site of w3.org (2018), “Veb animaciya” [Web Animations], available at: www.w3.org/TR/web-animations-1/ (accessed 20 October 2018).
3. “Osnovni ponyattya ta vlastyvosti kryvyx Bez`ye” [Basic concepts and properties of Bezier curves], available at: www.mathros.net.ua/kryvi-bezje.html (accessed 22 October 2018).
4. Hemming, R.V. (1972), “Chislennye metody” [Numerical methods], Moscow, 400 p.
5. The official site of w3schools.com (2018), HTML canvas bezierCurveTo() Method, available at: www.w3schools.com/tags/canvas_beziercurveto.asp (accessed 23 October 2018).
6. The official site of developer.mozilla.org (2018), Path, available at: developer.mozilla.org/ru/ docs/Web/SVG/Tutorial/Paths/ (accessed 23 October 2018).
7. The official site of w3schools.com (2018), CSS cubic-bezier() Function, available at: www.w3schools.com/cssref/func_cubic-bezier.asp (accessed 25 October 2018).
8. Sytnyk, A. and Solovev, I. (2018), “Funkciya plavnosti (easing)” [Smoothing function (easing)], available at: www.w3schools.com/cssref/css3_pr_transition-timing-function.asp (accessed 25 October 2018).
9. The official site of htmlbook.ru (2014), “Spravochnik CSS, transition-timing-function” [CSS catalog, transition-timing-function], available at: htmlbook.ru/css/transition-timing-function (accessed 26 October 2018).
10. Skytskyi, T. (2018), “Polnoe rukovodstvo po pravilnomu ispolzovaniyu animacii v UX” [A complete guide to the proper use of animation in the UX], available at: uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9 (accessed 26 October 2018).
11. Nielsen, J. (2009), Powers of 10: Time Scales in User Experience, available at: www.nngroup.com/articles/powers-of-10-time-scales-in-ux/ (accessed 27 October 2018).
12. Nielsen, J. (1993), Response Times: The 3 Important Limits, available at: www.nngroup.com/articles/response-times-3-important-limits/ (accessed 27 October 2018).

Reference:
 Ehorova, Y.N. and Antypenko, K.D. (2019), “O prymenenyy kryvыkh Beze dlia uluchshenyia CSS anymatsyy” [Using Bezier curves for improving CSS animations], Information Processing Systems, Vol. 2(157), pp. 40-44. https://doi.org/10.30748/soi.2019.157.05.