Flutter動(dòng)畫 --- 平移/旋轉(zhuǎn)/縮放/漸變

在Flutter中Widget動(dòng)畫的核心類有下面這些：

10年積累的網(wǎng)站制作、網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先建設(shè)網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有盤山免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

Animation：動(dòng)畫庫中的一個(gè)核心類，它生成指導(dǎo)動(dòng)畫的值；

CurvedAnimation：將動(dòng)畫過程抽象為一個(gè)非線性曲線；

AnimationController：用來管理管理動(dòng)畫，常用的方法有forward()：?jiǎn)?dòng)動(dòng)畫；reverse({double from}：倒放動(dòng)畫；reset()：重置動(dòng)畫，將其設(shè)置到動(dòng)畫的開始位置；stop({ bool canceled = true })：停止動(dòng)畫。

Tween：AnimationController對(duì)象的范圍從0.0到1.0。如果您需要不同的范圍或不同的數(shù)據(jù)類型，則可以使用Tween來配置動(dòng)畫以生成不同的范圍或數(shù)據(jù)類型的值。

Android原生和Flutter使用過程的差異對(duì)比（一）

1、界面搭建過程中各種大小單位

Android：通常采用dp設(shè)置View寬高（和px像素的換算關(guān)系是dp值 × density邏輯密度），sp設(shè)置字體大小（會(huì)隨著系統(tǒng)字體設(shè)置的大小而改變）。

Flutter：沒有具體的大小單位描述， 和尺寸相關(guān)的MediaQueryData類中較為重要的幾個(gè)值如下：

（一）devicePixelRatio（設(shè)備像素比），對(duì)應(yīng)Android中的density

（二）size.width和height，設(shè)備的邏輯像素寬高，并非絕對(duì)物理像素（例如iphone6的設(shè)備像素比是2，通過size獲取到的邏輯像素寬高為375 ?×? 667，實(shí)際物理像素則為750 × 1334，即分辨率）

（三）textScaleFactor：?jiǎn)挝贿壿嬒袼刈煮w像素?cái)?shù)，默認(rèn)為1，設(shè)置成1.5則字體變大50%，如果想讓Text組件的字體大小不隨系統(tǒng)設(shè)置的變化而變化，需將這個(gè)值設(shè)定成固定值1

UI適配解決方案：

1、采用ScreenUtil插件，初始化時(shí)候傳入設(shè)計(jì)稿大小，當(dāng)發(fā)現(xiàn)一屏顯示的大小有差異時(shí)候采用插件提供的setWidth和setHeight來設(shè)置具體的寬高（會(huì)根據(jù)設(shè)計(jì)稿大小和實(shí)際設(shè)備邏輯像素寬高比進(jìn)行縮放）。

2、TextButton、Text等按鈕和文本組件，通過設(shè)置字體大小和內(nèi)邊距來控制整體的寬高，而非固定其寬高。

2、本地資源文件的引用方式

Android：圖片通常存放在res/mipmap或res/drawable下，不同分辨率對(duì)應(yīng)不同后綴名，如mipmap-hdpi、mipmap-xhdpi

Flutter：需在pubspec.yaml中配置，如下圖所示

如果只配置父級(jí)目錄例如（assets/images/common_status）則無法再存放不同尺寸的圖片。不同尺寸的圖片需建立對(duì)應(yīng)的2.0x、3.0x目錄后存放，設(shè)備在讀取時(shí)候會(huì)自行根據(jù)分辨率去找對(duì)應(yīng)的圖片，弊端是每有一張圖片就需在pubspec.yaml文件中聲明這些圖片

Flutter Transform使用介紹

窗口小部件(Widget)可以在Paint之前應(yīng)用Transform進(jìn)行轉(zhuǎn)換，通過Transform可以對(duì)widget進(jìn)行平移、旋轉(zhuǎn)、縮放等矩陣變換。不像RotatedBox在layout前就對(duì)Widget進(jìn)行旋轉(zhuǎn)操作，Transform是在Widget繪制前進(jìn)行轉(zhuǎn)換，這意味著在計(jì)算Widget的顯示需要占用多少空間時(shí)，不會(huì)去考慮Transform變換。

例子

在垂直方向移動(dòng)15個(gè)單位距離

例子

順時(shí)針旋轉(zhuǎn)45°

例子

放大1.5倍

Flutter（五）手勢(shì)GestureDetector

在Android中，每一個(gè) View 都可以通過 onTouch 方法重寫其觸摸事件，也可以通過 setOnClickListener 方法來給 View 設(shè)置點(diǎn)擊事件。但是Flutter中除了少部分組件，如 Button 相關(guān)的組件可以直接通過 onPressed 實(shí)現(xiàn)點(diǎn)擊事件。其余組件想實(shí)現(xiàn)點(diǎn)擊、長(zhǎng)按等事件，都需要借助 GestureDetector 來實(shí)現(xiàn)手勢(shì)監(jiān)聽

