WIP: added arrowRotate lottie animation

This commit is contained in:
ryleedavis 2023-04-21 17:00:28 -06:00
parent 90ef8c8694
commit 360d6d7266
3 changed files with 104 additions and 16 deletions

View file

@ -1,9 +1,11 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart'; import 'package:flutter_svg/svg.dart';
import 'package:lottie/lottie.dart';
import 'package:stackwallet/utilities/assets.dart'; import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/text_styles.dart'; import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart'; import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/utilities/util.dart'; import 'package:stackwallet/utilities/util.dart';
import 'package:stackwallet/widgets/animated_widgets/rotate_animation.dart';
import 'package:stackwallet/widgets/desktop/desktop_dialog.dart'; import 'package:stackwallet/widgets/desktop/desktop_dialog.dart';
import 'package:stackwallet/widgets/desktop/desktop_dialog_close_button.dart'; import 'package:stackwallet/widgets/desktop/desktop_dialog_close_button.dart';
import 'package:stackwallet/widgets/desktop/secondary_button.dart'; import 'package:stackwallet/widgets/desktop/secondary_button.dart';
@ -22,6 +24,7 @@ class _RestoringDialogState extends State<ClaimingPaynymDialog>
with TickerProviderStateMixin { with TickerProviderStateMixin {
late AnimationController? _spinController; late AnimationController? _spinController;
late Animation<double> _spinAnimation; late Animation<double> _spinAnimation;
late RotateAnimationController? _rotateAnimationController;
@override @override
void initState() { void initState() {
@ -35,6 +38,8 @@ class _RestoringDialogState extends State<ClaimingPaynymDialog>
curve: Curves.linear, curve: Curves.linear,
); );
_rotateAnimationController = RotateAnimationController();
super.initState(); super.initState();
} }
@ -43,6 +48,9 @@ class _RestoringDialogState extends State<ClaimingPaynymDialog>
_spinController?.dispose(); _spinController?.dispose();
_spinController = null; _spinController = null;
_rotateAnimationController?.forward = null;
_rotateAnimationController?.reset = null;
super.dispose(); super.dispose();
} }
@ -115,15 +123,23 @@ class _RestoringDialogState extends State<ClaimingPaynymDialog>
child: StackDialog( child: StackDialog(
title: "Claiming PayNym", title: "Claiming PayNym",
message: "We are generating your PayNym", message: "We are generating your PayNym",
icon: RotationTransition( // icon: RotationTransition(
turns: _spinAnimation, // turns: _spinAnimation,
child: SvgPicture.asset( // child: SvgPicture.asset(
Assets.svg.arrowRotate, // Assets.svg.arrowRotate,
color: // color:
Theme.of(context).extension<StackColors>()!.accentColorDark, // Theme.of(context).extension<StackColors>()!.accentColorDark,
width: 24, // width: 24,
height: 24, // height: 24,
// ),
// ),
icon: RotateAnimation(
lottie: Lottie.asset(
Assets.lottie.arrowRotate,
// delegates: LottieDelegates(values: []),
), ),
curve: Curves.easeInOutCubic,
controller: _rotateAnimationController,
), ),
rightButton: SecondaryButton( rightButton: SecondaryButton(
label: "Cancel", label: "Cancel",

View file

@ -1,5 +1,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart'; import 'package:flutter_svg/svg.dart';
import 'package:lottie/lottie.dart';
import 'package:stackwallet/utilities/assets.dart'; import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/enums/coin_enum.dart'; import 'package:stackwallet/utilities/enums/coin_enum.dart';
import 'package:stackwallet/utilities/text_styles.dart'; import 'package:stackwallet/utilities/text_styles.dart';
@ -9,6 +10,8 @@ import 'package:stackwallet/utilities/util.dart';
import 'package:stackwallet/widgets/desktop/secondary_button.dart'; import 'package:stackwallet/widgets/desktop/secondary_button.dart';
import 'package:stackwallet/widgets/stack_dialog.dart'; import 'package:stackwallet/widgets/stack_dialog.dart';
import '../../../widgets/animated_widgets/rotate_animation.dart';
class BuildingTransactionDialog extends StatefulWidget { class BuildingTransactionDialog extends StatefulWidget {
const BuildingTransactionDialog({ const BuildingTransactionDialog({
Key? key, Key? key,
@ -28,6 +31,8 @@ class _RestoringDialogState extends State<BuildingTransactionDialog>
late AnimationController? _spinController; late AnimationController? _spinController;
late Animation<double> _spinAnimation; late Animation<double> _spinAnimation;
late RotateAnimationController? _rotateAnimationController;
late final VoidCallback onCancel; late final VoidCallback onCancel;
@override @override
@ -44,6 +49,8 @@ class _RestoringDialogState extends State<BuildingTransactionDialog>
curve: Curves.linear, curve: Curves.linear,
); );
_rotateAnimationController = RotateAnimationController();
super.initState(); super.initState();
} }
@ -52,6 +59,9 @@ class _RestoringDialogState extends State<BuildingTransactionDialog>
_spinController?.dispose(); _spinController?.dispose();
_spinController = null; _spinController = null;
_rotateAnimationController?.forward = null;
_rotateAnimationController?.reset = null;
super.dispose(); super.dispose();
} }
@ -80,15 +90,13 @@ class _RestoringDialogState extends State<BuildingTransactionDialog>
), ),
), ),
if (!isChans) if (!isChans)
RotationTransition( RotateAnimation(
turns: _spinAnimation, lottie: Lottie.asset(
child: SvgPicture.asset( Assets.lottie.arrowRotate,
Assets.svg.arrowRotate, // delegates: LottieDelegates(values: []),
color:
Theme.of(context).extension<StackColors>()!.accentColorDark,
width: 24,
height: 24,
), ),
curve: Curves.easeInOutCubic,
controller: _rotateAnimationController,
), ),
const SizedBox( const SizedBox(
height: 40, height: 40,

View file

@ -0,0 +1,64 @@
import 'package:flutter/widgets.dart';
class RotateAnimationController {
VoidCallback? forward;
VoidCallback? reset;
}
class RotateAnimation extends StatefulWidget {
const RotateAnimation({
Key? key,
required this.lottie,
required this.curve,
this.controller,
}) : super(key: key);
final Widget lottie;
final Curve curve;
final RotateAnimationController? controller;
@override
State<RotateAnimation> createState() => _RotateAnimationState();
}
class _RotateAnimationState extends State<RotateAnimation>
with SingleTickerProviderStateMixin {
late final AnimationController animationController;
late final Animation<double> animation;
late final Duration duration;
@override
void initState() {
animationController = AnimationController(
vsync: this,
);
animation = Tween<double>(
begin: 0.0,
).animate(
CurvedAnimation(
curve: widget.curve,
parent: animationController,
),
);
widget.controller?.forward = animationController.forward;
widget.controller?.reset = animationController.reset;
super.initState();
}
@override
void dispose() {
animationController.dispose();
widget.controller?.forward = null;
super.dispose();
}
@override
Widget build(BuildContext context) {
return RotationTransition(
turns: animation,
child: widget.lottie,
);
}
}