flutter动画插件simple_animations(FadeAnimation)找不到MultiTrackTween,Track,ControlledAnimation关键字

这是直接在github扒拉下来的动画淡入的封装好的代码模块,但是因为这段代码用的插件版本太老了,导致在现在2023年sdk版本的flutter运行不起来…
以下是该旧代码:

simple_animations: ^1.3.3
import 'package:flutter/material.dart';
import 'package:simple_animations/simple_animations.dart';

class FadeAnimation extends StatelessWidget {
  final double delay;
  final Widget child;

  FadeAnimation(this.delay, this.child);

  
  Widget build(BuildContext context) {
    final tween = MultiTrackTween([
      Track("opacity").add(Duration(milliseconds: 500), Tween(begin: 0.0, end: 1.0)),
      Track("translateY").add(
        Duration(milliseconds: 500), Tween(begin: -30.0, end: 0.0),
        curve: Curves.easeOut)
    ]);

    return ControlledAnimation(
      delay: Duration(milliseconds: (500 * delay).round()),
      duration: tween.duration,
      tween: tween,
      child: child,
      builderWithChild: (context, child, animation) => Opacity(
        opacity: animation["opacity"],
        child: Transform.translate(
          offset: Offset(0, animation["translateY"]), 
          child: child
        ),
      ),
    );
  }
}

因为在我现在项目跑不起来,我去看simple_animations最新插件说明,根据插件官网的更新提示修改,已经能正常跑最新插件,以下就是最新版插件能编译过去的代码:

simple_animations: ^5.0.2
enum AniProps { opacity, translateY }

class FadeAnimation extends StatelessWidget {
  final double delay;
  final Widget child;

  FadeAnimation(this.delay, this.child);

  
  Widget build(BuildContext context) {
    final tween = MovieTween()
      ..tween(
        AniProps.opacity,
        Tween(begin: 0.0, end: 1.0),
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeIn,
      )
      ..tween(
        AniProps.translateY,
        Tween(begin: -30.0, end: 0.0),
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeOut,
      );

    return PlayAnimationBuilder(
      delay: Duration(milliseconds: (500 * delay).round()),
      duration: tween.duration,
      tween: tween,
      child: child,
      builder: (context, child2, animation) => Opacity(
        opacity: child2.get(AniProps.opacity),
        child: Transform.translate(
            offset: Offset(0, child2.get(AniProps.translateY)), child: child),
      ),
    );
  }
}

调用方法也很简单 在每个Widget模块前面包裹就行,如下:

FadeAnimation(1.4, Container(......)),

第一个参数是时间,然后container就会有动画淡入,自己去把控 ! ! !

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值