Question

我对Flutter很陌生，遇到了一个问题。我必须根据给定的高度值裁剪png。这与我制作的这个类很好用：

class ScaleClipper extends CustomClipper<Rect> {
    double value;

    @override
    Rect getClip(Size size) {
        Rect rect = Rect.fromLTWH(0.0, 0.0 + value, size.width, size.height);
        return rect;
    }

    @override
    bool shouldReclip(ScaleClipper oldClipper) {
        return true;
    }

    ScaleClipper(double value) {
        this.value = value;
    }
}

现在，我要为图像中的变化设置动画。我尝试将其包装在此处提到的小部件中：https://flutter.io/docs/development/ui/widgets/animation 但是我没有使其正常工作。这是我显示图像的小部件：

ClipRect(
            clipper: ScaleClipper(value),
            child: Container(
                margin: new EdgeInsets.only(
                    left: 30.0, top: 30.0, right: 20.0, bottom: 30.0),
                width: 150.0,
                height: 420.0,
                decoration: BoxDecoration(
                    image: DecorationImage(
                        image: AssetImage("images/image.png"),
                        fit: BoxFit.contain))),
          ),

我需要改变问题的解决方法还是可以对图像的裁剪进行动画处理？

Answer 1

我找到了未来新手的答案。您可以只使用一个简单的Tween动画

controller = AnimationController(
    duration: const Duration(milliseconds: 1000), vsync: this);
animation = Tween(begin: 0.0, end: 1.0).animate(controller)
  ..addListener(() {
    setState(() {
      fracturedValue = desiredClipValue * animation.value;
    });
  });

带有动画的Flutter剪辑PNG

1 个答案: