Дослідження методів анімації використовуючи фреймворк Flutter
DOI:
https://doi.org/10.30837/bi.2025.1(102).06Ключові слова:
DEVTOOLS, FLUTTER,, MATERIAL DESIGN, UX, АДАПТИВНІСТЬ, ЕКСПЛІЦИТНІ АНІМАЦІЇ, ІМПЛІЦИТНІ АНІМАЦІЇ, ІНКЛЮЗИВНІСТЬ, ПРОДУКТИВНІСТЬ ІНТЕРФЕЙСУ, ПРОФІЛЮВАННЯ ПРОДУКТИВНОСТІАнотація
Стаття присвячена дослідженню методів реалізації анімацій у мобільних застосунках на основі фреймворку Flutter з метою покращення користувацького досвіду. У межах роботи було проаналізовано сучасні підходи до створення анімованих інтерфейсів, зокрема імпліцитні (implicit) та експліцитні (explicit) анімації, а також використання анімованих віджетів і кастомних трансформацій. Особлива увага приділялася не лише технічним аспектам реалізації, а й впливу анімацій на сприйняття інтерфейсу користувачем, емоційне залучення та інклюзивність цифрового продукту. Оцінювання ефективності впроваджених рішень здійснювалося шляхом аналізу продуктивності, плавності відтворення анімацій, відповідності принципам Material Design, а також доступності для користувачів з особливими потребами. У дослідженні застосовувалися як інструменти профілювання Flutter, так і експертне оцінювання взаємодії користувача із застосунком. Результати дослідження показали, що вдумливе використання анімацій не лише покращує естетичне сприйняття інтерфейсу, але й сприяє інтуїтивному розумінню навігації, підвищенню залученості користувача та загальній ефективності мобільного рішення.
Посилання
Flutter documentation: Animations overview. URL: https://docs.flutter.dev/ui/animations/overview
Flutter Performance profiling with DevTools. URL: https://docs.flutter.dev/tools/devtools
Web Vitals. Google Developers. URL: https://web.dev/articles/vitals
Material Design – Motion principles. Google. URL: https://m3.material.io/styles/motion/overview/how-it-works
Accessibility in Flutter. Flutter documentation. URL: https://docs.flutter.dev/ui/accessibility-and-internationalization/accessibility
TalkBack screen reader for Android. Google Support. URL: https://support.google.com/accessibility/android/answer/6007100?hl=en
Lighthouse. Google Developers. URL: https://developer.chrome.com/docs/lighthouse/overview/
Semantics Widget. Flutter API Reference. URL: https://api.flutter.dev/flutter/widgets/Semantics-class.html
MediaQuery class – Flutter. URL: https://api.flutter.dev/flutter/widgets/MediaQuery-class.html
Animations in Flutter. URL: https://codelabs.developers.google.com/advanced-flutter-animations#0
