Flutter上線項(xiàng)目實(shí)戰(zhàn)——Vap視頻動(dòng)畫(huà)

透明視頻動(dòng)畫(huà)是目前比較流行的實(shí)現(xiàn)動(dòng)畫(huà)的一種, 大廠也相繼開(kāi)源自己的框架，最終我們選中 騰訊vap ，它支持了Android、IOS、Web，為我們封裝flutter_vap提供了天然的便利，并且它提供了將幀圖片生成帶alpha通道視頻的工具，這簡(jiǎn)直太贊了。

專注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)和碩免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

VAP（Video Animation Player）是企鵝電競(jìng)開(kāi)發(fā)，用于播放酷炫動(dòng)畫(huà)的實(shí)現(xiàn)方案。

video for youtube

video for qiniu

apk download

github

Flutter快速上手6：基礎(chǔ)布局之流式布局Wrap

本地Flutter 2.10.1，Mac版Android Studio Bumblebee | 2021.1.1 Patch 2

我是小栗子，初學(xué)Flutter ，文章會(huì)根據(jù)學(xué)習(xí)進(jìn)度不定時(shí)更新，請(qǐng)多多指教~~

flutter中流式布局

流式布局（Liquid）的特點(diǎn)（也叫"Fluid") 是頁(yè)面元素的寬度按照屏幕分辨率進(jìn)行適配調(diào)整，但整體布局不變。柵欄系統(tǒng)（網(wǎng)格系統(tǒng)），用戶標(biāo)簽等。在Flutter中主要有Wrap和Flow兩種Widget實(shí)現(xiàn)。

在介紹Row和Colum時(shí)，如果子widget超出屏幕范圍，則會(huì)報(bào)溢出錯(cuò)誤，在Flutter中通過(guò)Wrap和Flow來(lái)支持流式布局，溢出部分則會(huì)自動(dòng)折行。

上述有很多屬性和Row的相同，其意義其實(shí)也是相同的，這里我就不一一介紹了，主要介紹下不同的屬性：

我們一般很少會(huì)使用Flow，因?yàn)槠溥^(guò)于復(fù)雜，需要自己實(shí)現(xiàn)子widget的位置轉(zhuǎn)換，在很多場(chǎng)景下首先要考慮的是Wrap是否滿足需求。Flow主要用于一些需要自定義布局策略或性能要求較高(如動(dòng)畫(huà)中)的場(chǎng)景。Flow有如下優(yōu)點(diǎn)：

我們對(duì)六個(gè)色塊進(jìn)行自定義流式布局：

實(shí)現(xiàn)TestFlowDelegate:

可以看到我們主要的任務(wù)就是實(shí)現(xiàn)paintChildren，它的主要任務(wù)是確定每個(gè)子widget位置。由于Flow不能自適應(yīng)子widget的大小，我們通過(guò)在getSize返回一個(gè)固定大小來(lái)指定Flow的大小，實(shí)現(xiàn)起來(lái)還是比較麻煩的。

flutter-動(dòng)畫(huà)

1.動(dòng)畫(huà)原理：在一段時(shí)間內(nèi)快速的多次改變UI外觀，由于人眼會(huì)產(chǎn)生視覺(jué)暫留所以最終看到的就是一個(gè)連續(xù)的動(dòng)畫(huà)。

UI的一次改變稱為一個(gè)動(dòng)畫(huà)幀，對(duì)應(yīng)一次屏幕刷新。

FPS：幀率，每秒的動(dòng)畫(huà)幀數(shù)。

flutter動(dòng)畫(huà)分為兩類：

常見(jiàn)動(dòng)畫(huà)模式：

是一個(gè)抽象類，主要的功能是保存動(dòng)畫(huà)的值和狀態(tài)。常用的一個(gè)Animation類是Animation double ,是一個(gè)在一段時(shí)間內(nèi)依次生成一個(gè)區(qū)間之間的值的類，可以是線性或者曲線或者其他。

可以生成除double之外的其他類型值，如：Animation Color 或 Animation Size 。

是一個(gè)動(dòng)畫(huà)控制器，控制動(dòng)畫(huà)的播放狀態(tài)，在屏幕刷新的每一幀，就會(huì)生成一個(gè)新的值。

包含動(dòng)畫(huà)的啟動(dòng)forward()、停止stop() 、反向播放 reverse()等方法，在給定的時(shí)間段內(nèi)線性的生成從0.0到1.0（默認(rèn)區(qū)間）的數(shù)字。

curve:描述動(dòng)畫(huà)的曲線過(guò)程。

curvedAnimation:指定動(dòng)畫(huà)的曲線。

常用Curve：

繼承自Animatable T ，表示的就是一個(gè) Animation 對(duì)象的取值范圍，只需要設(shè)置開(kāi)始和結(jié)束的邊界值(值也支持泛型)。 它唯一的工作就是定義輸入范圍到輸出范圍的映射。

例如，Tween可能會(huì)生成從紅到藍(lán)之間的色值，或者從0到255。

Tween.animate:返回一個(gè)Animation。

映射過(guò)程：

1). Tween.animation通過(guò)傳入 aniamtionController 獲得一個(gè)_AnimatedEvaluation 類型的 animation 對(duì)象(基類為 Animation)， 并且將 aniamtionController 和 Tween 對(duì)象傳入了 _AnimatedEvaluation 對(duì)象。

