颤动中的淡入或不透明

Posted 2023-02-23

【中文标题】颤动中的淡入或不透明

【英文标题】：fade in or opacity in flutter

【发布时间】：2021-04-03 00:22:31

【问题描述】：

enter code here我有一张图片，它在我的初始屏幕中从底部滑动到中间。 除了slideTransaction，我希望图像随着幻灯片淡入，以便在向上滑动时不透明度从0变为1。 是通过在小部件上使用两次动画来完成的，还是有其他方法？

我只添加了关于小部件的代码，我正在向上滑动，现在想要动画淡入。

这是初始化：

 AnimationController animationController;
  Animation<Offset> animation1;

这是在初始化状态：

 animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );

 animation1 = Tween<Offset>(
       begin: Offset.zero, end: Offset(0, -3 ))
        .animate(animationController);
    animationController.forward();
    
    
   

以下是小部件：

 Align(
            alignment: Alignment.topCenter,
     child: SlideTransition(
        position: animation1,
        child: Transform.scale(
        scale: 1.5,
        child:Image.asset('assets/images/Capture.PNG'),
        ),),),

【参考方案1】：

simple_animations 包中的 MultiTween 小部件可能是您正在寻找的东西。这是我在多个项目中重复使用的小部件：

class FadeIn extends StatelessWidget 
  final double delay;
  final Widget child;
  FadeIn(this.delay, this.child);

  @override
  Widget build(BuildContext context) 
    final tween = MultiTween<String>()
      ..add("opacity", Tween(begin: 0.0, end: 1.0), Duration(milliseconds: 500))
      ..add("translateY", Tween(begin: 130.0, end: 0.0), Duration(milliseconds: 500), Curves.easeOut);

    return PlayAnimation<MultiTweenValues<String>>(
      delay: Duration(milliseconds: (300 * delay).round()),
      duration: tween.duration,
      curve: Curves.decelerate, // or fastOutSlowIn
      tween: tween,
      child: child,
      builder: (context, child, value) => Opacity(
            opacity: value.get("opacity"),
            child: Transform.translate(
                offset: Offset(0, value.get("translateY")), child: child),
          ),
    );