颤动Transform.translate动画从和到小部件的中心答案

【问题标题】：flutter Transform.translate animation from and to center of widget颤动Transform.translate动画从和到小部件的中心
【发布时间】：2019-08-16 08:27:08
【问题描述】：

在下面的动画中实现了使翻译动画的中心同时使用elasticIn 和elasticOut

不幸的是，我的实现不是小部件的中心，我无法设置它

import 'package:flutter/material.dart';

void main()=>runApp(MaterialApp(home: App(),));

class App extends StatefulWidget {
  @override
  State<StatefulWidget> createState() =>_App();
}

class _App extends State<App> with TickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animationRadiusIn;
  Animation<double> animationRadiusOut;

  final double initialRadius = 55.0;
  double radius = 0.0;

  @override
  void initState() {
    super.initState();

    controller = AnimationController(vsync: this, duration: Duration(seconds: 5));

    animationRadiusIn =
        Tween<double>(begin: 1.0, end: 0.5).animate(CurvedAnimation(parent: controller, curve: Interval(0.75, 1.0, curve: Curves.elasticIn)));
    animationRadiusOut =
        Tween<double>(begin: 0.5, end: 1.0).animate(CurvedAnimation(parent: controller, curve: Interval(0.0, 0.25, curve: Curves.elasticOut)));

    controller.addListener(() {
      setState(() {
        if (controller.value >= 0.75 && controller.value <= 1.0) {
          radius = animationRadiusIn.value * initialRadius;
        } else if (controller.value >= 0.0 && controller.value <= 0.25) {
          radius = animationRadiusOut.value * initialRadius;
        }
      });
    });

    controller.repeat();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Center(
            child: Transform.translate(
              offset: Offset(radius,radius),
              child:FlutterLogo(),
            ),
          ),
        ],
      ),
    );
  }
}

从小部件中心为elasticIn 和elasticOut 动画制作动画

这意味着开始和结束 Curves.elasticIn 和 Curves.elasticOut 动画从中心到中心

【问题讨论】：

为什么不使用AlignTransition / SlideTransition？
见this和this
@pskink 表示从中心开始和结束 Curves.elasticIn 和 Curves.elasticOut 动画

标签： flutter flutter-animation

【解决方案1】：

我已尝试观察您的代码的行为。这是您的实现的输出：

我观察到的是您如何设置动画的开始位置。基于elasticIn和elasticOut的文档：

试图从animationRadiusIn和animationRadiusOut切换begin和end的值

animationRadiusIn = Tween<double>(begin: 0.5, end: 1.0).animate(
        CurvedAnimation(
            parent: controller,
            curve: Interval(0.75, 1.0, curve: Curves.elasticIn)));
animationRadiusOut = Tween<double>(begin: 1.0, end: 0.5).animate(
        CurvedAnimation(
            parent: controller,
            curve: Interval(0.0, 0.25, curve: Curves.elasticOut)));

这是输出：

它比以前更居中，并且更改animationRadiusIn中的begin: 0.0和animationRadiusOut中的end: 0.0的值使动画从中心开始和结束。我认为这是您需要设置它的地方。

animationRadiusIn = Tween<double>(begin: 0.0, end: 1.0).animate(
            CurvedAnimation(
                parent: controller,
                curve: Interval(0.75, 1.0, curve: Curves.elasticIn)));
animationRadiusOut = Tween<double>(begin: 1.0, end: 0.0).animate(
            CurvedAnimation(
                parent: controller,
                curve: Interval(0.0, 0.25, curve: Curves.elasticOut)));

【讨论】：