Skip to content

Instantly share code, notes, and snippets.

@PreyeaRegmi
Created June 15, 2021 09:14
Show Gist options
  • Save PreyeaRegmi/ef7dbb05625d773f60eaf7fb382f87a7 to your computer and use it in GitHub Desktop.
Save PreyeaRegmi/ef7dbb05625d773f60eaf7fb382f87a7 to your computer and use it in GitHub Desktop.
Reveal Animation that is played when dragging exceeds our defined threshold.
//Update scene state to "reveal" and start corresponding animation
//This method is called when drag excced our defined threshold
void _playRevealAnimation() {
setState(() {
currentScreenState = CURRENT_SCREEN_STATE.REVEALING_ANIMATING_STATE;
_revealAnimationController.forward();
_amoebaAnimationController.forward();
});
}
//Animation controller for expanding the curve animation
_revealAnimationController =
AnimationController(duration: Duration(milliseconds: 500), vsync: this)
..addStatusListener((status) {
if (status == AnimationStatus.completed)
setState(() {
currentScreenState = CURRENT_SCREEN_STATE.POST_REVEAL_STATE;
_postRevealAnimationController.forward();
});
});
//Animation to translate the brand label
_titleBaseLinePosTranslateAnim = RelativeRectTween(
begin: RelativeRect.fromLTRB(
0,
widget.height -
_initialCurveHeight -
widget.height * .2 -
arcHeight,
0,
_initialCurveHeight),
end: RelativeRect.fromLTRB(
0,
widget.height - _finalCurveHeight - 20 - arcHeight,
0,
_finalCurveHeight))
.animate(CurvedAnimation(
parent: _revealAnimationController, curve: Curves.easeOutBack));
//Animation to translate side icons
_sideIconsTranslateAnim = RelativeRectTween(
begin: RelativeRect.fromLTRB(
0,
widget.height -
_initialCurveHeight -
widget.height * .25 -
arcHeight,
0,
_initialCurveHeight),
end: RelativeRect.fromLTRB(
0,
widget.height -
_finalCurveHeight -
widget.height * .25 -
arcHeight,
0,
_finalCurveHeight))
.animate(CurvedAnimation(
parent: _revealAnimationController, curve: Curves.easeInOutBack));
//Tween for animating height of the curve during reveal process
_swipeArcAnimation =
Tween<double>(begin: _initialCurveHeight, end: _finalCurveHeight)
.animate(CurvedAnimation(
parent: _revealAnimationController, curve: Curves.easeInCubic));
//Animation for the mid control point of cubic bezier curve to show acceleration effect in response to user drag.
_swipeArchHeightAnimation = TweenSequence<double>(
<TweenSequenceItem<double>>[
TweenSequenceItem<double>(
tween: Tween<double>(begin: 0, end: 200),
weight: 50.0,
),
TweenSequenceItem<double>(
tween: Tween<double>(begin: 200, end: 0),
weight: 50.0,
),
],
).animate(CurvedAnimation(
parent: _revealAnimationController, curve: Curves.easeInCubic));
//Animation Controller for amoeba background
_amoebaAnimationController =
AnimationController(duration: Duration(milliseconds: 350), vsync: this);
_amoebaOffsetAnimation =
Tween<Offset>(begin: Offset(0, 0), end: Offset(-20, -70)).animate(
CurvedAnimation(
parent: _amoebaAnimationController,
curve: Curves.easeInOutBack));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment