Last Updated on 2021-10-17 by Clay
FadeTransition 是我在學習 Flutter 的元件動畫時湊巧看到一種動畫效果，雖然目前為止都沒有應用到這個效果的需求，不過既然都研究了怎麼使用，也還挺簡單有趣的，便順手記錄下來。
簡單來說，FadeTransition 跟我之前在 [Flutter] 實現元件淡出淡入效果 這篇文章中紀錄的 AnimatedOpacity 有些相似，都是可以控制元件透明度的方法。
唯一的不同之處是，FadeTransition 能設置一個固定的週期，使元件透明度的變化反覆更動，形成一種閃爍的動畫效果。
FadeTransition
FadeTransition 的使用方法非常簡單，跟 Flutter 大部分的元件動畫相似，我們需要準備以下兩種物件：
AnimationController：可設定週期之類的參數Animation<double>：可決定動畫執行的 curve（Flutter 中 Curves 的選項有非常多種）
Animation<double> 的 parent 屬性設定為 AnimationController、而 FadeTransition 的 opacity 參數又要輸入 Animation<double>。之後，再把要隱藏、顯示的元件放在 FadeTransition 的 child 位置即可。
這樣解釋有點複雜，不過我認為仔細看會發現這都是有道理的。直接看程式碼應該很清楚。
import 'package:flutter/material.dart';
// Main
void main() => runApp(MyApp());
// MyApp
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
// HomePage
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
// _HomePageState
class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
// Controller
late AnimationController _controller = AnimationController(
vsync: this,
duration: Duration(seconds: 1),
)..repeat(reverse: true);
// Animation
late Animation<double> _animation = CurvedAnimation(
parent: _controller,
curve: Curves.easeInOut
);
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: FadeTransition(
opacity: _animation,
child: Container(
height: 100,
width: 100,
color: Colors.red,
),
),
),
);
}
}
Output:
References
- https://api.flutter.dev/flutter/widgets/FadeTransition-class.html
- https://www.woolha.com/tutorials/flutter-using-fadetransition-widget-examples