12 декабря 2019 г.FlutterсуществуетFlutter Interact '19написано как пользоватьсяRiveа такжеFlutterПосле просмотра мне показалось очень интересным поделиться опытом создания динамичных и интерактивных анимаций, поэтому я написал 3 небольших демки и выложил их в виде статей.
понимание существительного
Прежде всего, давайте разберемся с некоторыми терминами, иначе последующие статьи могут выглядеть немного головокружительно, а именно:
- Flare: имя плагина анимации Flutter, полное имя
flare_flutterмы вpubspec.yamlимпортировать в файл - Rive: Сделал анимацию FlareВеб-сайт, это и веб-сайт, и производственный инструмент.На этом веб-сайте многие пользователи делятся анимациями Flare, которые мы можем загрузить и использовать, документацией по API Flare, видеоуроками по созданию анимаций Flare (вы также можете научиться делать свои собственные анимации) и т. д. .
Предварительный просмотр интерактивной анимации
Логин интерактивная анимация
Вход в систему взаимодействия анимации, включая следующие 6 анимаций:
- IDLE: Нет статуса какой-либо операции (тело медведя плавает вверх-вниз и мигает)
- тест: состояние, когда мы вводим поле ввода электронной почты (медведь будет смотреть на поле ввода и поворачивать голову в зависимости от длины вашего ввода)
- hands_up: состояние, когда мы набираем в поле ввода пароля (медведи закроют глаза руками)
- hands_down: состояние, когда мы заканчиваем печатать в поле ввода пароля (медведь опустит руки)
- fail: состояние, когда мы не можем войти в систему (медведь сделает грустное выражение лица)
- успех: состояние, когда мы успешно вошли в систему (медведь сделает счастливое выражение лица)
Вышеупомянутые 6 состояний могут бытьRiveПроверьте веб-сайт для конкретных анимаций,Нажмите, чтобы просмотреть
Далее давайте посмотрим на эффект анимации в случае
idle: состояние, когда нет работы, как показано на рисунке:
test: состояние, когда мы входим в поле ввода электронной почты, как показано на рисунке:
hands_up: состояние, когда мы вводим в поле ввода пароля, hands_down: состояние, когда мы завершаем ввод в поле ввода пароля, как показано на рисунке:
fail: Статус, когда нам не удается войти в систему, как показано на рисунке:
успех: статус, когда мы успешно вошли в систему, как показано на рисунке:
Анимация взаимодействия с кнопкой
интерактивная анимация кнопки, как показано на рисунке:
Анимация взаимодействия с меню
интерактивная анимация меню, как показано на рисунке:
Все вышеперечисленные анимации также могут бытьКликните, чтобы посмотреть видео
Код
Как реализовать это в коде, делится на следующие 2 шага:
- Представляем плагины и ресурсы: Представляем связанные плагины
flare_flutter,smart_flare - Напишите код: Напишите соответствующий код
Представляем плагины и ресурсы
Внедрите плагины и ресурсы следующим образом:
dependencies:
...
flare_flutter: ^2.0.4 # flare 插件
smart_flare: any # 对 flare API进行封装的插件，使用少量的代码即可实现交互动画
...
assets:
...
- assets/Teddy.flr
- assets/button-animation.flr
- assets/slideout-menu.flr
...
Написать код
Так как анимация входа в систему немного сложнее, реализованный код здесь показываться не будет.Если вам интересно, вы можетеПерейдите на GitHub, чтобы просмотреть исходный код
Реализация кода интерактивной анимации кнопки
Код интерактивной анимации кнопки реализован следующим образом:
import 'package:flutter/material.dart';
import 'package:smart_flare/actors/smart_flare_actor.dart';
import 'package:smart_flare/models.dart';
class FlareButtonDemo extends StatefulWidget {
@override
_FlareButtonDemoState createState() => _FlareButtonDemoState();
}
class _FlareButtonDemoState extends State<FlareButtonDemo> {
@override
Widget build(BuildContext context) {
var animationWidth = 295.0;
var animationHeight = 251.0;
var animationWidthThirds = animationWidth / 3;
var halfAnimationHeight = animationHeight / 2;
var activeAreas = [
ActiveArea(
area: Rect.fromLTWH(0, 0, animationWidthThirds, halfAnimationHeight),
debugArea: false,
guardComingFrom: ['deactivate'],
animationName: 'camera_tapped',
),
ActiveArea(
area: Rect.fromLTWH(animationWidthThirds, 0, animationWidthThirds, halfAnimationHeight),
debugArea: false,
guardComingFrom: ['deactivate'],
animationName: 'pulse_tapped'),
ActiveArea(
area: Rect.fromLTWH(animationWidthThirds * 2, 0, animationWidthThirds, halfAnimationHeight),
debugArea: false,
guardComingFrom: ['deactivate'],
animationName: 'image_tapped'),
ActiveArea(
area: Rect.fromLTWH(0, animationHeight / 2, animationWidth, animationHeight / 2),
debugArea: false,
animationsToCycle: ['activate', 'deactivate'],
onAreaTapped: () {
print('Button tapped!');
})
];
return Scaffold(
appBar: AppBar(
title: Text('Flare Button Demo'),
),
body: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0x3fffeb3b),
Colors.orange,
]),
),
child: Align(
alignment: Alignment.bottomCenter,
child: SmartFlareActor(
width: animationWidth,
height: animationHeight,
filename: 'assets/button-animation.flr',
startingAnimation: 'deactivate',
activeAreas: activeAreas,
),
),
),
);
}
}
Реализация кода интерактивной анимации меню
Интерактивный анимационный код меню реализован следующим образом:
import 'package:flutter/material.dart';
import 'package:smart_flare/smart_flare.dart';
class FlareSidebarMenuDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
print(MediaQuery.of(context).size.height);
return Scaffold(
body: Container(
child: Align(
alignment: Alignment.centerRight,
child: PanFlareActor(
width: MediaQuery.of(context).size.width / 2.366,
height: MediaQuery.of(context).size.height,
filename: 'assets/slideout-menu.flr',
openAnimation: 'open',
closeAnimation: 'close',
direction: ActorAdvancingDirection.RightToLeft,
threshold: 20.0,
reverseOnRelease: true,
completeOnThresholdReached: true,
activeAreas: [
RelativePanArea(
area: Rect.fromLTWH(0, .7, 1.0, .3), debugArea: false),
],
),
),
),
);
}
}
Исходный код трех интерактивных дел живота, размещенных в одном из моих 2 лет назадФлаттер чехолЭтот проект поддерживается и будет обновляться еще долго в будущем.Заинтересованные друзья могут его собрать.Приходите посмотреть когда вам нечем заняться.Возможно будут новые открытия 😲
На этом эта статья заканчивается.В следующей статье мы поделимся с вами.Маршрутизация во Flutter обобщит все методы использования маршрутизации и, наконец, инкапсулирует отличный класс управления маршрутизацией.
Наконец, блог и адрес проекта прилагаются следующим образом:
адрес блога:Также Мастер Li.net/flutter-Fala…
адрес проекта:GitHub.com/пирс о/закон…