Розробка методики ефективного застосування анімації у WE
DOI:
https://doi.org/10.20998/2413-4295.2020.04.09Ключові слова:
методика, анімація, WEB, Motion UI, математична статистикаАнотація
У роботі запропонована методика ефективного використання анімації у веб-продуктах. Проведено дослідження сучасних технологій і методик створення анімацій для веб-сайтів, а саме розглянуті технології CSS, Javascript, Motion UI, проаналізовані плюси і мінуси їхнього використання. На основі отриманої інформації сформульовано гіпотезу та створено лінійну методику, засновану на використанні універсальної технології Motion UI. Методика передбачає послідовне виконання ряду етапів. Так, на першому етапі користувачеві рекомендується підключити бібліотеку Motion UI. На наступному етапі необхідно визначити ступінь складності анімації. У разі, коли має бути розроблено нескладну анімацію, доцільно використовувати інструменти CSS, інакше, для більш складних випадків, ефективніше використовувати можливості Javascript. В обох випадках доцільно на заключному етапі розробки анімації застосувати інструменти Sass. Завершальним етапом методики є тестування, що дозволяє оцінити якість створеної анімації. Розроблена методика застосована в роботі при створенні анімації обраного об'єкта. Проведено тестування за допомогою методу експертних оцінок з попереднім анкетуванням запрошеної фокус-групи. Експертові, в якості якого виступав професійний розробник, було запропоновано створити 20 анімацій за допомогою технологій CSS, Javascript і Motion UI для заздалегідь розробленого об'єкту. Час розробки фіксувався програмним способом. Далі розроблені анімації були розглянуті фокус-групою і проведено оцінку часу завантаження ефектів на веб-сторінці за п'ятибальною шкалою. Проведений за допомогою методів математичної статистики аналіз результатів експерименту свідчить про те, що запропонована методика, яка передбачає використання технології Motion UI, дозволяє скоротити не тільки час розробки анімації, але й час її завантаження. Таким чином, можна зробити висновок, що розроблена методика відрізняється від існуючих методик високою ефективністю, в цілому відповідає очікуванням експертів і доцільна для застосування.
Посилання
McLeod Ryan. Animation Handbook. Design Better by InVision, 2019.C 6.
Tuur Stuyck. Cloth Simulation for Computer Graphics. Synthesis Lectures on Visual Computing, 2018, Vol. 10, no. 3, pp. 1–121, doi: 10.2200/S00867ED1V01Y201807VCP032.
Ken Anjyo, Hiroyuki Ochiai. Mathematical Basics of Motion and Deformation in Computer Graphics. Synthesis Lectures on Computer Graphics and Animation, 2014, Vol. 6, no. 3, pp. 1–83, doi: 10.2200/S00599ED1V01Y201409CGR017.
Kirupa Chinnathambi. Animation in HTML, CSS, and Javascript. Create Space Independent Publishing Platform, 3rd ed., 2014. 514 p.
Rowell Eric. HTML5 Canvas Cookbook. Packt Publishing. 2011. 348 p.
Steven Bradley. CSS Animations and Transitions for the Modern Web. 1st Edition. Adobe Pr., 2014. 304 р.
Lea Verou. CSS Secrets: Better Solutions to Everyday Web Design Problems. 1st Edition. O'Reilly Media, 2015. 390 p.
Raffaele Cecco. Supercharged JavaScript Graphics: with HTML5 canvas, jQuery, and More. 1st Edition. O'Reilly Media, 2011. 282 p.
Julian Shapiro. Web Animation using JavaScript: Develop & Design (Develop and Design). 1st Edition. Peachpit Press, 2015. 178 р.
Val Head. Designing Interface Animation. Rosenfeld Media, 2016. 240 р.
Iegorova I., Komina M. About the choice of an effective technology for creating animation for web applications. Materials of the XXIV International Youth Forum “Radioelectronics and Young People in the XXI Centuries” (19–21 June 2020, Kharkiv). Kharkiv, 2020, рp. 353–354.
Iegorova I., Komina M. Styles of fine art in modern web design. Polygraphic, multimedia and web technologies (PMW-2019): materials of the youth school-seminar of the IV International Science and Technology Conference (14–17 May 2019, Kharkiv). Kharkiv, 2019, pр. 140–145.
##submission.downloads##
Опубліковано
Як цитувати
Номер
Розділ
Ліцензія
Журнал публікує статті згідно з ліцензією Creative Commons Attribution International CC-BY.
