没有动画效果

Question

class LogoWidget extends StatelessWidget {
const LogoWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(vertical: 10),
child: const FlutterLogo(),
);}}
class GrowTransition extends StatelessWidget {
GrowTransition({required this.child, required this.animation});
final Widget child;
final Animation animation;
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: animation,
builder: (context,child)=>Container(
height: animation.value,
width: animation.value,
child: child,
),
child: child,
);}}
class _LogoAppState extends State with SingleTickerProviderStateMixin {
late Animation animation;
late AnimationController controller;
@override
void initState() {
super.initState();
controller =
AnimationController(vsync: this, duration: const Duration(seconds: 2));
animation = Tween(begin: 0, end: 300).animate(controller);
controller.forward();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return GrowTransition(child:const LogoWidget(),animation: animation);
}}

Answer 1

CrazyCodeBoy 2021-11-19 15:22:23

对照下这块课程源码检查下你的代码实现看是否有不一样的地方呢：https://git.imooc.com/coding-321/flutter_trip/src/master/doc/%E5%8A%A8%E7%94%BBAnimation%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97.md

• 提问者 Svanur #1

  GrowTransition类不对

• Junble 回复 提问者 Svanur #2

  你解决了吗，我这里也是同样情况，教学代码跑起来也没动画效果

• qq_麻烦_uwxM46 回复 Junble #3

  他这里是因为直接 return AnimatedBuild 导致无效的，老师代码是用Center包裹的,如果外层不用Center包裹就会变成 Container 包 Container,那样就不会有动画效果
  正确的：
  Widget build(BuildContext context) {
      return Center(
        child: AnimatedBuilder(
          animation: animation,
          builder: (context, child) => Container(
            height: animation.value,
            width: animation.value,
            child: child,
          ),
          child: child,
        ),
      );
    }