Flutter -Loader 动画中的比例转换

Question

我制作了一个带有缩放过渡的容器，它从 0 高度和宽度增长到 90 高度和宽度。

现在我想做的是它应该慢慢淡出，因为它 grows.Do 我需要为不透明度创建另一个动画控制器吗？最好的方法是什么？有人可以帮忙吗？

我的代码看起来像这样

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

void main() => runApp(new MyAnimationApp());

class MyAnimationApp extends StatefulWidget {
  @override
  _MyAnimationAppState createState() => _MyAnimationAppState();
}

class _MyAnimationAppState extends State<MyAnimationApp>
    with TickerProviderStateMixin {
  Animation<double> animation;
  AnimationController _controller;

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

    _controller =
        new AnimationController(vsync: this, duration: Duration(seconds: 3))
          ..repeat();
    animation = new CurvedAnimation(parent: _controller, curve: Curves.linear);
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        body: new Container(
          child: new Center(
            child: new ScaleTransition(
              scale: animation,
              child: new Container(
                decoration: new BoxDecoration(
                    color: Color(0XFFEC3457), shape: BoxShape.circle),
                height: 90.0,
                width: 90.0,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

SS来了

谢谢！！！期待回复......

Answer 1

您需要在代码中添加双精度值：

double _opacity = 1;

并在 initState 结束时为您的动画控制器提供一个侦听器

_controller.addListener(() {
  setState(() {
    _opacity = 1 - _controller.value;
  });
});

在您的小部件树上，您可以添加：

ScaleTransition(
  scale: animation,
  child: Opacity(
    opacity: _opacity,
    child: Container(

Flutter -Loader 动画中的比例转换

Scale Transition in Flutter -Loader Animation

animation

dart

flutter

flutter-layout

flutter-animation