Розробка методики ефективного застосування анімації у WEB

Abstract

У роботі запропонована методика ефективного використання анімації у веб-продуктах. Проведено дослідження сучасних технологій і методик створення анімацій для веб-сайтів, а саме розглянуті технології CSS, Javascript, Motion UI, проаналізовані плюси і мінуси їхнього використання. На основі отриманої інформації сформульовано гіпотезу та створено лінійну методику, засновану на використанні універсальної технології Motion UI. Методика передбачає послідовне виконання ряду етапів. Так, на першому етапі користувачеві рекомендується підключити бібліотеку Motion UI. На наступному етапі необхідно визначити ступінь складності анімації. У разі, коли має бути розроблено нескладну анімацію, доцільно використовувати інструменти CSS, інакше, для більш складних випадків, ефективніше використовувати можливості Javascript. В обох випадках доцільно на заключному етапі розробки анімації застосувати інструменти Sass. Завершальним етапом методики є тестування, що дозволяє оцінити якість створеної анімації. Розроблена методика застосована в роботі при створенні анімації обраного об'єкта. Проведено тестування за допомогою методу експертних оцінок з попереднім анкетуванням запрошеної фокус-групи. Експертові, в якості якого виступав професійний розробник, було запропоновано створити 20 анімацій за допомогою технологій CSS, Javascript і Motion UI для заздалегідь розробленого об'єкту. Час розробки фіксувався програмним способом. Далі розроблені анімації були розглянуті фокус-групою і проведено оцінку часу завантаження ефектів на веб-сторінці за п'ятибальною шкалою. Проведений за допомогою методів математичної статистики аналіз результатів експерименту свідчить про те, що запропонована методика, яка передбачає використання технології Motion UI, дозволяє скоротити не тільки час розробки анімації, але йчас її завантаження. Таким чином, можна зробити висновок, що розроблена методика відрізняється від існуючих методик високою ефективністю, в цілому відповідає очікуванням експертів і доцільна для застосування.This paper proposes a technique for the effective use of animation in web products. A study of modern technologies and techniques for creating animations for websites was carried out, namely, the technologies CSS, Javascript, Motion UI were considered and analyzed their pros and cons. Grounding on information obtained, a hypothesis was formulated and a linear technique was created, based on the use of the universal Motion UI technology, providing sequential execution of a number of stages. At the first stage, the user is recommended to connect the Motion UI library. The next step is to determine animation complexity. In case when you have to develop a simple animation, it is advisable to use CSS tools, otherwise, for more complex cases, it is more efficient to use the capabilities of Javascript. In both cases, it is advisable to use Sass tools at the final stage of animation development. The final stage of the methodology is testing, which allows assessing the quality of created animation. The developed technique was applied in the work when creating the animation of the selected object. Testing was carried out using the method of expert assessments with a preliminary survey of the invited focus group. The expert, who was a professional developer, was asked to create 20 animations using CSS, Javascript and Motion UI technologies for a pre-designed object. The development time was recorded with software. Further, the developed animations were given to a focus group for review and the web page effects loading time was estimated on a five-point scale. The experiment results analysis carried out using the methods of mathematical statistics indicates that the proposed method, which involves the use of the Motion UI technology, can reduce not only the animation development but loading time as well. Thus, we can conclude that the developed methodology differs from the existing methods in high efficiency. In general, the technique meets expectations of experts and is appropriate for use.