Skip to content

Add Slide Direction Enum to Control Slide-In and Slide-Out Direction on RotateAnimatedText #324

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.

Sign up for GitHub

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

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Add Slide Direction Enum to Control Slide-In and Slide-Out Direction on RotateAnimatedText #324

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
94ed6d1
feat: add SlideDirection enum and logic for slide-in-out tween
fauziridwan1709 Sep 10, 2023
d01e256
feat: update default value for slideDirection
fauziridwan1709 Sep 10, 2023
a0da40a
feat: make both slideInTween and slideOutTween as late final variables
fauziridwan1709 Sep 10, 2023
5f7afbe
feat: remove unrelated comments
fauziridwan1709 Sep 10, 2023
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
81 changes: 73 additions & 8 deletions lib/src/rotate.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
import 'package:flutter/material.dart';

import 'animated_text.dart';

/// Enum to control the slide direction.
enum SlideDirection {
leftToRight,
rightToLeft,
topToBottom,
bottomToTop,
}

/// Animated Text that rotates a [Text] in and then out.
///
/// ![Rotate example](https://raw.githubusercontent.com/aagarwal1012/Animated-Text-Kit/master/display/rotate.gif)
Expand Down Expand Up @@ -30,6 +39,11 @@ class RotateAnimatedText extends AnimatedText {
/// By default, it is set to true.
final bool rotateOut;

/// Control slide animation direction.
///
/// By default. it is set to [SlideDirection.topToBottom]
final SlideDirection slideDirection;

RotateAnimatedText(
String text, {
TextAlign textAlign = TextAlign.start,
Expand All @@ -39,6 +53,7 @@ class RotateAnimatedText extends AnimatedText {
this.alignment = Alignment.center,
this.textDirection = TextDirection.ltr,
this.rotateOut = true,
this.slideDirection = SlideDirection.topToBottom,
}) : super(
text: text,
textAlign: textAlign,
Expand All @@ -55,10 +70,35 @@ class RotateAnimatedText extends AnimatedText {

final inIntervalEnd = rotateOut ? 0.4 : 1.0;

_slideIn = AlignmentTween(
begin: Alignment.topCenter.add(alignment).resolve(direction),
end: Alignment.center.add(alignment).resolve(direction),
).animate(
late final AlignmentTween slideInTween;
switch (slideDirection) {
case SlideDirection.leftToRight:
slideInTween = AlignmentTween(
begin: Alignment.centerLeft.add(alignment).resolve(direction),
end: Alignment.center.add(alignment).resolve(direction),
);
break;
case SlideDirection.rightToLeft:
slideInTween = AlignmentTween(
begin: Alignment.centerRight.add(alignment).resolve(direction),
end: Alignment.center.add(alignment).resolve(direction),
);
break;
case SlideDirection.topToBottom:
slideInTween = AlignmentTween(
begin: Alignment.topCenter.add(alignment).resolve(direction),
end: Alignment.center.add(alignment).resolve(direction),
);
break;
case SlideDirection.bottomToTop:
slideInTween = AlignmentTween(
begin: Alignment.bottomCenter.add(alignment).resolve(direction),
end: Alignment.center.add(alignment).resolve(direction),
);
break;
}

_slideIn = slideInTween.animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.0, inIntervalEnd, curve: Curves.linear),
Expand All @@ -73,10 +113,35 @@ class RotateAnimatedText extends AnimatedText {
);

if (rotateOut) {
_slideOut = AlignmentTween(
begin: Alignment.center.add(alignment).resolve(direction),
end: Alignment.bottomCenter.add(alignment).resolve(direction),
).animate(
late final AlignmentTween slideOutTween;
switch (slideDirection) {
case SlideDirection.leftToRight:
slideOutTween = AlignmentTween(
begin: Alignment.center.add(alignment).resolve(direction),
end: Alignment.centerRight.add(alignment).resolve(direction),
);
break;
case SlideDirection.rightToLeft:
slideOutTween = AlignmentTween(
begin: Alignment.center.add(alignment).resolve(direction),
end: Alignment.centerLeft.add(alignment).resolve(direction),
);
break;
case SlideDirection.topToBottom:
slideOutTween = AlignmentTween(
begin: Alignment.center.add(alignment).resolve(direction),
end: Alignment.bottomCenter.add(alignment).resolve(direction),
);
break;
case SlideDirection.bottomToTop:
slideOutTween = AlignmentTween(
begin: Alignment.center.add(alignment).resolve(direction),
end: Alignment.topCenter.add(alignment).resolve(direction),
);
break;
}

_slideOut = slideOutTween.animate(
CurvedAnimation(
parent: controller,
curve: const Interval(0.7, 1.0, curve: Curves.linear),
Expand Down