memeDealer/moving_hole
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Chained animation done

Browse Source
This commit is contained in:
DMK
2021-01-08 23:35:10 +03:00
parent 09df603a39
commit 16a737f6ef
1 changed files with 138 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
lib/main.dart
View File

@@ -23,7 +23,7 @@ class AppState extends State<App> with SingleTickerProviderStateMixin {
void initState() { void initState() {
super.initState(); super.initState();
_controller = AnimationController( _controller = AnimationController(
duration: Duration(seconds: 9), duration: Duration(seconds: 10),
vsync: this, vsync: this,
); );
} }
@@ -58,16 +58,15 @@ class AppState extends State<App> with SingleTickerProviderStateMixin {
fit: BoxFit.cover, fit: BoxFit.cover,
), ),
ColorFiltered( ColorFiltered(
colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.8), colorFilter:
BlendMode.srcOut), // This one will create the magic ColorFilter.mode(Colors.black.withOpacity(0.8), BlendMode.srcOut), // This one will create the magic
child: Stack( child: Stack(
fit: StackFit.expand, fit: StackFit.expand,
children: [ children: [
Container( Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.black, color: Colors.black,
backgroundBlendMode: BlendMode backgroundBlendMode: BlendMode.dstOut), // This one will handle background + difference out
.dstOut), // This one will handle background + difference out
), ),
MovingHole(controller: _controller) MovingHole(controller: _controller)
], ],
@@ -80,81 +79,150 @@ class AppState extends State<App> with SingleTickerProviderStateMixin {
} }
class MovingHole extends StatelessWidget { class MovingHole extends StatelessWidget {
// MovingHole({Key key, this.controller})
// : width = TweenSequence(
// <TweenSequenceItem<double>>[
// TweenSequenceItem<double>(
// tween: Tween<double>(begin: 100, end: 150)
// .chain(CurveTween(curve: Curves.ease)),
// weight: 33.0,
// ),
// TweenSequenceItem<double>(
// tween: Tween<double>(begin: 150, end: 200),
// weight: 33.0,
// ),
// TweenSequenceItem<double>(
// tween: Tween<double>(begin: 200, end: 300)
// .chain(CurveTween(curve: Curves.ease)),
// weight: 33.0,
// ),
// ],
// ).animate(CurvedAnimation(
// parent: controller, curve: Interval(0.0, 1, curve: Curves.linear))),
// height = TweenSequence(
// <TweenSequenceItem<double>>[
// TweenSequenceItem<double>(
// tween: Tween<double>(begin: 100, end: 150)
// .chain(CurveTween(curve: Curves.ease)),
// weight: 40.0,
// ),
// TweenSequenceItem<double>(
// tween: Tween<double>(begin: 150, end: 200),
// weight: 20.0,
// ),
// TweenSequenceItem<double>(
// tween: Tween<double>(begin: 200, end: 300)
// .chain(CurveTween(curve: Curves.ease)),
// weight: 40.0,
// ),
// ],
// ).animate(CurvedAnimation(
// parent: controller,
// curve: Interval(0.0, 1, curve: Curves.fastOutSlowIn))),
// radius = BorderRadiusTween(
// begin: BorderRadius.circular(0.0),
// end: BorderRadius.circular(100.0))
// .animate(CurvedAnimation(
// parent: controller,
// curve: Interval(
// 0.0,
// 1,
// curve: Curves.ease,
// ))),
// alignment = AlignmentTween(
// begin: Alignment.bottomCenter, end: Alignment.topCenter)
// .animate(CurvedAnimation(
// parent: controller,
// curve: Interval(0.0, 1, curve: Curves.ease))),
MovingHole({Key key, this.controller}) MovingHole({Key key, this.controller})
: width = TweenSequence( : scale1 = Tween<double>(begin: 1.0, end: 0.5).animate(
<TweenSequenceItem<double>>[ CurvedAnimation(
TweenSequenceItem<double>(
tween: Tween<double>(begin: 100, end: 150)
.chain(CurveTween(curve: Curves.ease)),
weight: 33.0,
),
TweenSequenceItem<double>(
tween: Tween<double>(begin: 150, end: 200),
weight: 33.0,
),
TweenSequenceItem<double>(
tween: Tween<double>(begin: 200, end: 300)
.chain(CurveTween(curve: Curves.ease)),
weight: 33.0,
),
],
).animate(CurvedAnimation(
parent: controller, curve: Interval(0.0, 1, curve: Curves.linear))),
height = TweenSequence(
<TweenSequenceItem<double>>[
TweenSequenceItem<double>(
tween: Tween<double>(begin: 100, end: 150)
.chain(CurveTween(curve: Curves.ease)),
weight: 40.0,
),
TweenSequenceItem<double>(
tween: Tween<double>(begin: 150, end: 200),
weight: 20.0,
),
TweenSequenceItem<double>(
tween: Tween<double>(begin: 200, end: 300)
.chain(CurveTween(curve: Curves.ease)),
weight: 40.0,
),
],
).animate(CurvedAnimation(
parent: controller, parent: controller,
curve: Interval(0.0, 1, curve: Curves.fastOutSlowIn))), curve: const Interval(0.05, 0.075, curve: Curves.easeOut),
radius = BorderRadiusTween( ),
begin: BorderRadius.circular(0.0), ),
end: BorderRadius.circular(100.0)) scale2 = Tween<double>(begin: 0.5, end: 1.2).animate(
.animate(CurvedAnimation( CurvedAnimation(
parent: controller, parent: controller,
curve: Interval( curve: const Interval(
0.0, 0.5,
1, 0.55,
curve: Curves.ease, curve: Curves.ease,
))), ),
alignment = AlignmentTween( ),
begin: Alignment.bottomCenter, end: Alignment.topCenter) ),
.animate(CurvedAnimation( move1 = Tween<Offset>(begin: Offset(0, 20), end: Offset(-20, 100)).animate(CurvedAnimation(
parent: controller, parent: controller,
curve: Interval(0.0, 1, curve: Curves.ease))), curve: const Interval(
0.0,
0.1,
curve: Curves.ease,
),
)),
move2 = Tween<Offset>(begin: Offset(50, 100), end: Offset(30, 20)).animate(CurvedAnimation(
parent: controller,
curve: const Interval(
0.9,
1.0,
curve: Curves.ease,
),
)),
super(key: key); super(key: key);
Animation<double> controller; final AnimationController controller;
Animation<double> width; final Animation<double> scale1;
Animation<double> height; final Animation<double> scale2;
Animation<BorderRadius> radius; final Animation<Offset> move1;
Animation<Alignment> alignment; final Animation<Offset> move2;
final Color color = Colors.black;
// final Size size;
@override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return AnimatedBuilder( return AnimatedBuilder(
animation: controller, animation: controller,
builder: (BuildContext context, Widget child) { builder: (BuildContext context, Widget child) {
return Container( return Container(
alignment: alignment.value, child: Transform(
child: Container( alignment: Alignment.center,
width: width.value, transform: Matrix4.identity()
height: height.value, ..scale(scale1.value)
decoration: BoxDecoration( ..scale(scale2.value)
color: Colors.red, borderRadius: radius.value), ..translate(
)); move1.value.dx,
move1.value.dy,
)
..translate(
move2.value.dx,
move2.value.dy,
),
// child: Opacity(
// opacity: opacityAnimation.value,
child: Container(
width: 60.0,
height: 60.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: color,
border: Border.all(color: color, style: BorderStyle.solid, width: 4.0 - (2 * controller.value))),
)),
// ),
);
}); });
} }
// Widget build(BuildContext context) {
// return AnimatedBuilder(
// animation: controller,
// builder: (BuildContext context, Widget child) {
// return Container(
// // alignment: alignment.value,
// child: Container(
// width: size.value.width,
// height: size.value.height,
// decoration: BoxDecoration(
// color: Colors.red, borderRadius: BorderRadius.all(Radius.circular(20))),
// ));
// });
// }
} }