我期待动画在y轴上移动的AnimatedContainer
和ClipPath
。
这是我目前的代码:
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将使用动画在两者之间转换,而裁剪器不会动画。
这是它的样子:
我尝试使用AnimatedContainer包装剪辑器并在其上设置动画,但它没有用完。
如何使剪裁路径与AnimatedContainer一起垂直动画?
感谢任何想要帮助的人