我正在try 将曲线类动画"Curves.bouneOut"添加到使用AnimationController的代码中.

这是我的代码:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  var squareScale = 1.0;
  static AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(
        vsync: this,
        lowerBound: 0.5,
        upperBound: 1.0,
        duration: Duration(milliseconds: 300));

    _controller.addListener(() {
      setState(() {
        squareScale = _controller.value;
      });
    });

    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Bounce Example"),
      ),
      body: Stack(
        children: <Widget>[
          Container(
            width: 150.0,
            height: 150.0,
            color: Colors.yellowAccent,
          ),
          Column(
            children: <Widget>[
              Row(
                children: <Widget>[
                  GestureDetector(
                    onTap: () {
                      _controller.forward(from: 0.0);
                    },
                    child: Transform.scale(
                      scale: squareScale,
                      child: Container(
                        width: 150.0,
                        height: 150.0,
                        color: Colors.green,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

当前,绿色容器将从0.5zoom 到1.0zoom 设置动画,但不会反弹.如何添加"曲线"."反弹"动画使容器在点击时反弹?

提前感谢您的帮助!

推荐答案

您将希望同时使用动画控制器和补间,这将允许您添加Curves.bounceOut.

在代码的某个地方添加:

AnimationController _controller;
var scaleAnimation;

在你的initState()方法中:

_controller = new AnimationController(
 duration: new Duration(milliseconds: 300),
 vsync: this
)
..addListener(() {
  setState(() {});
});
scaleAnimation = new Tween(
  begin: 0.5,
  end: 1.0,
).animate(new CurvedAnimation(
  parent: _controller,
  curve: Curves.bounceOut
));

请注意,..addListener()是一个很好的dart代码,它允许您轻松添加侦听器.Tween基本上是告诉你的动画,它需要在AnimationController中给出的时间范围内从begin中的值变为end中的值.要在代码中使用此值,现在只需设置动画结果的比例:

child: Transform.scale(
  scale: scaleAnimation.value,
  child: Container(
    width: 150.0,
    height: 150.0,
    color: Colors.green,
  ),
),

当调用动画时,它将自动更新容器的比例.

编辑:

将小部件更改为:

child: isChanging ? Transform.scale(
  scale: scaleAnimation.value,
  child: Container(
    width: 150.0,
    height: 150.0,
    color: Colors.green,
  ),
) : Transform.scale(
  scale: 1.0,
  child: Container(
    width: 150.0,
    height: 150.0,
    color: Colors.green,
  ),
),

beginend参数分别保留为0.51.0,但在转发控制器之前,请在onTap()方法中添加:

onTap: () {
  setState(() {
    isChanging = true
  });
  _controller.forward(from: 0.0);
}

在代码中的任何地方添加第bool isChanging行.最后,您需要在动画结束时重置显示的小部件,因此将scaleAnimation更改为:

child: Transform.scale(
  scale: scaleAnimation.value,
  child: Container(
    width: 150.0,
    height: 150.0,
    color: Colors.green,
  ),
)..addStatusListener((AnimationStatus status) {
  if (status == AnimationStatus.completed) { //the animation is finished
    _controller.reset();
    setState(() {
      isChanging = false;
    }
  }
});

Dart相关问答推荐

Dart/Flutter ffi(外部函数接口)本机回调,例如:sqlite3_exec

Asset图像作为Card背景,Flutter 中顶部有文本

从 Future 实例中获取值

跳过 JavaScript 直接进入 Dart

Flutter DatePicker 没有day选项

如何在 Flutter 中找出 URL 的有效性?

异常:在Flatter项目上没有Linux桌面项目配置错误

Flutter:并非所有本地化代表都支持应用程序的语言环境

Flutter 在整个屏幕上禁用touch

在Flutter 中使用 import 'dart:html' - 我需要额外的依赖项吗?

如何在 Dart 中创建我们自己的metadata元数据?

dart - 数字格式

使用 Dart 解析 URI 以提取查询参数

Dart 中 == 和 === 有什么区别?

方法级联如何在 dart 中准确工作?

使用 VSCode 创建和运行 Dart 控制台应用程序?

GWT 与 Dart - 主要区别是什么? Dart 是 GWT 的潜在替代品吗?

你如何在 Dart 中打印美元符号 $

Dart 中的 List.shuffle()?

如何在 Dart 中合并两个列表?