try two

lib/animprovider.dart

@@ -0,0 +1,59 @@
+import 'package:flutter/material.dart';
+
+class AnimProv extends ChangeNotifier {
+  double _width = 150;
+  double get width => _width;
+  set width(double value) {
+    _width = value;
+    notifyListeners();
+  }
+
+  double _height = 100;
+  double get height => _height;
+  set height(double value) {
+    _height = value;
+    notifyListeners();
+  }
+
+  double _alignX = 0;
+  double get alignY => _alignY;
+  set alignX(double value) {
+    _alignX = value;
+    notifyListeners();
+  }
+
+  double _alignY = 0;
+  double get alignX => _alignX;
+  set alignY(double value) {
+    _alignY = value;
+    notifyListeners();
+  }
+
+  String _picAsset = "";
+  String get picAsset => _picAsset;
+  set picAsset(String value) {
+    _picAsset = value;
+    notifyListeners();
+  }
+
+  String _foneScreen;
+  String get foneScreen => _foneScreen;
+  set foneScreen(String value) {
+    _foneScreen = value;
+    notifyListeners();
+  }
+
+  String _message = "";
+  String get message => _message;
+  set message(String value) {
+    _message = value;
+    notifyListeners();
+  }
+
+  double _textAlignment = 0;
+  double get textAlignment => _textAlignment;
+  set textAlignment(double value) {
+    _textAlignment = value;
+    notifyListeners();
+  }
+}

lib/main copy.dart

