当前位置：网站首页>Come after me! Flutter realizes chasing animation

Come after me! Flutter realizes chasing animation

2022-07-20 21:26:00 【InfoQ】

Preface

We use

Stack

Component time , You usually use

Positioned

Components are used as sub components

Stack

The positioning of ,

Positioned

adopt

top

bottom

height

Choose two out of three to determine the position and size in the vertical direction , Use

left

right

and

width

Choose two out of three to determine the position and size in the horizontal direction . Corresponding , We can use

AnimatedPositioned

Component to implement sub components in

Stack

Mobile in 、 Other effects such as size change . actually , We are

Flutter Simulated rocket launch animation

It has been introduced

AnimatedPositioned

Component , In this article, we use this component to build the animation effect of two ball chasing , In order to fully understand the use of this component .

Effect analysis

You can see from the graph , The blue ball and orange ball will follow the left side of the big white circle first and then 、 Next 、 Right 、 Move the top vertex , At the same time, there will be a pop-up effect when starting the switch . The specific implementation logic is as follows ：

Along the great circle 4 Point movement effect , We can control the starting position of the ball and we can do it .

The bounce effect can be used
bounceIn
Curve realization .

The effect of chasing one after another , You can set an ordered array of positions , The position of one ball is the next position of another ball , This can be achieved by taking positions from the position array using different subscripts .

Realization of repetitive dynamic effect ： Repeated dynamic use
AnimatedPositioned
Of
onEnd
Trigger , Call... At the end of each time
setState
Add the subscript of the control position 1, You can achieve the effect of animation cycle .

Code implementation

The code implementation is as follows ：

class _AnimatedPositionedDemoState extends State<AnimatedPositionedDemo> {
 final roundSize = 200.0;
 var ballSize = 50.0;
 late List<Offset> animatedOffsets;
 int index = 0;
 @override
 void initState() {
 animatedOffsets = [
 Offset(0.0, (roundSize - ballSize) / 2),
 Offset((roundSize - ballSize) / 2, roundSize - ballSize),
 Offset(roundSize - ballSize, (roundSize - ballSize) / 2),
 Offset((roundSize - ballSize) / 2, 0.0),
 ];
 super.initState();
 }

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('AnimatedPositioned'),
 brightness: Brightness.dark,
 backgroundColor: Colors.black,
 ),
 backgroundColor: Colors.black,
 body: Center(
 child: Stack(children: [
 ClipOval(
 child: Container(
 width: roundSize,
 height: roundSize,
 color: Colors.white,
 ),
 ),
 AnimatedPositioned(
 top: animatedOffsets[index].dy,
 height: ballSize,
 left: animatedOffsets[index].dx,
 width: ballSize,
 child: ClipOval(
 child: Container(
 color: Colors.blue,
 ),
 ),
 duration: Duration(seconds: 2),
 curve: Curves.bounceIn,
 onEnd: () {
 setState(() {
 index = (index + 1) % animatedOffsets.length;
 });
 },
 ),
 AnimatedPositioned(
 top: animatedOffsets[(index + 1) % animatedOffsets.length].dy,
 height: ballSize,
 left: animatedOffsets[(index + 1) % animatedOffsets.length].dx,
 width: ballSize,
 child: ClipOval(
 child: Container(
 color: Colors.orange,
 ),
 ),
 duration: Duration(seconds: 2),
 curve: Curves.bounceIn,
 ),
 ]),
 ),
 floatingActionButton: FloatingActionButton(
 child: Text(
 ' Walk you ',
 style: TextStyle(
 color: Colors.white,
 ),
 textAlign: TextAlign.center,
 ),
 onPressed: () {
 setState(() {
 index = (index + 1) % 4;
 });
 },
 ),
 );
 }
}

The key part is ：

AnimatedPositioned(
 top: animatedOffsets[index].dy,
 height: ballSize,
 left: animatedOffsets[index].dx,
 width: ballSize,
 child: ClipOval(
 child: Container(
 color: Colors.blue,
 ),
 ),
 duration: Duration(seconds: 2),
 curve: Curves.bounceIn,
 onEnd: () {
 setState(() {
 index = (index + 1) % animatedOffsets.length;
 });
 },
),

We go through

left

and

top

Controls the starting position of the ball , And then in

onEnd

It's time to call

setState

Update the position subscript to switch the position of the ball to the next adjacent vertex .

Changing play

In fact, we can add balls , Adjust the span or position of the moving point of the ball , Implement some other interesting animations . For example, here is 4 A ball , Every time 2 The span of a vertex （ Subscript every time +2）, There will be 4 The feeling of putting two balls across each other . The source code of this animation has been uploaded to ：

Animation related source code