Android Flutter實(shí)現(xiàn)圖片滑動(dòng)切換效果

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

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

前言

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

SlideTransition 介紹

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

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

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

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

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

示例效果實(shí)現(xiàn)

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

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);

??//使用自定義曲線動(dòng)畫過渡效果
??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;
??????????});
????????},
??????),
????);
??}
}

總結(jié)

本篇介紹了 SlideTransition 轉(zhuǎn)換動(dòng)畫類及其應(yīng)用。通過 SlideTransition 我們還可以實(shí)現(xiàn)很多其他動(dòng)畫效果，例如圖片瀏覽、滑動(dòng)卡片等。

到此這篇關(guān)于Android Flutter實(shí)現(xiàn)圖片滑動(dòng)切換效果的文章就介紹到這了,更多相關(guān)Flutter圖片滑動(dòng)切換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: