Flutter animation use

Rotating animation

Transparency transform animation

In A Flutter, you can animate widgets with an animation library. In a Flutter, you can animate widgets with an animation library.

In Android, you can create an animation from XML or call.animate() on a view. In Flutter, you can wrap widgets into an Animation.

Similar to Android, in Flutter you have an AnimationController and Interpolator, which is an extension of the Animation class, such as CurvedAnimation. You pass the controller and animation to the AnimationWidget and tell the controller to start the animation.

import 'package:flutter/material.dart';

void main() {
  runApp(new FadeAppTest());
}

class FadeAppTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Fade Demo',
      theme: new ThemeData(
        primarySwatch: Colors.green,
      ),
      home: new MyFadeTest(title: 'Fade Demo')); } } class MyFadeTest extends StatefulWidget { MyFadeTest({Key key, this.title}) : super(key: key); final String title; @override State createState() => new _MyFadeTest(); } class _MyFadeTest extends State<MyFadeTest> with TickerProviderStateMixin { AnimationController controller; // CurvedAnimation curved; // Curve animation, animation interpolation, bool forward =true;

  @override
  void initState() {// initialize super.initState() when the current widget is inserted into the tree; controller = new AnimationController( vsync: this, duration: const Duration(seconds: 3)); curved = new CurvedAnimation(parent: controller, curve: Curves.bounceOut); // controller.forward(); } @override Widget build(BuildContext context) {return new Scaffold(
      appBar: new AppBar(
        title: new Text('FadeTest'),), body: new Center(// child: new FadeTransition(// opacity animation // opacity: curved,// pass animation into different animation widgets // child: New FlutterLogo(// Create a widget to draw the Flutter logo // size: 200.0, //), //), child: new RotationTransition(// Rotate animation turns: Curved, child: new FlutterLogo(size: 200.0,),), floatingActionButton: new floatingActionButton (onPressed: () {if(forward) controller.forward(); // Play the animation forwardelsecontroller.reverse(); // Animation forward =! forward; }, tooltip:'fade', child: new Icon(Icons.track_changes), ), ); }}Copy the code

Welcome to join the Android circle, which will update source code and interview materials for free from time to time, including cutting-edge technology flutter and other thematic information, circle friends also actively exchange water ~ we make progress and learn together; You can join the group chat by clicking the “like” button