代码段
import 'dart:math' as math;
import 'package:flutter/material.dart';
class BrickPage extends StatefulWidget{
@override
State createState() {
// TODO: implement createState
return _BrickPageState();
}
}
class _BrickPageState extends State with TickerProviderStateMixin{
AnimationController animationController;
Tween tween;
@override
void initState() {
// TODO: implement initState
super.initState();
animationController = new AnimationController(
vsync: this,
duration: Duration(seconds: 5));
tween = new Tween(begin: 0,end: 5);
animationController.repeat();
}
//Interval begin 代表延迟多长时间开始 end 代表超过多少直接到达动画的100%
Animation get animOne => tween.animate(
CurvedAnimation(
parent: animationController,
curve: Interval(0.0, 0.125,curve: Curves.linear))
);
//Brick 1
Animation get animTwo => tween.animate(
CurvedAnimation(
curve: Interval(
0.125,
0.25,
curve: Curves.linear,
),
parent: animationController,
),
);
//Brick 2
Animation get animThree => tween.animate(
CurvedAnimation(
curve: Interval(
0.25,
0.375,
curve: Curves.linear,
),
parent: animationController,
),
);
//Brick 3
Animation get animFour => tween.animate(
CurvedAnimation(
curve: Interval(
0.375,
0.5,
curve: Curves.linear,
),
parent: animationController,
),
);
//Brick 4
Animation get animFive => tween.animate(
CurvedAnimation(
curve: Interval(
0.5,
0.625,
curve: Curves.linear,
),
parent: animationController,
),
);
//Brick 4
Animation get animSix => tween.animate(
CurvedAnimation(
curve: Interval(
0.625,
0.750,
curve: Curves.linear,
),
parent: animationController,
),
);
//Brick 3
Animation get animSeven => tween.animate(
CurvedAnimation(
curve: Interval(
0.750,
0.875,
curve: Curves.linear,
),
parent: animationController,
),
);
//Brick 2
Animation get animEight => tween.animate(
CurvedAnimation(
curve: Interval(
0.875,
1.0,
curve: Curves.linear,
),
parent: animationController,
),
);
@override
void dispose() {
// TODO: implement dispose
super.dispose();
animationController.dispose();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: new AppBar(
title: new Text("tween animation"),
),
body: Center(
child: Row(
children: [
AnimatedBrick(
animations: [animOne, animTwo],
controller: animationController,
marginLeft: 0.0,
alignment: Alignment.centerLeft,
isClockWise: true,
),
AnimatedBrick(
animations: [animThree, animEight],
controller: animationController,
marginLeft: 0.0,
isClockWise: false,
),
AnimatedBrick(
animations: [animFour, animSeven],
controller: animationController,
marginLeft: 30.0,
isClockWise: true,
),
AnimatedBrick(
animations: [animFive, animSix],
controller: animationController,
marginLeft: 30.0,
isClockWise: false,
),
],
),
),
);
}
}
class AnimatedBrick extends AnimatedWidget{
final AnimationController controller;
final List animations;
final double marginLeft;
final bool isClockWise;
final Alignment alignment;
AnimatedBrick({this.controller,this.animations,this.marginLeft,this.isClockWise,this.alignment}):super(listenable:controller);
Matrix4 clockWise(animation) =>
Matrix4.rotationZ(animation.value * math.pi * 2.0 * 0.5);
Matrix4 antiClockWise(animation) =>
Matrix4.rotationZ(-(animation.value * math.pi * 2.0 * 0.5));
@override
Widget build(BuildContext context) {
var firstTransformation, secondTransformation;
if (isClockWise) {
firstTransformation = clockWise(animations[0]);
secondTransformation = clockWise(animations[1]);
} else {
firstTransformation = antiClockWise(animations[0]);
secondTransformation = antiClockWise(animations[1]);
}
/*Transform 使用来做旋转 平移 动画的 这里做的是旋转动画*/
return Transform(
transform: firstTransformation,
alignment: alignment,
child: Transform(
transform: secondTransformation,
alignment: alignment,
child: Brick(
marginLeft: marginLeft,
),
),
);;
}
}
class Brick extends StatelessWidget {
final double marginLeft;
Brick({this.marginLeft = 15.0});
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(left: marginLeft),
height: 10.0,
width: 40.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Colors.green,
),
);
}
}