flutter 动画 practice

import ‘package:flutter/material.dart‘;
import ‘dart:io‘;
import ‘dart:async‘;

main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: ‘/slide‘,
      routes: {
        ‘/‘: (context) => GamePage(),
        ‘/builderAnimation‘: (context) => BuilderPage(),
        ‘/crossfade‘: (context) => CrossFadePage(),
        ‘/autofade‘: (context) => AutoFade(),
        ‘/positiontransition‘: (context) => PositionTransition(),
        ‘/rotateTransition‘: (context) => RotateTransition(),
        ‘/scaleTransit‘: (context) => ScaleTest(),
        ‘/slide‘: (context) => SlideTest(),
      },
    );
  }
}

////////////////////////////////////////////////////////////////////////////////////////////////
class SlideTest extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return SlideTestState();
  }
}

class SlideTestState extends State<SlideTest> with SingleTickerProviderStateMixin{
  @override
  Widget build(BuildContext context) {

    var t = Tween(begin: Offset(0.0,2.0), end: Offset(0.0,1.0)).animate(AnimationController(vsync: this, duration: Duration(seconds: 2))..forward());

    return Scaffold(
      appBar: AppBar(title: Text(‘slide‘),),
      body: Container(
        child: SlideTransition(
            child: Container(width: 100,height: 100,color: Colors.orange,),
            position: t),
      ),
    );
  }
}


////////////////////////////////////////////////////////////////////////////////////////////////

class ScaleTest extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ScaleTransitionState();
  }
}

class ScaleTransitionState extends State<ScaleTest> with SingleTickerProviderStateMixin{
  @override
  Widget build(BuildContext context) {

    Animation t = Tween(begin: 1.0, end: 0.0).animate(AnimationController(vsync: this,duration: Duration(seconds: 2))..forward());

    return Scaffold(
      appBar: AppBar(title: Text(‘scale‘),),
      body: Container(
        child: ScaleTransition(
          child: Container(width: 100,height: 100,color: Colors.orange,),
        scale: t,),

      ),
    );
  }
}

////////////////////////////////////////////////////////////////////////////////////////////////
class RotateTransition extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return RotateTransitionState();
  }
}

class RotateTransitionState extends State<RotateTransition> with SingleTickerProviderStateMixin{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(‘rotate‘),),
      body: Container(
        child: RotationTransition(
          child: Container(width: 100, height: 100, color: Colors.orange,),
          turns: AnimationController(vsync: this,
          duration: Duration(seconds: 1),lowerBound: 0, upperBound: 0.1)..forward(),

        ),
      ),
    );
  }
}

////////////////////////////////////////////////////////////////////////////////////////////////
class PositionTransition extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return PositionTransitionState();
  }
}

class PositionTransitionState extends State<PositionTransition> with SingleTickerProviderStateMixin {

  @override
  Widget build(BuildContext context) {

    Animatable animatable = RelativeRectTween(begin: RelativeRect.fromLTRB(75, 75, 75, 75),
    end: RelativeRect.fromLTRB(100, 100, 75, 75),);
    Animation frontRelativeRect = animatable.animate(AnimationController(vsync: this, duration: Duration(seconds: 2))..repeat());

    return Scaffold(
      appBar: AppBar(title: Text(‘position transition‘),),
      body: Container(
        child: Stack(
          alignment: Alignment.center,
          fit: StackFit.loose,
          children: <Widget>[
            Container(width: 200,height: 200,color: Colors.blue,),
            Container(width: 100,height: 100,color: Colors.red,),
            PositionedTransition(
              rect: frontRelativeRect,
                child: Container(width: 100,height: 100, color: Colors.orange,),
            ),
          ],
        ),
      ),
    );
  }
}

////////////////////////////////////////////////////////////////////////////////////////////////

class AutoFade extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return AutoFadeState();
  }
}

class AutoFadeState extends State<AutoFade> with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(‘fade‘),),
      body: Container(
        child: FadeTransition(
            opacity: AnimationController(
                vsync: this,
                duration: Duration(seconds: 1),
            )..repeat(),
          child: Text((‘testing auto fade‘)),
          alwaysIncludeSemantics: true,
        ),
      ),
    );
  }
}

////////////////////////////////////////////////////////////////////////////////////////////////
class CrossFadePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return CrossFadePageState();
  }
}

class CrossFadePageState extends State<CrossFadePage> {
  bool first = true;

  @override
  Widget build(BuildContext context) {
    Timer(Duration(seconds: 2), (){
      setState(() {
        first = !first;
      });
    });
    return Scaffold(
      appBar: AppBar(title: Text(‘fade‘),),
      body: AnimatedCrossFade(
          firstChild: Text(‘first‘),
          secondChild: Text(‘second‘),
          crossFadeState: first?CrossFadeState.showFirst:CrossFadeState.showSecond,
          duration: Duration(seconds: 1)),
    );
  }
}
////////////////////////////////////////////////////////////////////////////////////////////////
class BuilderPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return BuilderPageState();
  }
}

class BuilderPageState extends State<BuilderPage> with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    var controller = AnimationController(duration: Duration(seconds: 2),vsync: this);
    var tween = Tween(begin: 20.0, end: 100.0).animate(controller);
    return Scaffold(
      appBar: AppBar(title: Text(‘fade‘),),
      body: AnimatedBuilder(
          animation: tween,
          child:Text(‘${tween.value}‘),
          builder: (context, Widget child){
            print(controller.value);
            print(tween.value);
            return Container(
              child: Column(
                children: <Widget>[
                  RaisedButton(child: Text(‘btn‘),onPressed: (){
                    controller.forward();
                  },),
                  Text(‘${tween.value} from 2‘),
                  child,
                ],
              ),
            );
          }),
    );
  }
}


////////////////////////////////////////////////////////////////////////////////////////////////

class GamePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return GamePageState();
  }
}

class GamePageState extends State<GamePage> with TickerProviderStateMixin {
  var gameWidth;
  var gameHeight;
  var brickSide;
  List positionedWidgets = [<Widget>[], <Widget>[], <Widget>[], <Widget>[]];
  var animation;

  AnimationController animationController;

  generatePositionList() {
    var top = (gameHeight - gameWidth) / 2.0 + 10.0;
    var left = 10.0;
    int i = 1;
    for (int y = 0; y < 4; y++) {
      for (int x = 0; x < 4; x++) {
        positionedWidgets[y].add(Brick(
          id: i,
          x: left + (1 + x * 2) * brickSide / 2.0,
          y: top + (1 + y * 2) * brickSide / 2.0,
          brickSide: brickSide,
          value: x + y,
        ));
        i++;
      }
    }
  }

  @override
  void initState() {
    super.initState();
    animationController = AnimationController(
        vsync: this, duration: Duration(seconds: 1));
  }

  @override
  Widget build(BuildContext context) {
    gameWidth = MediaQuery.of(context).size.width;
    gameHeight = MediaQuery.of(context).size.height;
    brickSide = (gameWidth - 80) / 4;
    generatePositionList();

    return SafeArea(
      child: Scaffold(
        body: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                child: Text(
                  ‘GAME 2048‘,
                  style: TextStyle(fontSize: 40),
                ),
              ),

              TouchArea(allBricks: positionedWidgets,),

              Container(
                child: Text(
                  ‘SCORE:999‘,
                  style: TextStyle(fontSize: 20),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class TouchArea extends StatefulWidget {
  List allBricks;
  TouchArea({this.allBricks});

  @override
  State<StatefulWidget> createState() {
    return TouchAreaState();
  }
}

class TouchAreaState extends State<TouchArea> {

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      child: Container(
        margin:
        EdgeInsets.only(left: 18, right: 18, top: 13, bottom: 13),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey, width: 3.0),
        ),
        alignment: Alignment.center,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: widget.allBricks[0],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: widget.allBricks[1],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: widget.allBricks[2],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: widget.allBricks[3],
            ),
          ],
        ),
      ),
    );
  }
}





class Brick extends StatefulWidget {
  double x;
  double y;
  var brickSide;
  int value;
  int id;

  Brick({this.id, this.x, this.y, this.brickSide, this.value});

  @override
  State<StatefulWidget> createState() {
    return BrickState();
  }
}

class BrickState extends State<Brick> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(2.0),
      alignment: Alignment.center,
      color: Colors.greenAccent,
      width: widget.brickSide,
      height: widget.brickSide,
      child: Text(‘${widget.value}‘),
    );
  }
}

//class BrickState extends State<Brick>{
//  @override
//  Widget build(BuildContext context) {
//    return Positioned(
//      left: widget.x-widget.brickSide/2.0,top: widget.y-widget.brickSide/2.0,width: widget.brickSide,height: widget.brickSide,
//      child: Container(child: Text(‘${widget.value}‘),),
//    );
//  }
//}