Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to achieve Love three Animation effects based on Flutter", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to achieve Love three Animation effects based on Flutter" this article.

Preface

We began a journey related to Flutter animation. In the application, we can bring users a more enjoyable experience through dynamic effects. A typical example is the dynamic effects of some live streaming platforms, such as sending rockets to create the dynamic effects of rocket launch-- it feels more face-saving. Of course, this is the enjoyment of Tuhao, which we programmers have only seen in video. In this article, we introduce the basic animation construction based on the Animation class.

Introduction to Animation

Animation is an abstract class that does not participate in the drawing of the screen, but interpolates interval values within a set time range. Interpolation can be linear, curvilinear, a step function, or any other conceivable way. The object of this class can know the current value and state (complete or disappear). The Animation class provides a listening callback method that is called when its value changes:

@ overridevoid addListener (VoidCallback listener)

Therefore, in the monitoring callback, we can refresh the interface and control the position, size and angle of the UI component through the latest value of the Animation object, so as to achieve the effect of animation. The Animation class is usually used with AnimationController.

Introduction to AnimationController

AnimationController is a special Animation class that inherits from Animation. Whenever the hardware is ready to draw the next frame, AnimationController generates a new value. By default, AnimationController produces a linear sequence of values from 0 to 1.0 in a given time range (usually 60 values per second to achieve a 60 fps effect). For example, the following code builds an AnimationController with a duration of 2 seconds.

Var controller = AnimationController (duration: const Duration (seconds: 2), vsync: this)

AnimationController has methods to control animation, such as forward,reverse, which are usually used to control the start and recovery of animation.

Connecting Animation and AnimationController is the Animatable class, which is also an abstract class. Common implementation classes include Tween (linear interpolation) and CurveTween (curve interpolation). The Animatable class has an animate method that takes Animation class parameters (usually AnimationController) and returns an Animation object.

Animation animate (Animation parent) {return _ AnimatedEvaluation (parent, this);}

The animate method uses a given Animation object driver to complete the dynamic effect, but the range of values used is its own, so you can build the dynamic effect of a custom range of values. For example, to build a dynamic effect value that increases from 0 to 100 in 2 seconds, you can use the following code.

Var controller = AnimationController (duration: const Duration (seconds: 2), vsync: this); var animation = Tween (begin: 0, end: 100) .animate (controller); Application-Love Triple

With the above foundation, we can start the test. Let's start with a compassionate three-company magnification and reduction of the dynamic effect, as shown below, click gradually to zoom in for the first time, and then click to gradually zoom back to the original.

The interface code is very simple, the three hearts actually use Stack to stack three different color love Icon components together, and then change the size of the Icon by the value of the Animtion object. It would be nice to use setState to refresh the interface in the listening callback where the Animation value changes. The complete code is as follows:

Import 'package:flutter/material.dart';class AnimtionDemo extends StatefulWidget {const AnimtionDemo ({Key? Key}: super (key: key); @ override _ AnimtionDemoState createState () = > _ AnimtionDemoState ();} class _ AnimtionDemoState extends State with SingleTickerProviderStateMixin {late Animation animation; late AnimationController controller; @ override void initState () {super.initState (); controller = AnimationController (duration: const Duration (seconds: 1), vsync: this); animation = Tween (begin: 40, end: 100) .animate (controller).. addListener (() {setState (() {})) }); controller.addStatusListener ((status) {print (status);}) } @ override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (title: Text ('Animation Animation'),), body: Center (child: Stack (alignment: Alignment.center, children: [Icon (Icons.favorite, color: Colors.red, size: animation.value * 1.5) ), Icon (Icons.favorite, color: Colors.red, size: animation.value,), Icon (Icons.favorite, color: Colors.red, size: animation.value / 2,),] ), floatingActionButton: FloatingActionButton (child: Icon (Icons.play_arrow, color: Colors.white), onPressed: () {if (controller.status = = AnimationStatus.completed) {controller.reverse () } else {controller.forward ();},),); @ override void dispose () {controller.dispose (); super.dispose ();}}

What needs to be mentioned here is that SingleTickerProviderStateMixin is mixed in _ AnimtionDemoState, which actually provides a TickerProivder object for AnimationController. The TickerProivder object triggers an onTick callback before each frame is refreshed, thus updating the value of the AnimationController.

The above is all the contents of this article "how to achieve Love three Animation effects based on Flutter". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.