Question

我制作了一个带有比例转换的容器，该容器从0的高度和宽度增加到90的高度和宽度。

现在，我想做的是随着它的增长它应该逐渐淡出。我是否需要为不透明度创建另一个动画控制器？最好的方法是什么？有人可以帮忙吗？

我的代码如下

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

这是一种无需使用AnimationController即可实现的方法

我希望这会有所帮助：）

double itemSize = 0;
double opacity = 1;

Duration animationDuration = Duration(seconds: 3);

@override
Widget build(BuildContext context) {

  Timer(Duration(milliseconds: 1), () {
    setState(() {
      testSize = 90;
      opacity = 0;
    });
  });

  return AnimatedOpacity(
    duration: animationDuration,
    opacity: opacity,
    child: AnimatedContainer(
      duration: animationDuration,
      width: itemSize,
      height: itemSize,
      decoration: new BoxDecoration(
        color: Color(0XFFEC3457), 
        shape: BoxShape.circle,
      ),
    ),
  );
}

Flutter -Loader动画中的缩放过渡

1 个答案: