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}'),), // ); // } //}