Flutter：创建 add_close AnimatedIcons

Question

我想创建一个开始图标作为小部件中的Icon.add结束图标。例如，它们是预构建的动画，对应于开始动画 =和结束动画 = 。我想将结束动画更改为. 目前尚不清楚如何执行此操作，因为没有可用于创建自定义动画的文档。我能找到的最相关的代码是： https: //github.com/flutter/flutter/blob/e10df3c1a65f9d7db3fc5340cffef966f7bd40a6/packages/flutter/lib/src/material/animated_icons/data/add_event.g.dart。我相信我应该使用. 我怎样才能开始创建新的动画？Icon.closeAnimatedIconadd_eventaddeventIcon.closevitool

Answer 1

是的，朋友，你需要创建自己的动画

我已经针对你所说的情况编写了代码

我用来Transform widget 和 AnimationController

import 'dart:math';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {
  AnimationController animatedController;
  double _angle = 0;

  @override
  void initState() {
    animatedController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 300));
    animatedController.addListener(() {
      setState(() {
        _angle = animatedController.value * 45 / 360 * pi * 2;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
      child: InkResponse(
        onTap: () {
          if (animatedController.status == AnimationStatus.completed)
            animatedController.reverse();
          else if (animatedController.status == AnimationStatus.dismissed)
            animatedController.forward();
        },
        child: Transform.rotate(
          angle: _angle,
          child: Icon(
            Icons.add,
            size: 50,
          ),
        ),
      ),
    )));
  }
}

如果您需要自定义的不止于此，请查看AnimatedContainer

Answer 2

所以我有一些空闲时间，这是很多人在某些时候可能想要使用的东西，因为我们没有太多已经提供给我们的 AnimatedIcons 选项。所以我继续构建了这个小包并将其上传到 pub dart 上，以解决您正在寻找的问题。使用此包，您可以为任意两个图标设置动画。

检查 pub dart animate_icons

只需将包添加到 pubspec.yaml 中，如下所示：

animate_icons:

然后像这样使用这个小部件：

AnimateIcons(
    startIcon: Icons.add,
    endIcon: Icons.close,
    size: 60.0,
    onStartIconPress: () {
        print("Clicked on Add Icon");
    },
    onEndIconPress: () {
        print("Clicked on Close Icon");
    },
    duration: Duration(milliseconds: 500),
    color: Theme.of(context).primaryColor,
    clockwise: false,
),