Last active
February 24, 2022 10:34
-
-
Save votruk/ce48a73a8cd3916800c0f476e5368943 to your computer and use it in GitHub Desktop.
memogenerator_animation.dart
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'package:flutter/material.dart'; | |
| void main() { | |
| runApp(MyApp()); | |
| } | |
| class MyApp extends StatelessWidget { | |
| @override | |
| Widget build(BuildContext context) { | |
| return const MaterialApp( | |
| home: EasterEggPage(), | |
| ); | |
| } | |
| } | |
| class EasterEggPage extends StatelessWidget { | |
| const EasterEggPage({Key? key}) : super(key: key); | |
| @override | |
| Widget build(BuildContext context) { | |
| return const Scaffold( | |
| body: RocketAnimationBody(), | |
| ); | |
| } | |
| } | |
| class RocketAnimationBody extends StatefulWidget { | |
| const RocketAnimationBody({Key? key}) : super(key: key); | |
| @override | |
| _RocketAnimationBodyState createState() => _RocketAnimationBodyState(); | |
| } | |
| class _RocketAnimationBodyState extends State<RocketAnimationBody> | |
| with SingleTickerProviderStateMixin { | |
| static const animationDurationSeconds = 10; | |
| late AnimationController controller; | |
| late Animation<Alignment> rocketPositionAnimation; | |
| late Animation<double> rocketScaleAnimation; | |
| late Animation<double> fireRotationAnimation; | |
| late Animation<double> glowScaleAnimation; | |
| bool started = false; | |
| @override | |
| void initState() { | |
| super.initState(); | |
| controller = AnimationController( | |
| vsync: this, | |
| duration: const Duration(seconds: animationDurationSeconds), | |
| ); | |
| controller.addStatusListener((status) { | |
| if (status == AnimationStatus.completed) { | |
| controller.reset(); | |
| setState(() => started = false); | |
| } | |
| }); | |
| rocketPositionAnimation = AlignmentTween( | |
| begin: const Alignment(0, 0.9), | |
| end: const Alignment(0, -1), | |
| ).animate( | |
| CurvedAnimation( | |
| parent: controller, | |
| curve: const Interval(0.1, 0.8, curve: Curves.easeInCubic), | |
| ), | |
| ); | |
| rocketScaleAnimation = Tween<double>( | |
| begin: 1.0, | |
| end: 0.0, | |
| ).animate( | |
| CurvedAnimation( | |
| parent: controller, | |
| curve: const Interval(0.3, 0.8, curve: Curves.easeInCubic), | |
| ), | |
| ); | |
| fireRotationAnimation = TweenSequence( | |
| [ | |
| TweenSequenceItem( | |
| tween: Tween<double>(begin: 0.005, end: -0.005), | |
| weight: 50, | |
| ), | |
| TweenSequenceItem( | |
| tween: Tween<double>(begin: -0.005, end: 0.005), | |
| weight: 50, | |
| ), | |
| ], | |
| ).animate(CurvedAnimation( | |
| parent: controller, | |
| curve: const Interval(0.0, 0.8, curve: SawTooth(animationDurationSeconds * 5)), | |
| )); | |
| glowScaleAnimation = TweenSequence( | |
| [ | |
| TweenSequenceItem( | |
| tween: Tween<double>(begin: 0, end: 1), | |
| weight: 50, | |
| ), | |
| TweenSequenceItem( | |
| tween: Tween<double>(begin: 1, end: 0), | |
| weight: 50, | |
| ), | |
| ], | |
| ).animate( | |
| CurvedAnimation( | |
| parent: controller, | |
| curve: const Interval(0.8, 0.9), | |
| ), | |
| ); | |
| } | |
| void animate() { | |
| if (controller.isAnimating) { | |
| return; | |
| } | |
| setState(() => started = true); | |
| controller.forward(); | |
| } | |
| @override | |
| Widget build(BuildContext context) { | |
| return LayoutBuilder( | |
| builder: (BuildContext context, BoxConstraints constraints) { | |
| return DecoratedBox( | |
| decoration: const BoxDecoration( | |
| image: DecorationImage( | |
| image: NetworkImage("https://i.ibb.co/VwpBhcy/stars-pattern.png"), | |
| repeat: ImageRepeat.repeat, | |
| ), | |
| ), | |
| child: Stack( | |
| children: [ | |
| Align( | |
| alignment: Alignment.bottomCenter, | |
| child: Container( | |
| width: double.infinity, | |
| height: 100, | |
| decoration: BoxDecoration( | |
| borderRadius: BorderRadius.vertical( | |
| top: Radius.elliptical(constraints.maxWidth, 200)), | |
| color: Colors.green[700]), | |
| ), | |
| ), | |
| if (started) | |
| AlignTransition( | |
| alignment: rocketPositionAnimation, | |
| child: RotationTransition( | |
| turns: fireRotationAnimation, | |
| child: ScaleTransition( | |
| scale: rocketScaleAnimation, | |
| child: Image.network( | |
| "https://i.ibb.co/2W5cLP6/rocket-fire.png", | |
| height: 200, | |
| ), | |
| ), | |
| ), | |
| ), | |
| GestureDetector( | |
| onTap: () => animate(), | |
| child: AlignTransition( | |
| alignment: rocketPositionAnimation, | |
| child: ScaleTransition( | |
| scale: rocketScaleAnimation, | |
| child: Image.network( | |
| "https://i.ibb.co/WKLVhwn/rocket-without-fire.png", | |
| height: 200, | |
| ), | |
| ), | |
| ), | |
| ), | |
| Positioned( | |
| top: 70, | |
| left: constraints.maxWidth / 2 - 40, | |
| child: ScaleTransition( | |
| scale: glowScaleAnimation, | |
| child: Image.network( | |
| "https://i.ibb.co/smnzVZB/star-glow.png", | |
| height: 50, | |
| ), | |
| ), | |
| ), | |
| ], | |
| ), | |
| ); | |
| }, | |
| ); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment