143 lines
4.5 KiB
Dart
143 lines
4.5 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter/scheduler.dart';
|
|
import 'dart:async';
|
|
|
|
void main() => runApp(MyApp());
|
|
|
|
class MyApp extends StatelessWidget {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return MaterialApp(home: Scaffold(body: App()));
|
|
}
|
|
}
|
|
|
|
class App extends StatefulWidget {
|
|
@override
|
|
AppState createState() => AppState();
|
|
}
|
|
|
|
class AppState extends State<App> with TickerProviderStateMixin {
|
|
AnimationController _controller;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_controller = AnimationController(
|
|
duration: Duration(seconds: 1),
|
|
vsync: this,
|
|
);
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_controller?.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
Future _startAnim() async {
|
|
try {
|
|
await _controller.forward().orCancel;
|
|
await _controller.reverse().orCancel;
|
|
} on TickerCanceled {
|
|
print('welp we fucked');
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
timeDilation = 10.0;
|
|
return MaterialApp(
|
|
home: Scaffold(
|
|
appBar: AppBar(),
|
|
body: GestureDetector(
|
|
onTap: () {
|
|
_startAnim();
|
|
},
|
|
child: Center(
|
|
child: Container(
|
|
width: 350,
|
|
height: 350,
|
|
decoration: BoxDecoration(
|
|
color: Colors.red.withOpacity(0.1),
|
|
border: Border.all(
|
|
color: Colors.blueGrey.withOpacity(0.8))),
|
|
child: AnimatedBox(
|
|
controller: _controller,
|
|
))))));
|
|
}
|
|
}
|
|
|
|
class AnimatedBox extends StatelessWidget {
|
|
AnimatedBox({Key key, this.controller})
|
|
: opacity = Tween<double>(begin: 0.0, end: 1.0).animate(CurvedAnimation(
|
|
parent: controller,
|
|
curve: Interval(0.0, 0.1, curve: Curves.fastOutSlowIn))),
|
|
rotate = Tween<double>(begin: 0.0, end: 3.141 * 4).animate(
|
|
CurvedAnimation(
|
|
parent: controller,
|
|
curve: Interval(0.1, 0.3, curve: Curves.ease))),
|
|
movement = EdgeInsetsTween(
|
|
begin: EdgeInsets.only(bottom: 10, left: 0.0),
|
|
end: EdgeInsets.only(bottom: 100.0, left: 75.0))
|
|
.animate(CurvedAnimation(
|
|
parent: controller,
|
|
curve: Interval(0.3, 0.4, curve: Curves.fastOutSlowIn))),
|
|
width = Tween<double>(begin: 50.0, end: 200.0).animate(CurvedAnimation(
|
|
parent: controller,
|
|
curve: Interval(0.4, 0.6, curve: Curves.fastOutSlowIn))),
|
|
height = Tween<double>(begin: 50.0, end: 200.0).animate(CurvedAnimation(
|
|
parent: controller,
|
|
curve: Interval(0.4, 0.6, curve: Curves.fastOutSlowIn))),
|
|
radius = BorderRadiusTween(
|
|
begin: BorderRadius.circular(0.0),
|
|
end: BorderRadius.circular(100.0))
|
|
.animate(CurvedAnimation(
|
|
parent: controller,
|
|
curve: Interval(
|
|
0.6,
|
|
0.75,
|
|
curve: Curves.ease,
|
|
))),
|
|
color = ColorTween(begin: Colors.red[200], end: Colors.deepPurple[900])
|
|
.animate(CurvedAnimation(
|
|
parent: controller,
|
|
curve: Interval(0.0, 0.75, curve: Curves.linear))),
|
|
super(key: key);
|
|
|
|
final Animation<double> controller;
|
|
final Animation<double> opacity;
|
|
final Animation<double> width;
|
|
final Animation<double> height;
|
|
final Animation<EdgeInsets> movement;
|
|
final Animation<BorderRadius> radius;
|
|
final Animation<Color> color;
|
|
final Animation<double> rotate;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return AnimatedBuilder(
|
|
animation: controller,
|
|
builder: (BuildContext context, Widget child) {
|
|
return Container(
|
|
padding: movement.value,
|
|
transform: Matrix4.identity()..rotateZ(rotate.value),
|
|
alignment: Alignment.center,
|
|
child: Opacity(
|
|
opacity: opacity.value,
|
|
child: Container(
|
|
width: width.value,
|
|
height: height.value,
|
|
decoration: BoxDecoration(
|
|
color: color.value,
|
|
border: Border.all(
|
|
color: Colors.cyan,
|
|
width: 2.0,
|
|
),
|
|
borderRadius: radius.value,
|
|
),
|
|
)),
|
|
);
|
|
});
|
|
}
|
|
}
|