在動(dòng)畫方面 Flutter 提供了 Animation 類提供使用搬泥。
動(dòng)畫
Flutter 中創(chuàng)建動(dòng)畫颈嚼，請(qǐng)創(chuàng)建名為 controller 的 AnimationController 對(duì)象并指定持續(xù)時(shí)間。并且讓 AnimationController 在給定的持續(xù)時(shí)間內(nèi)線性生成范圍從 0.0 到 1.0 的值添履。
class _LogoFadeState extends State<LogoFade> with TickerProviderStateMixin {
Animation animation;
AnimationController controller;
initState() {
super.initState();
// 創(chuàng)建一個(gè)動(dòng)畫控制器
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( // 創(chuàng)建一個(gè)過(guò)渡的動(dòng)畫
opacity: animation, // 這是動(dòng)畫變化值
child: Container(
height: 300.0,
width: 300.0,
child: FlutterLogo(),
),
);
}
dispose() {
controller.dispose();
super.dispose();
}
}
Lottie 動(dòng)畫
在 Flutter 有一個(gè)第三方的插件：fluttie驻谆，它可以讓你很簡(jiǎn)單的顯示一些動(dòng)畫加載效果。并且動(dòng)畫效果可以在 lottiefiles里找得到奈嘿。
先安裝依賴：
dependencies:
flutter_downloader: ^0.0.7
注意事項(xiàng)：
- 還沒(méi)有 iOS 的支持貌虾。
- 由于 dart 代碼和本機(jī)之間的延遲，控制多個(gè)動(dòng)畫可能有點(diǎn)滯后裙犹。渲染多個(gè)動(dòng)畫會(huì)降低應(yīng)用的幀速率尽狠。
- 動(dòng)畫小部件現(xiàn)在需要固定大小。
- 不要重復(fù)使用動(dòng)畫叶圃，因?yàn)檫@可能會(huì)導(dǎo)致您的應(yīng)用崩潰袄膏。相反，保存輸出 loadAnimationFromAsset() 并在需要時(shí)構(gòu)造新動(dòng)畫掺冠。
簡(jiǎn)單使用沉馆，首先在 lottiefiles 里下載一個(gè)動(dòng)畫的 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);
// 加載完成后再啟動(dòng)應(yīng)用
runApp(new MyApp());
}
body: new Column(
children: <Widget>[
new FluttieAnimation(eAnimation),
],
),
