Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added hold duration in rotate and fade animation #341

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions example/lib/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -150,13 +150,15 @@ List<AnimatedTextExample> 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,
Expand Down Expand Up @@ -370,7 +372,7 @@ List<AnimatedTextExample> animatedTextExamples({VoidCallback? onTap}) =>
fontSize: 64.0,
),
rotateOut: false,
duration: const Duration(milliseconds: 400),
animationDuration: const Duration(milliseconds: 400),
)
],
),
Expand Down
48 changes: 33 additions & 15 deletions lib/src/fade.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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<double> _fadeIn, _fadeOut;

@override
void initAnimation(AnimationController controller) {
final _fadeOutStartTime =
(fadeInDuration.inMilliseconds + holdDuration.inMilliseconds);
_fadeIn = Tween<double>(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<double>(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),
),
);
}
Expand Down Expand Up @@ -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();
}
33 changes: 25 additions & 8 deletions lib/src/rotate.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -43,7 +54,7 @@ class RotateAnimatedText extends AnimatedText {
text: text,
textAlign: textAlign,
textStyle: textStyle,
duration: duration,
duration: animationDuration * (rotateOut ? 2 : 1) + holdDuration,
);

late Animation<double> _fadeIn, _fadeOut;
Expand All @@ -53,22 +64,26 @@ 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),
end: Alignment.center.add(alignment).resolve(direction),
).animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.0, inIntervalEnd, curve: Curves.linear),
curve: Interval(0.0, inIntervalEndTime / duration.inMilliseconds,
curve: Curves.linear),
),
);

_fadeIn = Tween<double>(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),
),
);

Expand All @@ -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<double>(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),
),
);
}
Expand Down Expand Up @@ -177,7 +194,7 @@ class RotateAnimatedTextKit extends AnimatedTextKit {
_,
textAlign: textAlign,
textStyle: textStyle,
duration: duration,
animationDuration: duration,
transitionHeight: transitionHeight,
alignment: alignment,
textDirection: textDirection,
Expand Down