FLUTTER Development - Animation - Physics Animation

I. Overview

TWEEN animation: give the starting value and end value of the animation, FLUTTER calculates the movie process
Physical animation: Uncertain end value, animation simulation according to start conditions (such as initial speed, frost, initial position)
Physical animation is a physical engine simulation by the Simulation class. Simulation is an abstract class that defines the necessary properties and methods.

Two Simulation

2.1 Simulation

abstract class Simulation {
   double x(double time);
   double dx(double time);
   bool isDone(double time);
  }

Description:

x: Current time calculated location
DX: The current time calculated
Isdone: Whether the current time animation has been completed

2.2 Common SIMULATION class

Class name	Description
BouncingScrollSimulation	Boundary rollover physical engine
BoundedFrictionSimulation	Boundary friction simulation engine
ClampedSimulation	Interval simulation engine
ClampingScrollSimulation	Interval scrolling simulation engine
FrictionSimulation	Friction simulation engine
GravitySimulation	Drop simulation engine
ScrollSpringSimulation	Spring rolling simulation
SpringSimulation	Spring simulation

Three examples (ClampingScrollsimulation)

3.1 code

 class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin //TickerProviderStateMixin

 double value=0;
 var clampSimulation=ClampingScrollSimulation(position: 200, velocity: 1);
 Ticker tic;

  @override
  void initState() {
    super.initState();
    tic=createTicker((elapsed) {
      if (!clampSimulation.isDone(elapsed.inMicroseconds/1000)) {
        setState(() {
          value=clampSimulation.x(elapsed.inMicroseconds/1000);
        });
      }
    });
  }
 // animation settings
 Center(
        child: GestureDetector(
            onTap: () {if (!tic.isActive) {tic.start();}},
            child: Container(
              height: 100,
              width: 100,
              color: Colors.red,
              margin: EdgeInsets.only(left: value),
              alignment: Alignment.center,
                             Child: Text ('Point I started animation',),
            ),
          ),
        )

3.2 renderings

Intelligent Recommendation

FLUTTER Development - Animation - Lottie

I. Overview Lottie is an ARIBNB open source for high-performance animation library for Android, iOS, etc. The flutter native bank does not support Lottie, but the animation effect of Lottie can be imp...

FLUTTER Development - Animation - Nima

I. Overview NIMA is a 2D vector animation tool for Skia-rendering NIMA's use operation is basically the same as Flare NIMA file decompression is included.nma.bytesFile and.pngImage file, specified whe...

FLUTTER Development - Animation - RIVE

I. Overview Rive is a FLARE upgrade version, is a real-time interaction design and animation tool. The reciprion of the file is.riv, Use it when loading animation isRive Flutter runtime Rive supports ...

Flutter Animation animation development-reverse reverse playback

We know that AnimationController.forward () can play animation in forward direction, if you want to play animation in reverse, you can call AnimationController.reverse () Step on the pit Immediately w...

Flutter Animation animation development-repeat loop playback

Introduction We know that AnimationController.forward () can play the animation in the forward direction, and AnimationController.reverse () can play the animation in the reverse direction. If you wan...