Android利用Flutter實(shí)現(xiàn)立體旋轉(zhuǎn)效果
前言
之前我們提到了 CustomPaint er
的 Paint
可以使用漸變(GradientShader
)來填充繪制的圖形,本篇我們來介紹使用圖片填充,并且配合動畫實(shí)現(xiàn)“立體”旋轉(zhuǎn)效果,之所以給“立體”加上引號,是因?yàn)閷?shí)際是通過填充圖片自身的光影效果旋轉(zhuǎn)后看起來像是立體效果一樣。下面是實(shí)現(xiàn)的效果圖。
ImageShader 簡介
ImageShader
的定義如下,我們來看看各個參數(shù)的用途。
image
:用于填充的圖像,是Image
類,注意這個Image
類定義在dart:ui
庫中,并不是我們用于構(gòu)建圖像組件的Widget
下面的Image
類。tmx
:圖形在 x 軸的處理方式,即當(dāng)被填充的寬度與圖片寬度不匹配時,在橫軸方向如何填充。tmy
:圖形在y 軸的處理方式,即當(dāng)被填充的高度與圖片高度不匹配時,在縱軸方向如何填充。matrix4
:對填充圖像的三維空間的平移、旋轉(zhuǎn)等變換操作。filterQuality
:當(dāng)圖片尺寸和被填充圖形的尺寸不一致時,采樣的質(zhì)量,有高(high
)、中 (medium
)、低(low
)三類。
ImageShader( Image image, TileMode tmx, TileMode tmy, Float64List matrix4, { FilterQuality? filterQuality, } )
tmx
和 tmy
是 TileMode
枚舉,有以下幾種取值:
clamp
:圖片不能完整填充圖形時,使用最接近圖形邊緣的顏色進(jìn)行填充,其實(shí)就是邊緣的延伸。比如同時這是 tmx 和 tmy 都為 TileMode.clamp
的時候的效果圖如下。
repeated
:這個好理解,就是在各自方向重復(fù)。
decal
:就是這個方向不做任何處理,使用透明填充,比如我們將上面的 tmy
改成 decal
,就只會在 x 軸重復(fù)了。
mirror
:顧名思義,就是鏡像填充,下面是 tmx
為 mirror
,tmy
為 repeated
的效果圖。
構(gòu)建 ui.Image對象
要使用 ImageShader
,我們首先要從圖片資源中構(gòu)建ui.Image
對象。這需要將圖片文件按ByteData
二進(jìn)制方式讀取,在將二進(jìn)制文件解碼成為 ui.Image
對象。這個操作是異步的,因此在操作沒完成前不能使用圖像資源,我們設(shè)置了一個isImageLoaded
布爾值標(biāo)識圖像是否加載完成。
final ByteData data = await rootBundle.load('images/beauty.jpg'); fillImage = await loadImage(Uint8List.view(data.buffer)); Future<ui.Image> loadImage(Uint8List img) async { final Completer<ui.Image> completer = Completer(); ui.decodeImageFromList(img, (ui.Image img) { setState(() { isImageLoaded = true; }); return completer.complete(img); }); return completer.future; }
使用 ImageShader 填充形狀
使用 ImageShader
填充和 GradientShader
類似,按我們上面說的參數(shù)構(gòu)建一個 ImageShader
對象就可以了,代碼如下。注意,Paint
對象的填充方式必須是 fill
,如果是空心的話是看不到效果的。
@override void paint(Canvas canvas, Size size) { var paint = Paint(); paint.style = PaintingStyle.fill; paint.shader = ImageShader( image, TileMode.mirror, TileMode.repeated, Matrix4.identity().storage, filterQuality: FilterQuality.high, ); canvas.drawRect(Rect.fromLTRB(0, 0, size.width, size.height), paint); }
立體旋轉(zhuǎn)效果實(shí)現(xiàn)
立體效果需要利用填充圖像的光影效果,因此我們需要找一張圖片,比如明暗不同,或色彩不同的,這樣旋轉(zhuǎn)起來就會感覺是立體的。旋轉(zhuǎn)的話使用 Matrix4的旋轉(zhuǎn)變換就行。同時,為了讓旋轉(zhuǎn)過程展示的圖像不固定,我們旋轉(zhuǎn)的時候可以通過Matrix4的平移顯示不同圖形的區(qū)域。下面是我們用于測試的兩張圖片。
實(shí)現(xiàn)的代碼如下所示,其中animationValue
是動畫過程中 Animation
對象的值,我們的動畫時長設(shè)置為10秒。這里我們繪制的其實(shí)是一個圓形,只是因?yàn)樘畛鋱D像在不停的旋轉(zhuǎn),且展示的圖像不同就看起來有了立體效果。
void paint(Canvas canvas, Size size) { var paint = Paint(); paint.style = PaintingStyle.fill; paint.shader = ImageShader( image, TileMode.mirror, TileMode.mirror, (Matrix4.identity() ..translate(5 * animationValue, 5 * animationValue) ..scaled(0.5) ..rotateZ(2 * pi * animationValue)) .storage, filterQuality: FilterQuality.high, ); Offset center = Offset(size.width / 2, size.height / 2); canvas.drawCircle(center, 200, paint); }
下圖是換了星球圖片的運(yùn)行效果,大家也可以調(diào)整 ImageShader
的參數(shù)看看其他參數(shù)的效果。
總結(jié)
源碼已經(jīng)提交至:繪圖相關(guān)源碼,文件名為:image_shader_demo.dart
。本篇介紹了 Flutter 繪圖使用 ImageShader
填充圖形,并且利用 Matrix4
的三維變換加上動畫實(shí)現(xiàn)了立體旋轉(zhuǎn)的動畫效果。隨著對 Flutter 繪圖的深入,我們會發(fā)現(xiàn)繪圖覆蓋的面非常廣,也能夠?qū)崿F(xiàn)更多有趣的效果。
以上就是Android利用Flutter實(shí)現(xiàn)立體旋轉(zhuǎn)效果的詳細(xì)內(nèi)容,更多關(guān)于Android Flutter立體旋轉(zhuǎn)的資料請關(guān)注腳本之家其它相關(guān)文章!
- Android?Flutter實(shí)現(xiàn)搜索的三種方式詳解
- Android Flutter圖片處理之高斯模糊的實(shí)現(xiàn)
- Android使用Flutter實(shí)現(xiàn)錄音插件
- Android?Flutter繪制有趣的?loading加載動畫
- Android Flutter利用CustomPaint繪制基本圖形詳解
- Android Flutter制作交錯動畫的示例代碼
- Android Flutter表格組件Table的使用詳解
- Android Flutter實(shí)現(xiàn)GIF動畫效果的方法詳解
- Android Flutter實(shí)現(xiàn)原理淺析
相關(guān)文章
Android實(shí)現(xiàn)短信、微信、微博分享功能
微信、微博分享功能大家都體驗(yàn)過吧,非常方便我們的生活,下面通過本文給大家介紹Android實(shí)現(xiàn)短信、微信、微博分享功能,需要的朋友參考下吧2017-12-12Android UI設(shè)計(jì)與開發(fā)之實(shí)現(xiàn)應(yīng)用程序只啟動一次引導(dǎo)界面
這篇文章主要為大家詳細(xì)介紹了Android UI設(shè)計(jì)與開發(fā)之實(shí)現(xiàn)應(yīng)用程序只啟動一次引導(dǎo)界面,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-085個Android開發(fā)中比較常見的內(nèi)存泄漏問題及解決辦法
本文主要介紹了5個Android開發(fā)中比較常見的內(nèi)存泄漏問題及解決辦法,具有很好的參考價值,下面跟著小編一起來看下吧2017-02-02Android自定義View實(shí)現(xiàn)閃耀字體效果
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)閃耀字體效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01flutter FadeTransition實(shí)現(xiàn)透明度漸變動畫
這篇文章主要為大家詳細(xì)介紹了flutter FadeTransition實(shí)現(xiàn)透明度漸變動畫,具有一定的參考價值,感興趣的小伙伴們可以參考一下2019-07-07