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, чтобы узнать больше о том, как мы демократизируем бесплатное образование в области программирования во всем мире.
