AnimatedWidget的子类,使用Rect类型的动画器让子组件在两个Rect对象之间进行过渡动画。
相关组件
RelativePositionedTransition基本使用
<br />【child】 : 孩子组件 【Widget】<br />【size】 : 左和上的偏移量 【Size】<br />【rect】 : 动画 【Animation<Rect>】<br /> PositionedTransition组件只能在Stack内起作用<br />![141.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589457387238-c1723fcd-8d97-4b1c-aae2-caa325741edb.gif#align=left&display=inline&height=226&margin=%5Bobject%20Object%5D&name=141.gif&originHeight=226&originWidth=804&size=318559&status=done&style=none&width=804)
import 'package:flutter/material.dart';
class CustomRelativePositionedTransition extends StatefulWidget {
@override
_CustomRelativePositionedTransitionState createState() =>
_CustomRelativePositionedTransitionState();
}
class _CustomRelativePositionedTransitionState
extends State<CustomRelativePositionedTransition>
with SingleTickerProviderStateMixin {
AnimationController _ctrl;
@override
void initState() {
_ctrl = AnimationController(vsync: this, duration: Duration(seconds: 2));
_ctrl.forward();
super.initState();
}
@override
void dispose() {
_ctrl.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
setState(() {
_ctrl.reset();
_ctrl.forward();
});
},
child: Container(
color: Colors.grey.withAlpha(33),
width: 200,
height: 100,
child: Stack(
children: <Widget>[
RelativePositionedTransition(
size: Size(200, 100),
rect: RectTween(
begin: Rect.fromLTRB(0, 0, 50, 50),
end: Rect.fromLTRB(0, 0, 50, 50).translate(100, 50),
).animate(_ctrl),
child: Icon(
Icons.android,
color: Colors.green,
size: 50,
),
)
],
),
));
}
}