前端開發當中最有意思的就是實現動畫特效，Flutter提供的各種動畫組件可以方便實現各種動畫效果。Flutter中的動畫組件主要分為兩類： 隱式動畫控制項：只需設置組件開始值，結束值，執行時間，比如AnimatedOpacity，AnimatedSize等組件。 顯式動畫控制項：需要設置Animatio ...
前端開發當中最有意思的就是實現動畫特效，Flutter提供的各種動畫組件可以方便實現各種動畫效果。Flutter中的動畫組件主要分為兩類：
- 隱式動畫控制項：只需設置組件開始值，結束值，執行時間，比如
AnimatedOpacity，AnimatedSize等組件。 - 顯式動畫控制項：需要設置
AnimationController，手動控制動畫的執行。顯式動畫可以完成隱式動畫的效果，甚至更加地可控和靈活，不過需要管理該動畫的AnimationController生命周期，AnimationController並不是一個控制項，所以需要將其放在StatefulWidget中。
不難看出，隱式動畫控制項封裝程度更高，無需管理AnimationController的生命周期，代碼因此更簡單，我們開發時應該儘量選用隱式動畫控制項。接著我們就用隱式動畫控制項來實現在web當中很常見的輪播圖。
FadeIn/FadeOut
AnimatedOpacity顧名思義就是專門設置opacity屬性值變化的動畫組件，其實就是類似css3 中的 transition: opacity time，該動畫組件可以實現漸隱漸現動畫，下麵就是實現步驟：
- 創建
StatefulWidget； - 定義組件屬性，
zIndex（類似css的z-index），樣式列表list，時間timer（實現js的setTimeout和setInterval）； - 實現動畫播放的autoPlay功能，在
initState方法中啟動自動播放的動畫，記得在dispose方法回收timer相關資源； - 佈局中
Stack和Positioned組件就是實現html中positon: relative/absolute佈局； AnimatedOpacity組件中的opacity是必須設置的屬性，curve屬性與css3中 動畫函數一樣，duration就是動畫持續的時間。
class OpacityBanner extends StatefulWidget {
@override
_OpacityBannerState createState() => _OpacityBannerState();
}
class _OpacityBannerState extends State<OpacityBanner> {
int zIndex = 0;
List<String> list = ['ff0000', '00ff00', '0000ff', 'ffff00'];
Timer timer;
//setInterval控制當前動畫元素的下標，實現動畫輪播
autoPlay() {
var second = const Duration(seconds: 2);
timer = Timer.periodic(second, (t) {
setState(() {
zIndex = (++zIndex) % list.length;
});
});
}
@override
void initState() {
super.initState();
timer = Timer(Duration(seconds: 2), autoPlay);
}
@override
void dispose() {
if (timer != null) timer.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(alignment: Alignment.center, children: [
Stack(
children: list
.asMap()
.keys
.map<Widget>((i) => AnimatedOpacity(
curve: Curves.easeIn,
duration: Duration(milliseconds: 600),
opacity: i == zIndex ? 1 : 0,
child: Container(
color: Color(int.parse(list[i], radix: 16)).withAlpha(255),
height: 300, //100%
),
))
.toList()),
Positioned(
bottom: 20,
child: Row(
children: list
.asMap()
.keys
.map((i) => Container(
width: 10,
height: 10,
margin: EdgeInsets.symmetric(horizontal: 5),
decoration:
BoxDecoration(color: i == zIndex ? Colors.blue : Colors.grey, shape: BoxShape.circle)))
.toList()))
]));
}
}
怎麼樣？實現起來非常簡單吧。
SlideIn/SlideOut
接著我們使用AnimatedContainer實現移入/移出動畫，同時加上touch事件實現手指左右滑動控制輪播圖。實現的步驟和上面的一樣，這裡只介紹用到不同組件的地方：
- 移入移出動畫和上面漸隱動畫不同的是要同時控制兩個動畫元素，分別是移出和移入的元素，使用屬性
curr和next下標表示。 AnimatedContainer組件可以控制很多的屬性，可以說是實現過渡動畫最常用的組件了。我們這裡只需要設置transform屬性即可，控制動畫的屬性上面已經介紹過。MediaQuery可以查詢很多全局的屬性，比如高度/寬度，dpr等。GestureDetector是一個事件的包裝器，這裡使用到了onHorizontalDragStart，onHorizontalDragUpdate，onHorizontalDragEnd這三個事件，即橫向拖動相關的事件。
class SlideBanner extends StatefulWidget {
@override
_SlideBannerState createState() => _SlideBannerState();
}
class _SlideBannerState extends State<SlideBanner> {
List<String> list = [
'https://upload-images.jianshu.io/upload_images/127924-dec37275411437de.jpg',
'//upload-images.jianshu.io/upload_images/127924-0999617a887bb6a3.jpg',
'//upload-images.jianshu.io/upload_images/127924-b48e22b6aef713ae.jpg',
'//upload-images.jianshu.io/upload_images/127924-b06e44e6a17caf43.jpg'
];
double dx = 0;//距離
int curr = 0;//要移出的下標
int next = 0;//要移入的下標
bool toLeft = true;//自動播放的方向，預設向左
Timer timer;
/** 輪播圖滑動相關 **/
dragStart(Offset offset) {
dx = 0;
}
//累計位移距離
dragUpdate(Offset offset) {
var x = offset.dx;
dx += x;
}
//達到一定距離後則觸發輪播圖左右滑動
dragEnd(Velocity v) {
if (dx.abs() < 20) return;
timer.cancel();
if (dx < 0) {
//向左
if (!toLeft) {
setState(() {
toLeft = true;
curr = next - 1 < 0 ? list.length - 1 : next - 1;
});
}
setState(() {
curr = next;
next = (++next) % list.length;
});
} else {
//向右
if (toLeft) {
setState(() {
toLeft = false;
curr = (next + 1) % list.length;
});
}
setState(() {
curr = next;
next = --next < 0 ? list.length - 1 : next;
});
}
//setTimeout
timer = Timer(Duration(seconds: 2), autoPlay);
}
autoPlay() {
var second = const Duration(seconds: 2);
timer = Timer.periodic(second, (t) {
setState(() {
toLeft = true;
curr = next;
next = (++next) % list.length;
});
});
}
@override
void initState() {
super.initState();
timer = Timer(Duration(seconds: 2), autoPlay);
}
@override
void dispose() {
if (timer != null) timer.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
final width = size.width;
return Scaffold(
body: GestureDetector(
onHorizontalDragStart: (details) => dragStart(details.globalPosition),
onHorizontalDragUpdate: (details) => dragUpdate(details.delta),
onHorizontalDragEnd: (details) => dragEnd(details.velocity),
child: Stack(
children: list
.asMap()
.keys
.map((i) => AnimatedContainer(
duration: Duration(milliseconds: (i == next || i == curr) ? 600 : 0),
curve: Curves.easeIn,
transform: Matrix4.translationValues(
i == next ? 0 : i == curr ? (toLeft ? -width : width) : (toLeft ? width : -width), 0, 0),
width: width,
height: 300,
child: Image.network(list[i], width: width, height:double.infinity ,fit: BoxFit.cover)))
.toList())));
}
}
