在动画方面 Flutter 提供了 Animation 类提供使用。
动画
Flutter 中创建动画，请创建名为 controller 的 AnimationController 对象并指定持续时间。并且让 AnimationController 在给定的持续时间内线性生成范围从 0.0 到 1.0 的值。
class _LogoFadeState extends State<LogoFade> with TickerProviderStateMixin {
Animation animation;
AnimationController controller;
initState() {
super.initState();
// 创建一个动画控制器
this.controller = AnimationController(
duration: const Duration(milliseconds: 3000),
vsync: this
);
final CurvedAnimation curve = CurvedAnimation(
parent: controller,
curve: Curves.easeIn
);
// 变化的值
animation = Tween(begin: 0.0, end: 1.0).animate(curve);
controller.forward();
}
Widget build(BuildContext context) {
return FadeTransition( // 创建一个过渡的动画
opacity: animation, // 这是动画变化值
child: Container(
height: 300.0,
width: 300.0,
child: FlutterLogo(),
),
);
}
dispose() {
controller.dispose();
super.dispose();
}
}
Lottie 动画
在 Flutter 有一个第三方的插件：fluttie，它可以让你很简单的显示一些动画加载效果。并且动画效果可以在 lottiefiles里找得到。
先安装依赖：
dependencies:
flutter_downloader: ^0.0.7
注意事项：
- 还没有 iOS 的支持。
- 由于 dart 代码和本机之间的延迟，控制多个动画可能有点滞后。渲染多个动画会降低应用的帧速率。
- 动画小部件现在需要固定大小。
- 不要重复使用动画，因为这可能会导致您的应用崩溃。相反，保存输出 loadAnimationFromAsset() 并在需要时构造新动画。
简单使用，首先在 lottiefiles 里下载一个动画的 json 文件，并添加到 assets 里。
import 'package:fluttie/fluttie.dart';
var eAnimation;
void main() async {
// 先加载组件
var instance = new Fluttie();
var eComposition = await instance.loadAnimationFromAsset(
'lib/animatd/print.json',
);
eAnimation = await instance.prepareAnimation(eComposition);
// 加载完成后再启动应用
runApp(new MyApp());
}
body: new Column(
children: <Widget>[
new FluttieAnimation(eAnimation),
],
),
