这是直接在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就会有动画淡入,自己去把控 ! ! !