快捷導航

Android Flutter實現(xiàn)圖片滑動切換效果

更新時間：2022年04月07日 08:37:29 作者：島上碼農(nóng)

Flutter 為了簡化開發(fā)，提供了不少轉(zhuǎn)換動畫組件，這類組件通常命名為 xxTransition。本篇要介紹的就是 SlideTransition，并用它實現(xiàn)圖片滑動切換效果，感興趣的可以了解一下

前言

我們開始來介紹轉(zhuǎn)換類的動畫組件，實際上這類轉(zhuǎn)換動畫組件也可以自己通過 AnimatedBuilder 或 AnimatedWidget 完成， Flutter 為了簡化開發(fā)，提供了不少轉(zhuǎn)換動畫組件，這類組件通常命名為 xxTransition。本篇要介紹的就是 SlideTransition，顧名思義，就知道是滑動轉(zhuǎn)換動畫。我們本篇來實現(xiàn)兩張小姐姐圖片的滑動切換，效果如下圖所示。

SlideTransition 介紹

SlideTransition 實際上是 AnimatedWidget 子類，其構(gòu)造方法定義如下：

const?SlideTransition({
??Key??key,
??required?Animation<Offset>?position,
??this.transformHitTests?=?true,
??this.textDirection,
??this.child,
})

其中 position 是關(guān)鍵參數(shù)，它表示一個位置偏移的動畫，實際上就是通過修改子組件的位置偏移量來完成滑動動畫效果的?；仡櫼幌挛覀?AnimatedWidget 的使用的介紹：Flutter 怎么實現(xiàn)3D 動畫效果？只要我們通過一個 AnimationController 控制 Animation 對象就可以實現(xiàn)動畫的控制。使用 SlideTransition 也是一樣。我們想要實現(xiàn)組件滑動，那就使用 AnimationController 控制一個 Animation<Offset> 對象就可以了。這里需要注意，position 設(shè)定的位置是一個比例參數(shù)，即位置是子組件的尺寸乘以 Offset 對象的值。

new_x?=?width?*?dx;
new_y?=?height?*?dy;

比如我們想讓組件從左邊滑入，那么可以設(shè)置 dx 為負值；而如果是想從右邊滑入，那么可以設(shè)置 dx 為正值。同理，想上滑入或下滑入也是一樣，只是調(diào)整 dy 的值就可以了。而通過 dx 和 dy 的組合，就可以實現(xiàn)斜線方向的滑入滑出效果了。

示例效果實現(xiàn)

示例動效實際上我們使用的是一個 Stack 組件，將兩張圖片分別作為兩個 SlideTransition 的子組件層疊在一起。而把那張未出現(xiàn)的圖片的初始橫向位置設(shè)置在左側(cè)顯示區(qū)域外。當啟動動畫的時候，之前顯示的圖片的橫向位置調(diào)整到右側(cè)顯示區(qū)域外，從而實現(xiàn)右側(cè)滑出效果；原先在左側(cè)顯示區(qū)域外的圖片的橫向位置調(diào)整到0，使得占據(jù)之前圖片的位置，從而實現(xiàn)左側(cè)滑入的效果。點擊按鈕的時候，就是控制 AnimationController 的forward方法驅(qū)動動畫，然后再次點擊到時候調(diào)用 reverse 方法恢復即可。代碼如下：

class?SlideTransitionDemo?extends?StatefulWidget?{
??SlideTransitionDemo({Key??key})?:?super(key:?key);

??@override
??_SlideTransitionDemoState?createState()?=>?_SlideTransitionDemoState();
}

class?_SlideTransitionDemoState?extends?State<SlideTransitionDemo>
????with?SingleTickerProviderStateMixin?{
??bool?_forward?=?true;
??final?begin?=?Offset.zero;
??//?第一張圖片結(jié)束位置移出右側(cè)屏幕
??final?end1?=?Offset(1.1,?0.0);
??//?第二張圖片的初始位置在左側(cè)屏幕
??final?begin2?=?Offset(-1.1,?0.0);
??late?Tween<Offset>?tween1?=?Tween(begin:?begin,?end:?end1);
??late?Tween<Offset>?tween2?=?Tween(begin:?begin2,?end:?begin);

??late?AnimationController?_controller?=
??????AnimationController(duration:?const?Duration(seconds:?1),?vsync:?this);

??//使用自定義曲線動畫過渡效果
??late?Animation<Offset>?_animation1?=?tween1.animate(
????CurvedAnimation(
??????parent:?_controller,
??????curve:?Curves.easeInOut,
????),
??);
??late?Animation<Offset>?_animation2?=?tween2.animate(CurvedAnimation(
????parent:?_controller,
????curve:?Curves.easeInOut,
??));

??@override
??Widget?build(BuildContext?context)?{
????return?Scaffold(
??????appBar:?AppBar(
????????title:?Text('SlideTransition'),
????????brightness:?Brightness.dark,
????????backgroundColor:?Colors.black,
??????),
??????backgroundColor:?Colors.black,
??????body:?Center(
????????child:?Container(
??????????padding:?EdgeInsets.all(10.0),
??????????child:?Stack(
????????????children:?[
??????????????SlideTransition(
????????????????child:?ClipOval(
??????????????????child:?Image.asset('images/beauty.jpeg'),
????????????????),
????????????????position:?_animation1,
??????????????),
??????????????SlideTransition(
????????????????child:?ClipOval(
??????????????????child:?Image.asset('images/beauty2.jpeg'),
????????????????),
????????????????position:?_animation2,
??????????????),
????????????],
??????????),
????????),
??????),
??????floatingActionButton:?FloatingActionButton(
????????child:?Icon(Icons.swap_horizontal_circle_sharp),
????????onPressed:?()?{
??????????setState(()?{
????????????if?(_forward)?{
??????????????_controller.forward();
????????????}?else?{
??????????????_controller.reverse();
????????????}
????????????_forward?=?!_forward;
??????????});
????????},
??????),
????);
??}
}