Realization of scaling animation by using fluent positionedtransition

Time:2020-12-18

In this paper, we share the specific code of the realization of scaling animation by using fluent for your reference. The specific content is as follows

Fluent animation status monitor

AnimationController

//Animation controller
AnimationController controller;
//Animationcontroller is a special animation object. A new value will be generated at each frame of screen refresh,
//By default, animationcontroller generates numbers from 0.0 to 1.0 linearly over a given period of time
//It is used to control the beginning and end of animation as well as the monitoring of animation
//Vsync parameter. When Vsync exists, it will prevent off screen animation (animation UI is not on the current screen) from consuming unnecessary resources
//The duration of the animation. The seconds: 2 set here is 2 seconds. Of course, you can also set milliseconds: 2000
 controller =
 AnimationController(duration: const Duration(seconds: 2), vsync: this);
 //The statuslistener is called when the animation starts, ends, moves forward, or moves backward
 controller.addStatusListener((status) {
 if (status == AnimationStatus.completed) {
 //Animation from controller.reverse () this method is called back at the end of reverse execution
 print("status is completed");
 // controller.reset (); resets the animation to its pre start state
 //Start execution
 //controller.forward();
 } else if (status == AnimationStatus.dismissed) {
 //Animation from controller.forward () this method is called back at the end of forward execution
 print("status is dismissed");
 //controller.forward();
 }else if (status == AnimationStatus.forward) {
 print("status is forward");
 //Implementation controller.forward () will call back this state
 }else if (status == AnimationStatus.reverse) {
 //Implementation controller.reverse () will call back this state
 print("status is reverse");
 }
 });

Common operation instructions of animationcontroller

Animation status description

Implementation of center scaling animation by using fluent positionatedtransition

Animation start and end analysis

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_x/base/base_appbar_page.dart';

/**
 *Relativerecttween scale animation
 */
class RelativeRectTweenPage extends StatefulWidget {
 @override
 State<StatefulWidget> createState() {
 return new RelativeRectTweenState();
 }
}

class RelativeRectTweenState extends BaseAppBarPageState<RelativeRectTweenPage>
 with SingleTickerProviderStateMixin {
 //Animation controller
 AnimationController controller;
 Animation<RelativeRect> animation;

 @override
 String buildInitState() {
 Buildbackbar ("animation", backicon: Icons.arrow_ back_ ios);
 controller =
 AnimationController(duration: const Duration(seconds: 2), vsync: this);
 //The statuslistener is called when the animation starts, ends, moves forward, or moves backward
 controller.addStatusListener((status) {
 if (status == AnimationStatus.completed) {
 //Animation from controller.forward () this method is called back at the end of forward execution
 print("status is completed");
 //Reverse execution
 //controller.reverse();
 } else if (status == AnimationStatus.dismissed) {
 //Animation from controller.reverse () this method is called back at the end of reverse execution
 print("status is dismissed");
 //controller.forward();
 } else if (status == AnimationStatus.forward) {
 print("status is forward");
 //Implementation controller.forward () will call back this state
 } else if (status == AnimationStatus.reverse) {
 //Implementation controller.reverse () will call back this state
 print("status is reverse");
 }
 });

 //The process of this animation is
 //The distance to the left of the child widget changes from 10.0 to 100.0
 //The distance from the top edge of the child widget changes from 10.0 to 100.0
 //The distance to the right of the child widget changes from 10.0 to 100.0
 //The distance from the bottom of the child widget changes from 10.0 to 100.0
 //The four sides change the same distance ratio at the same time, so you can see that it's an animation with a reduced center
 RelativeRectTween rectTween = RelativeRectTween(
 //Initial position setting
 begin: const RelativeRect.fromLTRB(
  //The child widget is 10.0 away from the parent layout
  10.0,
  //The child widget is separated from the parent layout top 10.0
  10.0,
  //Child widget from parent layout right 10.0
  10.0,
  //Child widget from parent layout bottom 10.0
  10.0),
 //End position setting
 end: RelativeRect.fromLTRB(
  //The child widget is left 100.0 from the parent layout
 100.0,
  //The distance between the child widget and the parent layout is top 100.0
 100.0,
 //Child widget from parent layout right 100.0
 100.0,
 //Distance between child widget and parent layout bottom 100.0
 100.0,
 ),
 );

 //Association controller
 animation = rectTween.animate(controller);

 return null;
 }

 @override
 Widget buildWidget(BuildContext context) {
 return buildSlideTransition();
 }

 @override
 void dispose() {
 super.dispose();
 controller.dispose();
 }

 //Gradient animation
 Widget buildSlideTransition() {
 return Stack(
 children: <Widget>[
 //Must be a child widget of stack
 PositionedTransition(
  rect: animation,
  child: Container(
  color: Colors.grey,
  child: Image.network(
  "http://img5.duitang.com/uploads/item/201411/16/20141116124947_xBNxM.jpeg",
  ),
  ),
 ),
 Positioned(
  bottom: 20,
  left: 20,
  child: FlatButton(
  onPressed: () {
  if (controller.isDismissed) {
   ///Forward animation start
   controller.forward();
  } else if (controller.isCompleted) {
   ///Reverse animation start
   controller.reverse();
  } else {
   //Stop
   controller.dispose();
   //Reset animation
   controller.reset();
  }
  },
  Child: text,
 )
 ],
 );
 }
}

Filter positionatedtransition scale up

RelativeRectTween rectTween = RelativeRectTween(
 //Initial position setting
 begin: const RelativeRect.fromLTRB(
  50.0,
  50.0,
  50.0,
  50.0),
 //End position setting
 end: RelativeRect.fromLTRB(
 50.0,
 50.0,
 50.0,
 500.0,
 ),
 );

Slider positionatedtransition zooms right

RelativeRectTween rectTween = RelativeRectTween(
 //Initial position setting
 begin: const RelativeRect.fromLTRB(
  50.0,
  50.0,
  50.0,
  50.0),
 //End position setting
 end: RelativeRect.fromLTRB(
 500.0,
 50.0,
 50.0,
 50.0,
 ),
 );

The above is the whole content of this article, I hope to help you in your study, and I hope you can support developeppaer more.