AnimatedContainer - ClipPath + Flutter -路径未正确设置动画
AnimatedContainer - ClipPath + Flutter -路径未正确设置动画
提问于 2019-04-12 18:01:11
我正在寻找动画的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将通过动画在两者之间过渡，而裁剪器不会动画。
它看起来是这样的：
我试着用AnimatedContainer包装剪贴器，并在上面设置动画，但它不起作用。
如何才能使剪切的路径与AnimatedContainer一起垂直显示动画？
感谢任何愿意帮助我们的人
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-04-12 19:52:52
动画容器使用自己的动画，所以，我不知道剪辑路径和动画容器是否可以一起使用相同的动画。但我尝试了类似的方法，通过使用自定义动画来满足您的需求。请看一下，看看这是不是你想要的。
我将clip类转换为有状态的，以便使用动画。
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控制动画。
Stack Overflow用户
发布于 2021-06-08 16:37:00
这将无法正常工作，最简单的方法是创建另一个小部件(屏幕)并导航到它，然后添加目标容器(动画完成后)，并使用(Hero)小部件使用相同的标签键在两个屏幕中封装两个容器
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55649155
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号