@@ -0,0 +1,188 @@
+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 SingleTickerProviderStateMixin {
+  AnimationController _controller;
+  String param;
+  double tm;
+
+  @override
+  void initState() {
+    super.initState();
+    param = "beginning";
+    _controller = AnimationController(
+      duration: Duration(seconds: 3),
+      vsync: this,
+    )..addListener(() => contrVal());
+  }
+
+  double timeM(double scene) {
+    int time = 10;
+    return scene / time;
+  }
+
+  @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');
+    }
+  }
+
+  contrVal() {
+    setState(() {
+      tm = _controller.value;
+      if (_controller.value >= 0.2) param = 'two seconds';
+      if (_controller.value >= 0.5) param = "five seconds";
+      if (_controller.value >= 1) param = "ten seconds";
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      child: Stack(
+        fit: StackFit.expand,
+        children: [
+          // Image.asset(
+          //   'assets/scrns/scrn1.png',
+          //   fit: BoxFit.cover,
+          // ),
+          ColorFiltered(
+            colorFilter: ColorFilter.mode(Colors.black.withOpacity(0.8),
+                BlendMode.srcOut), // This one will create the magic
+            child: GestureDetector(
+              onTap: () {
+                _startAnim();
+              },
+              child: Stack(
+                fit: StackFit.expand,
+                children: [
+                  Container(
+                    decoration: BoxDecoration(
+                        color: Colors.black,
+                        backgroundBlendMode: BlendMode
+                            .dstOut), // This one will handle background + difference out
+                  ),
+                  // Align(
+                  //   alignment: Alignment.topCenter,
+                  //   child: Container(
+                  //     margin: const EdgeInsets.only(top: 30),
+                  //     height: 200,
+                  //     width: 200,
+                  //     decoration: BoxDecoration(
+                  //       color: Colors.red,
+                  //       // borderRadius: BorderRadius.circular(100),
+                  //     ),
+                  //   ),
+                  // ),
+                  GestureDetector(
+                    onTap: () {
+                      _startAnim();
+                    },
+                    child: MovHoleScrn1(
+                      controller: _controller,
+                    ),
+                    // Center(
+                    //   child: Text(
+                    //     'Hello World',
+                    //     style: TextStyle(fontSize: 65, fontWeight: FontWeight.w600),
+                    //   ),
+                  )
+                ],
+              ),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}
+
+class MovHoleScrn1 extends StatelessWidget {
+  MovHoleScrn1({Key key, this.controller})
+      : width1 = Tween<double>(begin: 10.0, end: 300.0).animate(CurvedAnimation(
+            parent: controller,
+            curve: Interval(0.1, 0.5, curve: Curves.fastOutSlowIn))),
+        height1 = Tween<double>(begin: 10.0, end: 200.0).animate(
+            CurvedAnimation(
+                parent: controller,
+                curve: Interval(0.1, 0.5, curve: Curves.fastOutSlowIn))),
+        movement1 = EdgeInsetsTween(
+                begin: EdgeInsets.only(bottom: 1, left: 1),
+                end: EdgeInsets.only(bottom: 300.0, left: 1.0))
+            .animate(CurvedAnimation(
+                parent: controller,
+                curve: Interval(0.1, 0.5, curve: Curves.fastOutSlowIn))),
+        width2 = Tween<double>(begin: 300.0, end: 300.0).animate(
+            CurvedAnimation(
+                parent: controller,
+                curve: Interval(0.5, 1, curve: Curves.fastOutSlowIn))),
+        height2 = Tween<double>(begin: 200.0, end: 200.0).animate(
+            CurvedAnimation(
+                parent: controller,
+                curve: Interval(0.5, 1, curve: Curves.fastOutSlowIn))),
+        movement2 = EdgeInsetsTween(
+                begin: EdgeInsets.only(bottom: 1, left: 1),
+                end: EdgeInsets.only(bottom: 100.0, left: 1.0))
+            .animate(CurvedAnimation(
+                parent: controller,
+                curve: Interval(0.5, 1, curve: Curves.fastOutSlowIn))),
+        super(key: key);
+
+  final Animation<double> width1;
+  final Animation<double> height1;
+  final Animation<EdgeInsets> movement1;
+  final Animation<double> width2;
+  final Animation<double> height2;
+  final Animation<EdgeInsets> movement2;
+
+  final Animation<double> controller;
+  final Color color = Colors.black;
+
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+        animation: controller,
+        builder: (BuildContext context, Widget child) {
+          return movement1.isCompleted
+              ? Container(
+                  padding: movement1.value,
+                  alignment: Alignment.center,
+                  child: Container(
+                    width: width1.value,
+                    height: height1.value,
+                    color: color,
+                  ))
+              : Container(
+                  padding: movement2.value,
+                  alignment: Alignment.center,
+                  child: Container(
+                    width: width2.value,
+                    height: height2.value,
+                    color: color,
+                  ));
+        });
+  }
+}

lib/mainsmth.dart

@@ -0,0 +1,195 @@
+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 SingleTickerProviderStateMixin {
+  AnimationController _controller;
+  String param;
+  double tm;
+
+  @override
+  void initState() {
+    super.initState();
+    param = "beginning";
+    _controller = AnimationController(
+      duration: Duration(seconds: 3),
+      vsync: this,
+    )..addListener(() => contrVal());
+  }
+
+  double timeM(double scene) {
+    int time = 10;
+    return scene / time;
+  }
+
+  @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');
+    }
+  }
+
+  contrVal() {
+    setState(() {
+      tm = _controller.value;
+      if (_controller.value >= 0.2) param = 'two seconds';
+      if (_controller.value >= 0.5) param = "five seconds";
+      if (_controller.value >= 1) param = "ten seconds";
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+        child: GestureDetector(
+      onTap: () {
+        _startAnim();
+      },
+      child: Stack(
+        fit: StackFit.expand,
+        children: [
+          // Container(child: Image(image: AssetImage('assets/scrns/scrn1.png'))),
+          ColorFiltered(
+            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
+                ),
+                MovingHole(controller: _controller),
+              ],
+            ),
+          ),
+          Container(
+              alignment: Alignment.bottomCenter,
+              child: Text(
+                "$param - $tm",
+                style:
+                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
+              ))
+        ],
+      ),
+    ));
+  }
+}
+
+class MovingHole extends StatelessWidget {
+  static double timeM(double scene) {
+    int time = 10;
+    return scene / time;
+  }
+
+  MovingHole({Key key, this.controller})
+      :
+        // scale1 = Tween<double>(begin: 0.5, end: 0.5).animate(
+        //     CurvedAnimation(
+        //       parent: controller,
+        //       curve: Interval(timeM(0.5), 0.075, curve: Curves.easeOut),
+        //     ),
+        //   ),
+        //   scale2 = Tween<double>(begin: 0.5, end: 1.2).animate(
+        //     CurvedAnimation(
+        //       parent: controller,
+        //       curve: const Interval(
+        //         1,
+        //         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);
+
+  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(
+              child: Transform(
+            alignment: Alignment.topCenter,
+            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(
+                margin: EdgeInsets.all(80),
+                // width: 50,
+                // height: 10,
+                decoration: BoxDecoration(
+                  color: color,
+                  border: Border.all(
+                    color: color,
+                    style: BorderStyle.solid,
+                    // width: 4.0 - (2 * controller.value))
+                  ),
+                )),
+          ));
+        });
+  }
+}
+// создать переменную, листенером слить текущее значение, на поляне в стеке вывести.
+// сколько составляет 0.05 от 10 секунд

lib/tensor.dart

@@ -0,0 +1,142 @@
+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,
+                  ),
+                )),
+          );
+        });
+  }
+}