AnimatedTextKit — краткое введение
AnimatedTextKit — это пакет Flutter, который упрощает процесс добавления текстовой анимации в ваше приложение. Он предлагает множество стилей текстовой анимации: от простого появления и исчезновения до более сложных анимаций, таких как «Пишущая машинка» и «Пишущая машинка». Всего с помощью нескольких строк кода вы можете создать потрясающую текстовую анимацию, которая привлечет внимание ваших пользователей и улучшит их общее впечатление.
Начало работы
Чтобы использовать пакет AnimatedTextKit в своем проекте Flutter, вам сначала необходимо добавить его в файл pubspec.yaml:
dependencies: animated_text_kit: ^5.2.0
Простые анимации
Давайте начнем с простого примера появления и исчезновения текста с помощью FadeAnimatedTextKit. Сначала импортируйте пакет:
import 'package:animated_text_kit/animated_text_kit.dart'; SizedBox( width: 250.0, child: DefaultTextStyle( style: TextStyle(fontSize: 32.0, fontWeight: FontWeight.bold), child: AnimatedTextKit( animatedTexts: [ FadeAnimatedText('do IT!'), FadeAnimatedText('do it RIGHT!!'), FadeAnimatedText('do it RIGHT NOW!!!'), ], onTap: onTap, ), ), )
DefaultTextStyle( style: TextStyle( fontSize: 40.0, fontFamily: 'Horizon', ), child: AnimatedTextKit( animatedTexts: [ RotateAnimatedText('AWESOME'), RotateAnimatedText('OPTIMISTIC'), RotateAnimatedText( 'DIFFERENT', textStyle: const TextStyle( decoration: TextDecoration.underline, ), ), ], onTap: onTap, isRepeatingAnimation: true, totalRepeatCount: 10, ), ),
Поворот анимации
DefaultTextStyle( style: const TextStyle( fontSize: 30.0, fontFamily: 'Bobbers', ), child: AnimatedTextKit( animatedTexts: [ TyperAnimatedText('It is not enough to do your best,'), TyperAnimatedText('you must know what to do,'), TyperAnimatedText('and then do your best'), TyperAnimatedText('- W.Edwards Deming'), ], onTap: onTap, ), ),
Машинистка Анимация
DefaultTextStyle( style: const TextStyle( fontSize: 30.0, fontFamily: 'Agne', ), child: AnimatedTextKit( animatedTexts: [ TypewriterAnimatedText('Discipline is the best tool'), TypewriterAnimatedText('Design first, then code', cursor: '|'), TypewriterAnimatedText('Do not patch bugs out, rewrite them', cursor: '<|>'), TypewriterAnimatedText('Do not test bugs out, design them out', cursor: '💡'), ], onTap: onTap, ), ),
Машинист Анимации
AnimatedTextKit( animatedTexts: [ ColorizeAnimatedText( 'Larry Page', textStyle: _colorizeTextStyle, colors: _colorizeColors, ), ColorizeAnimatedText( 'Bill Gates', textStyle: _colorizeTextStyle, colors: _colorizeColors, ), ColorizeAnimatedText( 'Steve Jobs', textStyle: _colorizeTextStyle, colors: _colorizeColors, ), ], onTap: onTap, ),
Раскрасить анимацию
TextLiquidFill( text: 'LIQUIDY', waveColor: Colors.blueAccent, boxBackgroundColor: Colors.redAccent, textStyle: const TextStyle( fontSize: 70, fontWeight: FontWeight.bold, ), boxHeight: 300, ),
Текстовая анимация LiquidFill
DefaultTextStyle( style: const TextStyle( fontSize: 20.0, ), child: AnimatedTextKit( animatedTexts: [ WavyAnimatedText( 'Hello World', textStyle: const TextStyle( fontSize: 24.0, fontWeight: FontWeight.bold, ), ), WavyAnimatedText('Look at the waves'), WavyAnimatedText('They look so Amazing'), ], onTap: onTap, ), ),
Анимация волнистого текста
DefaultTextStyle( style: const TextStyle( fontSize: 35, color: Colors.white, shadows: [ Shadow( blurRadius: 7.0, color: Colors.white, offset: Offset(0, 0), ), ], ), child: AnimatedTextKit( repeatForever: true, animatedTexts: [ FlickerAnimatedText('Flicker Frenzy'), FlickerAnimatedText('Night Vibes On'), FlickerAnimatedText("C'est La Vie !"), ], onTap: onTap, ), ),
Фликер-анимация
Полный код:
Выход:
Заключение
Включение текстовой анимации в ваше приложение Flutter — это фантастический способ повысить вовлеченность пользователей и создать более динамичный пользовательский интерфейс. Пакет AnimatedTextKit упрощает процесс добавления текстовой анимации, предоставляя различные стили анимации и параметры настройки в соответствии с вашими потребностями.
Если вы хотите добавить легкие плавные переходы или привлекательные эффекты пишущей машинки, AnimatedTextKit поможет вам. Итак, начните анимировать свой текст и сделайте свое приложение Flutter действительно выдающимся в мире мобильной разработки. Ваши пользователи оценят дополнительные усилия, которые вы вкладываете в создание увлекательного и запоминающегося опыта.
❤ ❤ Спасибо за прочтение этой статьи ❤❤
Если я ошибся? Дай мне знать в комментариях. Я бы хотел улучшиться.
Хлопайте 👏 Если эта статья вам поможет.
Спасибо, что дочитали до конца. Пожалуйста, подумайте о том, чтобы подписаться на автора и эту публикацию. Посетите Stackademic, чтобы узнать больше о том, как мы демократизируем бесплатное образование в области программирования во всем мире.