新聞中心
在同 Android 開(kāi)發(fā)者社區(qū)交流之中,我們深知?jiǎng)赢?huà)效果的加入對(duì)于 UI 來(lái)說(shuō)至關(guān)重要,它可以讓 UI 看起來(lái)更加直觀,同時(shí)還利于用戶理解其所要表達(dá)的意圖。但是,開(kāi)發(fā)者們?cè)?Android 應(yīng)用中添加復(fù)雜的動(dòng)畫(huà)效果卻有著較大的工作量。為了解決這一問(wèn)題,我們使用 Motion Layout 構(gòu)建了一組功能強(qiáng)大的 API,并為之提供了 Motion Editor 工具,組合使用時(shí)可以輕松構(gòu)建出像素級(jí)別完美的動(dòng)畫(huà)效果。 本文會(huì)帶您快速了解新的 Motion Editor 工具,以及如何在開(kāi)發(fā)過(guò)程中使用其最新功能。此外,我們還專(zhuān)門(mén)制作了一系列視頻來(lái)指導(dǎo)您關(guān)于包含 Motion Layout 在內(nèi)的一系列 API 的知識(shí)。

創(chuàng)新互聯(lián)公司作為成都網(wǎng)站建設(shè)公司,專(zhuān)注成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì),有關(guān)企業(yè)網(wǎng)站建設(shè)方案、改版、費(fèi)用等問(wèn)題,行業(yè)涉及混凝土攪拌罐等多個(gè)領(lǐng)域,已為上千家企業(yè)服務(wù),得到了客戶的尊重與認(rèn)可。
Motion Editor 是一款專(zhuān)門(mén)針對(duì) MotionLayout 布局類(lèi)型所構(gòu)建的可視化編輯器,通過(guò)它可以輕松地創(chuàng)建和預(yù)覽動(dòng)畫(huà)效果。自 Android Studio 4.0 版本開(kāi)始,我們發(fā)布了穩(wěn)定版本的 Motion Editor,許多開(kāi)發(fā)者已經(jīng)在使用它創(chuàng)建動(dòng)畫(huà)效果。
Motion Editor 中運(yùn)行的動(dòng)畫(huà)
Motion Editor 是 Android Studio Layout Editor (布局編輯器) 的一個(gè)擴(kuò)展,當(dāng)您在一個(gè)包含 MotionLayout 的 XML 文件中選擇 Design 或 Split 視圖時(shí),會(huì)自動(dòng)打開(kāi) Motion Editor。您可以使用已在布局編輯器中所熟知的交互方式來(lái)編輯布局和 Motion Scene 文件,并可以直接在 Android Studio 預(yù)覽界面中對(duì)動(dòng)畫(huà)效果進(jìn)行預(yù)覽。
Motion Editor
Motion Editor 的界面由幾個(gè)操作面板構(gòu)成,我們將會(huì)在本文進(jìn)行一一介紹。最主要的幾塊區(qū)域有: Overview (概覽) 面板,Selection (選擇) 面板,Attribute (屬性) 面板和 Preview (預(yù)覽) 面板。
Motion Editor 包含四大面板
Overview 面板
MotionLayout 可以對(duì)布局的變化做動(dòng)畫(huà)處理,在編輯器中該動(dòng)畫(huà)可被指定為 ConstraintSets 中的 Transition 效果。Motion Editor 可以通過(guò) Overview 面板將這些狀態(tài)的轉(zhuǎn)變可視化。要編輯 ConstraintSet 中的約束,點(diǎn)擊 Overview 面板中相應(yīng)的選項(xiàng)即可。
圖中的 MotionLayout Scene 中有 start 和 end 兩個(gè) ConstraintSet,它們之間有一個(gè) Transition 效果
ConstraintSets
https://developer.android.google.cn/reference/androidx/constraintlayout/widget/ConstraintSet
Selection 面板
Selection 面板會(huì)根據(jù) Overview 面板中的狀態(tài)顯示相應(yīng)的控件信息,它有三種顯示模式:
- 選中 Overview 面板中 Motion Layout 時(shí)的模式
- 選中 Overview 面板中 ConstraintSet 時(shí)的模式
- 選中 Overview 面板中 Transition 時(shí)的模式
Selection 面板根據(jù) Overview 面板的狀態(tài)有三種模式
選中 Overview 面板中 Motion Layout 時(shí)的模式
Motion Editor 支持編輯基本的 Motion Layout。當(dāng)在 Overview 面板中選中 Motion Layout 之后,您可以選擇相應(yīng)的組件來(lái)查看它的約束是否配置正確。
通過(guò) Selection 面板查看組件的約束是否配置正確
選中 Overview 面板中 ConstraintSet 時(shí)的模式當(dāng)在 Overview 面板中選中 ConstraintSet 時(shí),Selection 面板會(huì)以列表的形式列出所有組件,組件旁邊的選中圖標(biāo)意味著該組件被當(dāng)前的 ConstraintSet 所約束。
選擇包含在 ConstraintSet 中的組件
選中 Overview 面板中 Transition 時(shí)的模式
當(dāng)在 Overview 面板中選擇 transition 時(shí),您可以通過(guò)動(dòng)畫(huà)工具欄來(lái)控制動(dòng)畫(huà)的播放。當(dāng)選中某個(gè)動(dòng)畫(huà)后,點(diǎn)擊時(shí)間軸上的 Play ?? 按鈕,可以預(yù)覽動(dòng)畫(huà)效果。
在 Motion Editor 時(shí)間軸上預(yù)覽動(dòng)畫(huà)效果
關(guān)鍵幀
有時(shí)您需要修改某視圖在動(dòng)畫(huà)過(guò)程中的路徑,此時(shí)便可以借助 MotionLayout 的關(guān)鍵幀來(lái)達(dá)到目的。我們?cè)诰庉嬈髦屑闪岁P(guān)鍵幀編輯功能,讓您可以輕松對(duì)動(dòng)畫(huà)進(jìn)行調(diào)整。您可以點(diǎn)擊 Selection 面板右上角的圖標(biāo)創(chuàng)建一個(gè)新的關(guān)鍵幀,然后會(huì)打開(kāi)一個(gè)對(duì)話框,在該對(duì)話框中可以為關(guān)鍵幀設(shè)置各種屬性。若要編輯某個(gè)關(guān)鍵幀,您可以點(diǎn)擊菱形 ◆ 圖標(biāo)來(lái)打開(kāi)屬性面板進(jìn)行編輯。
在 Selection 面板中創(chuàng)建關(guān)鍵幀
Attribute 面板
在 MotionLayout 中創(chuàng)建動(dòng)畫(huà)需要編輯眾多視圖參數(shù),因此我們?cè)?Motion Editor 中引入了同 Layout Editor 類(lèi)似的 Attribute (屬性) 面板。在 Attribute 面板中不僅可以方便對(duì) Constraint 的可視化效果進(jìn)行預(yù)覽,還可以預(yù)覽 Motion Scene 文件中視圖的所有屬性效果。
在 Attribute 面板中預(yù)覽 Constraint 可視化效果
當(dāng)您想對(duì)某個(gè)視圖屬性上添加動(dòng)畫(huà)效果時(shí),而該屬性卻不屬于 ConstraintLayout 或者 MotionLayout API (比如背景色) 時(shí),可以在 Attribute 面板中創(chuàng)建自定義屬性。我們還為自定義視圖屬性添加了自動(dòng)填充和輸入驗(yàn)證的功能,方便您的操作。
Preview 面板
Preview 面板的加入使得在處理動(dòng)畫(huà)效果時(shí),能夠?qū)崿F(xiàn)快速編輯并立即獲取反饋,當(dāng)您對(duì)動(dòng)畫(huà)進(jìn)行細(xì)微調(diào)整之后,不用再去重新編譯和部署,也能直接預(yù)覽最終的動(dòng)畫(huà)效果。
我們還為 Preview 面板中添加了一些新的特性,讓開(kāi)發(fā)者們更容易理解所創(chuàng)建的動(dòng)畫(huà)是如何工作的。您可以使用 Design 視圖和 Blueprint 視圖預(yù)覽動(dòng)畫(huà),在沒(méi)有很多視覺(jué)干擾的情況下更清晰地了解視圖是如何移動(dòng)的。
我們還為視圖在屏幕上的路徑添加了可視化的功能,包括關(guān)鍵幀的標(biāo)記。我們希望這些功能能夠讓編譯器更容易解析復(fù)雜的過(guò)渡效果,并簡(jiǎn)化創(chuàng)建體驗(yàn)。
Motion Editor 已在 Android Studio 4.0 中推出,歡迎大家使用并給予我們反饋。我們非??释吹缴鐓^(qū)使用 MotionLayout 和 Motion Editor 來(lái)構(gòu)建產(chǎn)品。Android Studio 團(tuán)隊(duì)也會(huì)不斷地收集反饋以改善其使用體驗(yàn)。
網(wǎng)站名稱:Android Studio 中的 Motion Editor 用法詳解
文章路徑:http://www.fisionsoft.com.cn/article/codhsho.html


咨詢
建站咨詢
