From 9bb3007536ffba01fe2f2f3404c5ae1480388ede Mon Sep 17 00:00:00 2001 From: unknown Date: Wed, 5 Jun 2024 01:01:48 +0530 Subject: [PATCH] Added hold duration in rotate and fade animation --- example/lib/main.dart | 6 ++++-- lib/src/fade.dart | 48 +++++++++++++++++++++++++++++-------------- lib/src/rotate.dart | 33 +++++++++++++++++++++-------- 3 files changed, 62 insertions(+), 25 deletions(-) diff --git a/example/lib/main.dart b/example/lib/main.dart index c5c618b..bca2508 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -150,13 +150,15 @@ List animatedTextExamples({VoidCallback? onTap}) => ), child: AnimatedTextKit( animatedTexts: [ - RotateAnimatedText('AWESOME'), + RotateAnimatedText('AWESOME', + holdDuration: Duration(seconds: 1)), RotateAnimatedText('OPTIMISTIC'), RotateAnimatedText( 'DIFFERENT', textStyle: const TextStyle( decoration: TextDecoration.underline, ), + holdDuration: Duration(seconds: 5), ), ], onTap: onTap, @@ -370,7 +372,7 @@ List animatedTextExamples({VoidCallback? onTap}) => fontSize: 64.0, ), rotateOut: false, - duration: const Duration(milliseconds: 400), + animationDuration: const Duration(milliseconds: 400), ) ], ), diff --git a/lib/src/fade.dart b/lib/src/fade.dart index a6cdce8..2c88579 100644 --- a/lib/src/fade.dart +++ b/lib/src/fade.dart @@ -5,42 +5,60 @@ import 'animated_text.dart'; /// /// ![Fade example](https://raw.githubusercontent.com/aagarwal1012/Animated-Text-Kit/master/display/fade.gif) class FadeAnimatedText extends AnimatedText { - /// Marks ending of fade-in interval, default value = 0.5 - final double fadeInEnd; + /// The Duration of fade-in animation, default value = const Duration(milliseconds: 1000) + /// Total duration = fadeInDuration + holdDuration + fadeOutDuration + final Duration fadeInDuration; - /// Marks the beginning of fade-out interval, default value = 0.8 - final double fadeOutBegin; + /// The Duration of text hold between fadein and fadeout, default value = const Duration(milliseconds: 2000) + /// Total duration = fadeInDuration + holdDuration + fadeOutDuration + final Duration holdDuration; + + /// The Duration of fade-out animation, default value = const Duration(milliseconds: 1000) + /// Total duration = fadeInDuration + holdDuration + fadeOutDuration + final Duration fadeOutDuration; + + // /// Marks the beginning of fade-out interval, default value = 0.8 + // final Duration fadeOutBegin; FadeAnimatedText( String text, { TextAlign textAlign = TextAlign.start, TextStyle? textStyle, - Duration duration = const Duration(milliseconds: 2000), - this.fadeInEnd = 0.5, - this.fadeOutBegin = 0.8, - }) : assert(fadeInEnd < fadeOutBegin, - 'The "fadeInEnd" argument must be less than "fadeOutBegin"'), + this.holdDuration = const Duration(milliseconds: 2000), + this.fadeInDuration = const Duration(milliseconds: 1000), + this.fadeOutDuration = const Duration(milliseconds: 1000), + }) : + // assert(fadeInEnd < fadeOutBegin, + // 'The "fadeInEnd" argument must be less than "fadeOutBegin"'), super( text: text, textAlign: textAlign, textStyle: textStyle, - duration: duration, + duration: fadeInDuration + holdDuration + fadeOutDuration, ); late Animation _fadeIn, _fadeOut; @override void initAnimation(AnimationController controller) { + final _fadeOutStartTime = + (fadeInDuration.inMilliseconds + holdDuration.inMilliseconds); _fadeIn = Tween(begin: 0.0, end: 1.0).animate( CurvedAnimation( parent: controller, - curve: Interval(0.0, fadeInEnd, curve: Curves.linear), + curve: Interval( + 0.0, fadeInDuration.inMilliseconds / duration.inMilliseconds, + curve: Curves.linear), ), ); _fadeOut = Tween(begin: 1.0, end: 0.0).animate( CurvedAnimation( parent: controller, - curve: Interval(fadeOutBegin, 1.0, curve: Curves.linear), + curve: Interval( + _fadeOutStartTime / duration.inMilliseconds, + (_fadeOutStartTime + fadeOutDuration.inMilliseconds) / + duration.inMilliseconds.toDouble(), + curve: Curves.linear), ), ); } @@ -109,9 +127,9 @@ class FadeAnimatedTextKit extends AnimatedTextKit { _, textAlign: textAlign, textStyle: textStyle, - duration: duration, - fadeInEnd: fadeInEnd, - fadeOutBegin: fadeOutBegin, + holdDuration: duration, + // fadeInEnd: fadeInEnd, + // fadeOutBegin: fadeOutBegin, )) .toList(); } diff --git a/lib/src/rotate.dart b/lib/src/rotate.dart index c573c80..c63a592 100644 --- a/lib/src/rotate.dart +++ b/lib/src/rotate.dart @@ -30,11 +30,22 @@ class RotateAnimatedText extends AnimatedText { /// By default, it is set to true. final bool rotateOut; + /// The Duration of text hold, default value = const Duration(milliseconds: 2000) + /// Total Duration = animationDuration * (rotateOut ? 2 : 1) + holdDuration + final Duration holdDuration; + + /// The Duration text will take to animate in and out. + /// By default it is set to const Duration(milliseconds: 1000) + /// Out Duration will only be applied if [rotateOut] is set to `true` + /// Total Duration = animationDuration * (rotateOut ? 2 : 1) + holdDuration + final Duration animationDuration; + RotateAnimatedText( String text, { TextAlign textAlign = TextAlign.start, TextStyle? textStyle, - Duration duration = const Duration(milliseconds: 2000), + this.animationDuration = const Duration(milliseconds: 1000), + this.holdDuration = const Duration(microseconds: 2000), this.transitionHeight, this.alignment = Alignment.center, this.textDirection = TextDirection.ltr, @@ -43,7 +54,7 @@ class RotateAnimatedText extends AnimatedText { text: text, textAlign: textAlign, textStyle: textStyle, - duration: duration, + duration: animationDuration * (rotateOut ? 2 : 1) + holdDuration, ); late Animation _fadeIn, _fadeOut; @@ -53,7 +64,9 @@ class RotateAnimatedText extends AnimatedText { void initAnimation(AnimationController controller) { final direction = textDirection; - final inIntervalEnd = rotateOut ? 0.4 : 1.0; + final inIntervalEndTime = animationDuration.inMilliseconds; + final outIntervalStartTime = + inIntervalEndTime + holdDuration.inMilliseconds; _slideIn = AlignmentTween( begin: Alignment.topCenter.add(alignment).resolve(direction), @@ -61,14 +74,16 @@ class RotateAnimatedText extends AnimatedText { ).animate( CurvedAnimation( parent: controller, - curve: Interval(0.0, inIntervalEnd, curve: Curves.linear), + curve: Interval(0.0, inIntervalEndTime / duration.inMilliseconds, + curve: Curves.linear), ), ); _fadeIn = Tween(begin: 0.0, end: 1.0).animate( CurvedAnimation( parent: controller, - curve: Interval(0.0, inIntervalEnd, curve: Curves.easeOut), + curve: Interval(0.0, inIntervalEndTime / duration.inMilliseconds, + curve: Curves.easeOut), ), ); @@ -79,14 +94,16 @@ class RotateAnimatedText extends AnimatedText { ).animate( CurvedAnimation( parent: controller, - curve: const Interval(0.7, 1.0, curve: Curves.linear), + curve: Interval(outIntervalStartTime / duration.inMilliseconds, 1.0, + curve: Curves.linear), ), ); _fadeOut = Tween(begin: 1.0, end: 0.0).animate( CurvedAnimation( parent: controller, - curve: const Interval(0.7, 1.0, curve: Curves.easeIn), + curve: Interval(outIntervalStartTime / duration.inMilliseconds, 1.0, + curve: Curves.easeIn), ), ); } @@ -177,7 +194,7 @@ class RotateAnimatedTextKit extends AnimatedTextKit { _, textAlign: textAlign, textStyle: textStyle, - duration: duration, + animationDuration: duration, transitionHeight: transitionHeight, alignment: alignment, textDirection: textDirection,