下面介紹比較常用的手勢(shì)如 onTap （點(diǎn)擊）、 onDoubleTap （雙擊）、 onLongPress （長(zhǎng)按）

小球跟隨手指移動(dòng)的實(shí)現(xiàn)應(yīng)該是屬于各種移動(dòng)端框架作為了解拖動(dòng)手勢(shì)的的典型案例，下面我們來看看用flutter如何實(shí)現(xiàn)小球跟隨手指移動(dòng)

拖動(dòng)手勢(shì)主要由 onPanDown （手指按下）、 onPanUpdate （手指滑動(dòng)）、 onPanEnd （滑動(dòng)結(jié)束）構(gòu)成

縮放手勢(shì)需要用到 onScaleUpdate 方法，下面是一個(gè)簡(jiǎn)單的圖片縮放的實(shí)現(xiàn)

Flutter 屏幕適配 -- 百分比

本文是根據(jù) Daniele Cambi 的文章 Flutter — Effectively scale UI according to different screen sizes 總結(jié)而來 ：

文章地址 ： （自備扶梯）

本文核心思想 ：

作者創(chuàng)建一個(gè)矩形 ：

在iPhone 5s (4" Display) and on an iPhone XS Max (6,46" Display)，

顯示效果的差異 ！！！ 如何解決這個(gè)問題呢 ？

注： Flutter 使用的 邏輯像素 logical pixels 為單位 ，和 Android的 dp還是不一樣

具體 lp 有什么效果，網(wǎng)上也沒查到具體資料????

如何解決這個(gè)問題呢 ？

作者認(rèn)為可以把屏幕認(rèn)為是一個(gè) ， 100 * 100 的格子（或者認(rèn)為水平方向和豎直方向，平均分成100個(gè)單位 ，恩 ，是不是就是Android中的百分比布局了）

作者新建一個(gè)幫助類 ：

初始化方法 ：

使用幫助類來設(shè)置widget大小 ：

效果圖 ：

在Flutter中有一個(gè)非常方便的小部件，可以有效地處理這些問題，它被稱為“安全區(qū)域”( SafeArea)。

個(gè)人理解，flutter , 把 異形屏 ，導(dǎo)航欄相關(guān)區(qū)域稱為 安全區(qū)域 。

作者的思想 ：屏幕的長(zhǎng)寬去掉安全區(qū)域的大小，然后分成 100份 ，算出每一塊的單位長(zhǎng)度 。

我們可以使用 SizeConfig.safeBlockHorizontal or SizeConfig.safeBlockVertical為單位 ，對(duì)文字進(jìn)行縮放 。

真實(shí)的軟件開發(fā)過程，一般是設(shè)計(jì)人員先設(shè)計(jì)好設(shè)計(jì)圖 or 設(shè)計(jì)稿（一般是1080px * 1920px為基準(zhǔn)），然后研發(fā)人員進(jìn)行開發(fā)

那我們就把屏幕寬和長(zhǎng) ，分成 1080 和 1920 個(gè)單位 ，然后按設(shè)計(jì)圖上的標(biāo)注去填寫相應(yīng)widgets的大小

所以我認(rèn)為 flutter 非常適合百分比布局（天生適合按比例布局）

而Android 百分比布局，適配工作量非常大，兼容性差

在網(wǎng)上發(fā)現(xiàn)了一個(gè)開源庫 ，原理我覺得差不多，大家可以學(xué)習(xí)一下

flutter_screenutil

如果覺得文章有用，幫忙點(diǎn)個(gè)喜歡?? ，????????????

Flutter 滑動(dòng)、縮放控件

onInteractionEnd 交互結(jié)束

onInteractionStart 交互開始

onInteractionUpdate 滑動(dòng)時(shí)候一直會(huì)回調(diào)

focalPoint 是相對(duì)于屏幕左上角的偏移量。

localFocalPoint是相對(duì)于父容器區(qū)域左上角的偏移量。

scale縮放量。

horizontalScale水平縮放量。

verticalScale豎直縮放量。

rotation旋轉(zhuǎn)量。------ 這里說明能監(jiān)聽到旋轉(zhuǎn)量

還可以通過transformationController進(jìn)行變換控制，有興趣的可以自己研究。

參考文章

網(wǎng)頁名稱：flutter縮放,fluent縮放
分享鏈接：http://chinadenli.net/article7/dsgssij.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、軟件開發(fā)、手機(jī)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、Google、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)