Flutter - ClipPath + AnimatedContainer - путь не анимируется должным образом - PullRequest
Новая
       40

Flutter - ClipPath + AnimatedContainer - путь не анимируется должным образом

1 голос
/ 12 апреля 2019

Я хочу анимировать AnimatedContainer и ClipPath, движущиеся по оси Y.

Это мой текущий код: 

class Clip extends StatelessWidget {

  final double height;

  Clip(this.height);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ClipPath(
        clipper: RoundedClipper(height),
        child: AnimatedContainer(
          duration: Duration(seconds: 5),
          height: height,
          color: Colors.amber,
        ),
      ),
    );
  }
}

class RoundedClipper extends CustomClipper<Path> {
  final double height;

  RoundedClipper(this.height);

  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0.0, height - 200);
    path.quadraticBezierTo(
      size.width / 2,
      height,
      size.width,
      height - 200,
    );
    path.lineTo(size.width, 0.0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}

в зависимости от высоты, которую я передаю этому классу, AnimatedContainer будет переходить между ними с анимацией, а клипер не будет анимироваться.

Вот как это выглядит:

example

Я попытался обернуть машинку для стрижки AnimatedContainer и установить анимацию, но это не сработало.

Как сделать так, чтобы обтравочный контур анимировался вертикально вместе с AnimatedContainer?

Спасибо всем, кто захочет помочь

1 Ответ

2 голосов
/ 12 апреля 2019

Анимированный контейнер использует свою собственную анимацию, поэтому я не знаю, могут ли пути клипа и анимированный контейнер работать вместе с одной анимацией. Но я попробовал подобный подход для того, что вам нужно, используя собственную анимацию. Пожалуйста, посмотрите и посмотрите, хотите ли вы этого.

Я преобразовал класс клипа в Stateful для использования анимации. 

    class Clip extends StatefulWidget {
      final double height;

      Clip(this.height);

      @override
      _ClipState createState() => _ClipState();
    }

    class _ClipState extends State<Clip> with TickerProviderStateMixin {
      AnimationController _controller;
      Animation<double> animation;
      final double startingHeight  =20.0;

      @override
      void initState() {
        super.initState();
        _controller =
            AnimationController(vsync: this, duration: Duration(seconds: 5));
            animation = Tween<double>(begin: startingHeight, end: widget.height).animate(_controller);
        _controller.forward(from: 0.0);
      }

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

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: AnimatedBuilder(
            builder: (context, anim) {
              return ClipPath(
                clipper: RoundedClipper(animation.value),
                child: Container(
                  height: animation.value,
                  color: Colors.amber,
                ),
              );
            },
            animation: _controller,
          ),
        );
      }
    }

здесь вы можете управлять анимацией с помощью _controller.

...