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() {
super.initState();
_controller = AnimationController(
duration: Duration(seconds: 9),
duration: Duration(seconds: 10),
vsync: this,
);
}
@@ -58,16 +58,15 @@ class AppState extends State<App> with SingleTickerProviderStateMixin {
fit: BoxFit.cover,
),
ColorFiltered(
colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.8),
BlendMode.srcOut), // This one will create the magic
colorFilter:
ColorFilter.mode(Colors.black.withOpacity(0.8), BlendMode.srcOut), // This one will create the magic
child: Stack(
fit: StackFit.expand,
children: [
Container(
decoration: BoxDecoration(
color: Colors.black,
backgroundBlendMode: BlendMode
.dstOut), // This one will handle background + difference out
backgroundBlendMode: BlendMode.dstOut), // This one will handle background + difference out
),
MovingHole(controller: _controller)
],
@@ -80,81 +79,150 @@ class AppState extends State<App> with SingleTickerProviderStateMixin {
}
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})
: 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(
: scale1 = Tween<double>(begin: 1.0, end: 0.5).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))),
curve: const Interval(0.05, 0.075, curve: Curves.easeOut),
),
),
scale2 = Tween<double>(begin: 0.5, end: 1.2).animate(
CurvedAnimation(
parent: controller,
curve: const Interval(
0.5,
0.55,
curve: Curves.ease,
),
),
),
move1 = Tween<Offset>(begin: Offset(0, 20), end: Offset(-20, 100)).animate(CurvedAnimation(
parent: controller,
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);
Animation<double> controller;
Animation<double> width;
Animation<double> height;
Animation<BorderRadius> radius;
Animation<Alignment> alignment;
final AnimationController controller;
final Animation<double> scale1;
final Animation<double> scale2;
final Animation<Offset> move1;
final Animation<Offset> move2;
final Color color = Colors.black;
// final Size size;
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: controller,
builder: (BuildContext context, Widget child) {
return Container(
alignment: alignment.value,
child: Container(
width: width.value,
height: height.value,
decoration: BoxDecoration(
color: Colors.red, borderRadius: radius.value),
));
child: Transform(
alignment: Alignment.center,
transform: Matrix4.identity()
..scale(scale1.value)
..scale(scale2.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))),
// ));
// });
// }
}