zoukankan      html  css  js  c++  java
  • flutter 的Animation简单了解

    import 'package:flutter/material.dart';
    
    class AnimationDemo extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text('AnimationDemo'),
              elevation: 0.0,
            ),
            body: AnimationDemoHome());
      }
    }
    
    class AnimationDemoHome extends StatefulWidget {
      @override
      _AnimationDemoHomeState createState() => _AnimationDemoHomeState();
    }
    
    class _AnimationDemoHomeState extends State<AnimationDemoHome>
        with TickerProviderStateMixin {
      AnimationController animationDemoController;
      Animation animation;
      Animation animationColor;
      CurvedAnimation curve;
    
      @override
      void initState() {
        super.initState();
    
        animationDemoController = AnimationController(
          // value: 32.0,
          // lowerBound: 32.0,
          // upperBound: 100.0,
          duration: Duration(milliseconds: 1000),
          vsync: this,
        );
    
        curve = CurvedAnimation(
            parent: animationDemoController, curve: Curves.bounceOut);
    
        animation = Tween(begin: 32.0, end: 100.0).animate(curve);
        animationColor =
            ColorTween(begin: Colors.red, end: Colors.red[900]).animate(curve);
    
        // animationDemoController.addListener(() {
        //   // print('${animationDemoController.value}');
        //   setState(() {});
        // });
    
        animationDemoController.addStatusListener((AnimationStatus status) {
          print(status);
        });
    
        // animationDemoController.forward();
      }
    
      @override
      void dispose() {
        super.dispose();
    
        animationDemoController.dispose();
      }
    
      @override
      Widget build(BuildContext context) {
        return Center(
          child: AnimatedHeart(
            animations: [
              animation,
              animationColor,
            ],
            controller: animationDemoController,
          ),
        );
      }
    }
    
    class AnimatedHeart extends AnimatedWidget {
      final List animations;
      final AnimationController controller;
    
      AnimatedHeart({
        this.animations,
        this.controller,
      }) : super(listenable: controller);
    
      @override
      Widget build(BuildContext context) {
        return IconButton(
          icon: Icon(Icons.favorite),
          iconSize: animations[0].value,
          color: animations[1].value,
          onPressed: () {
            switch (controller.status) {
              case AnimationStatus.completed:
                controller.reverse();
                break;
              default:
                controller.forward();
            }
          },
        );
      }
    }

    效果:

  • 相关阅读:
    从搭eclipse环境到导入maven工程
    基于jquery的多选下拉列框再次更改样式和交互
    BootStrap的typeahead使用过程中遇到的问题
    Vue webapp项目通过HBulider打包原生APP
    微信相机
    前端小新手,记录项目中不懂的问题
    判断pdf、word文档、图片等文件类型(格式)、大小的简便方法
    JavaScript学习笔记(一)——Map、Set与iterable
    oracle nvl函数
    mybaits中主键自动生成并返回主键
  • 原文地址:https://www.cnblogs.com/loaderman/p/11345993.html
Copyright © 2011-2022 走看看