2). animation.value方法即是調(diào)用 _evaluatable.evaluate(parent)方法， 而 _evaluatable 和 parent 分別為 Tween 對(duì)象和 AnimationController 對(duì)象。

3). 這里的 animation 其實(shí)就是前面的 AnimationController 對(duì)象， transform 方法里面的 animation.value則就是 AnimationController 線性生成的 0.0~1.0 直接的值。 在 lerp 方法里面我們可以看到這個(gè) 0.0~1.0 的值被映射到了 begin 和 end 范圍內(nèi)了。

接收一個(gè)TickerProvider類型的對(duì)象，它的主要職責(zé)是創(chuàng)建Ticker。

防止屏幕外動(dòng)畫(huà)消耗資源。

[圖片上傳失敗...(image-115b94-1636441483468)]

過(guò)程：

回調(diào)：

不使用addListener()和setState()來(lái)給widget添加動(dòng)畫(huà)。

使用AnimatedWidget，將widget分離出來(lái)，創(chuàng)建一個(gè)可重用動(dòng)畫(huà)的widget，AnimatedWidget中會(huì)自動(dòng)調(diào)用addListener()和setState()

AnimatedModalBarrier、DecoratedBoxTransition、FadeTransition、PositionedTransition、RelativePositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition

如何渲染過(guò)渡，把渲染過(guò)程也抽象出來(lái)：

AnimatedBuilder的示例包括: BottomSheet、 PopupMenu、ProgressIndicator、RefreshIndicator、Scaffold、SnackBar、TabBar。

MaterialPageRoute：平臺(tái)風(fēng)格一致的路由切換動(dòng)畫(huà)

CupertinoPageRoute：左右切換風(fēng)格

自定義：PageRouteBuilder

1.要?jiǎng)?chuàng)建交織動(dòng)畫(huà)，需要使用多個(gè)動(dòng)畫(huà)對(duì)象（Animation）。

2.一個(gè)AnimationController控制所有的動(dòng)畫(huà)對(duì)象。

3.給每一個(gè)動(dòng)畫(huà)對(duì)象指定時(shí)間間隔（Interval）

可以同時(shí)對(duì)其新、舊子元素添加顯示、隱藏動(dòng)畫(huà).

當(dāng)AnimatedSwitcher的child發(fā)生變化時(shí)（類型或Key不同），舊child會(huì)執(zhí)行隱藏動(dòng)畫(huà)，新child會(huì)執(zhí)行執(zhí)行顯示動(dòng)畫(huà)。

希望大家支持一下，感謝

Flutter 之 流式布局（Wrap、Flow）

流式布局在移動(dòng)端是非常常見(jiàn)的，比如商品列表，瀑布流、標(biāo)簽頁(yè)等等

Flutter 中提供了兩種流式布局Wrap和Flow

Wrap可以進(jìn)行水平方向或者垂直方向上的布局,在一行或者一列現(xiàn)實(shí)不完所有的widgets的時(shí)候，能夠根據(jù)當(dāng)前寬度或者高度自動(dòng)換行。

alignment 不管設(shè)置什么屬性都不能調(diào)整第一行的位置

包裹一個(gè)Container來(lái)看，當(dāng)前Wrap沒(méi)有占滿全屏

把Container占滿全屏才表現(xiàn)下面效果

我們一般很少會(huì)使用Flow，因?yàn)槠溥^(guò)于復(fù)雜，需要自己實(shí)現(xiàn)子組件的位置轉(zhuǎn)換，所以在很多場(chǎng)景下首先要考慮的是Wrap是否滿足需求。Flow主要用于一些需要自定義布局策略或性能要求較高（如動(dòng)畫(huà)中）的場(chǎng)景。

Flutter 仿抖音效果 (一) 全屏點(diǎn)愛(ài)星

項(xiàng)目地址: 持續(xù)效果更新

flutter 有個(gè)onTapUp 事件,字面意思就是 點(diǎn)擊抬起的,會(huì)返回 TapUpDetails details ,通過(guò) localPosition 屬性就能獲取到x,y坐標(biāo)

計(jì)算double 并不復(fù)雜,每次點(diǎn)擊的時(shí)候記錄下當(dāng)前的事件戳,只要兩個(gè)點(diǎn)擊的時(shí)間戳和坐標(biāo)距離小于自己設(shè)定的閾值,就可以視為雙擊事件

實(shí)現(xiàn)雙擊

我們使用OverlayEntry 控件,控件詳細(xì)介紹

效果一共有 縮小 → 上移 → 放大 → 消失

第一組動(dòng)畫(huà)(縮小 上移) → 第二組動(dòng)畫(huà)(放大 消失)

flutter 動(dòng)畫(huà)需要兩個(gè)類

AnimationController 負(fù)責(zé)管理動(dòng)畫(huà)

Animation 負(fù)責(zé)具體值操作

然后通過(guò) Transform.scale 函數(shù)的,對(duì)scale值進(jìn)行改變

補(bǔ)全第一組動(dòng)畫(huà)

現(xiàn)實(shí)

項(xiàng)目地址: 持續(xù)效果更新

新聞標(biāo)題：關(guān)于flutter流式動(dòng)畫(huà)的信息
標(biāo)題網(wǎng)址：http://chinadenli.net/article48/dsgjsep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、企業(yè)建站、商城網(wǎng)站、網(wǎng)站營(yíng)銷、外貿(mào)建站、軟件開(kāi)發(fā)

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)