Android5.0新特性詳解之全新的動畫
在Material Design設(shè)計(jì)中,為用戶與app交互反饋他們的動作行為和提供了視覺上的連貫性。Material主題為控件和Activity的過渡提供了一些默認(rèn)的動畫,在android L上,允許自定義這些動畫:
Touch feedback 觸摸反饋
Circular Reveal 圓形展示
Curved motion 曲線運(yùn)動
View state changes 視圖狀態(tài)變化
Vector Drawables 矢量圖動畫
Activity transitions 活動轉(zhuǎn)場
觸摸反饋
觸摸反饋是指用戶在觸摸控件時的一種可視化交互,在Android L之前,通常是通過press色變來凸顯,但是因?yàn)槭撬查g變化的效果,不如動畫生動。
在Android L使用了RippleDrawable類,用一個水波紋擴(kuò)散效果在兩種不同的狀態(tài)間過渡。
使用Material Design樣式的應(yīng)用,button默認(rèn)帶有該效果。除了默認(rèn)的效果外,系統(tǒng)還提供了另外兩種效果,我們只把button的背景指定為:
?android:attr/selectableItemBackground`
?android:attr/selectableItemBackgroundBorderless`
任何view處于可點(diǎn)擊狀態(tài),都可以使用RippleDrawable來達(dá)到水波紋特效。
我們也可以通過設(shè)置RippleDrawable的顏色屬性來調(diào)節(jié)動畫顏色,系統(tǒng)默認(rèn)的顏色為主題的一個屬性顏色:
android:colorControlHighlight,所以我們可以通過修改該顏色值來統(tǒng)一修改默認(rèn)的水波紋顏色。android:colorAccent可以修改checkbox的選中顏色,更多顏色設(shè)置請參考主題。
系統(tǒng)的三種觸摸反饋都是通過xml構(gòu)建的,內(nèi)容如下:
默認(rèn):
<ripplexmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:attr/colorControlHighlight"> <item> <inset android:insetLeft="4dp" android:insetTop="6dp" android:insetRight="4dp" android:insetBottom="6dp"> <shape android:shape="rectangle"> <corners android:radius="2dp"/> <solid android:color="?android:attr/colorButtonNormal"/> <padding android:left="8dp" android:top="4dp" android:right="8dp" android:bottom="4dp"/> </shape> </inset> </item> </ripple>
?android:attr/selectableItemBackground
<ripplexmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:attr/colorControlHighlight"> <item android:id="@android:id/mask"> <color android:color="@android:color/white"/> </item> </ripple>
?android:attr/selectableItemBackgroundBorderless
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:attr/colorControlHighlight"/>
代碼設(shè)置
RippleDrawableColorStateList stateList = getResources().getColorStateList(R.color.tint_state_color); RippleDrawable rippleDrawable = new RippleDrawable(stateList,null,null); view.setBackground(rippleDrawable);
圓形展示
我們通常會顯示或者隱藏一個view,在Android L之前,這是一個生硬瞬間變化動作,現(xiàn)在,有了一個新的api為此效果提供一個圓形的顯示或者隱藏的動畫效果。
RevealAnimator和之前的動畫使用沒什么區(qū)別,同樣可以設(shè)置監(jiān)聽器和加速器來實(shí)現(xiàn)各種各樣的特效,該動畫主要用在隱藏或者顯示一個view,改變view的大小等過渡效果。
通過ViewAnimationUtils.createCircularReveal來創(chuàng)建一個動畫,該api接受5個參數(shù)
view :操作的視圖
centerX: 動畫開始的中心點(diǎn)X
centerY :動畫開始的中心點(diǎn)Y
startRadius: 動畫開始半徑
startRadius :動畫結(jié)束半徑
沿著中心的縮小的動畫
Animatoranimator = ViewAnimationUtils.createCircularReveal( view, //操作的視圖 view.getWidth() / 2,//動畫開始的中心點(diǎn)X view.getHeight() / 2,//動畫開始的中心點(diǎn)Y view.getWidth(),//動畫開始半徑 0 //動畫結(jié)束半徑 ); animator.setInterpolator(newLinearInterpolator()); animator.setDuration(1000); animator.start();
從左上角擴(kuò)展的圓形動畫
Animatoranimator = ViewAnimationUtils.createCircularReveal( view,0,0,0,(float) Math.hypot(view.getWidth(), view.getHeight())); animator.setDuration(1000); animator.start();
曲線運(yùn)動
曲線動畫在Android L之前我們可以通過繼承位移動畫重載applyTransformation函數(shù)來實(shí)現(xiàn)運(yùn)動軌跡算法,但是操作起來比較繁瑣:
通過繼承位移動畫,來改寫applyTransformation來修改位移的軌跡
public classArcTranslateAnimationextendsAnimation { private float mFromXValue,mToXValue,mFromYValue,mToYValue; private float mFromXDelta,mToXDelta,mFromYDelta,mToYDelta; private PointF mStart,mControl,mEnd; public ArcTranslateAnimation(floatfromXValue, floattoXValue, floatfromYValue, floattoYValue) { mFromXValue = fromXValue; mToXValue = toXValue; mFromYValue = fromYValue; mToYValue = toYValue; } protected void applyTransformation(floatinterpolatedTime,Transformationt) { float dx =calcBezier(interpolatedTime,mStart.x,mControl.x,mEnd.x); float dy =calcBezier(interpolatedTime,mStart.y,mControl.y,mEnd.y); t.getMatrix().setTranslate(dx,dy); } public void initialize(intwidth, intheight, intparentWidth, intparentHeight) { super.initialize(width,height,parentWidth,parentHeight); mFromXDelta = resolveSize(ABSOLUTE,mFromXValue,width,parentWidth); mToXDelta = resolveSize(ABSOLUTE,mToXValue,width, parentWidth); mFromYDelta = resolveSize(ABSOLUTE,mFromYValue,height,parentHeight); mToYDelta = resolveSize(ABSOLUTE,mToYValue,height, parentHeight); mStart =newPointF(mFromXDelta,mFromYDelta); mEnd =newPointF(mToXDelta,mToYDelta); mControl =newPointF(mFromXDelta,mToYDelta); } private long calcBezier(floatinterpolatedTime, floatp0, floatp1, float p2) { return Math.round((Math.pow((1- interpolatedTime),2) * p0) + (2 * (1-interpolatedTime) * interpolatedTime * p1) + (Math.pow(interpolatedTime,2) * p2); } }
現(xiàn)在我們有了更簡單的實(shí)現(xiàn)方式。
ObjectAnimator新增了path方式來構(gòu)建動畫,并且可以同時對x,y兩個屬性做動畫,我們只用指定一個曲線的path,即可作出曲線的動畫,可以用quadTo/cubicTo繪制貝塞爾曲線,也可以使用arcTo繪制普通的弧線
新增了PathInterpolator動畫插入器,新的基于貝塞爾曲線或路徑對象的插入器。這個插入器指定了一個1x1正方形運(yùn)動曲線,它使用(0,0)為錨點(diǎn),(1,1)為控制點(diǎn),作為構(gòu)造函數(shù)的參數(shù)。
視圖狀態(tài)變化
Android L在原有的圖片選擇器和顏色選擇器上進(jìn)行了增強(qiáng),不僅是控件能根據(jù)不同的狀態(tài)顯示不同的背景圖片,還能在兩種狀態(tài)切換時指定一個動畫,來增加過渡效果,吸引用戶眼球,以突出重點(diǎn)內(nèi)容。
StateListAnimator類和圖片選擇器,顏色選擇器類似,可以根據(jù)view的狀態(tài)改變呈現(xiàn)不同的動畫效果,通過xml我們可以構(gòu)建對應(yīng)不同狀態(tài)的動畫合集,其使用方式也非常簡單,在對應(yīng)的狀態(tài)指定一個屬性動畫即可:
<selectorxmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <set> <objectAnimator android:propertyName="translationZ" android:duration="200" android:valueTo="20dp" android:valueType="floatType"/> </set> </item> <item android:state_enabled="true"android:state_pressed="false"> <set> <objectAnimator android:propertyName="translationZ" android:duration="200" android:valueTo="0" android:valueType="floatType"/> </set> </item> </selector>
在xml中通過android:stateListAnimator來指定狀態(tài)動畫,代碼中可以通過AnimationInflater.loadStateListAnimator()加載動畫,并使用View.setStateListAnimator()將其指定給View。
可以在狀態(tài)切換的過程指定多個屬性動畫的合集,繼承了Material主題后,按鈕默認(rèn)擁有了z屬性動畫。如果想取消這種默認(rèn)狀態(tài),可以把狀態(tài)動畫指定為null。
除了StateListAnimator類指定狀態(tài)切換的屬性動畫外,還可以通過AnimatedStateListDrawable來指定狀態(tài)切換的幀動畫:
<animated-selectorxmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/pressed"android:drawable="@drawable/btn_check_15" android:state_pressed="true"/> <item android:id="@+id/normal" android:drawable="@drawable/btn_check_0"/> <transition android:fromId="@+id/normal"android:toId="@+id/pressed"> <animation-list> <item android:duration="20"android:drawable="@drawable/btn_check_0"/> <item android:duration="20"android:drawable="@drawable/btn_check_1"/> <item android:duration="20"android:drawable="@drawable/btn_check_2"/> </animation-list> </transition> </animated-selector>
矢量圖動畫
前面我們學(xué)習(xí)了矢量圖,AnimatedVectorDrawable類讓你能使一個矢量圖動起來。矢量圖動畫比幀動畫更平滑的展現(xiàn)圖片的變化過程,并且無論在內(nèi)存占用,還是包體積占用上都要優(yōu)于幀動畫。通常定義一個矢量圖動畫需要三步:
在drawable資源目錄下定義一個矢量圖
<vectorxmlns:android="http://schemas.android.com/apk/res/android" android:height="64dp" android:width="64dp" android:viewportHeight="600" android:viewportWidth="600"> <group android:name="rotationGroup" android:pivotX="300.0" android:pivotY="300.0" android:rotation="45.0"> <path android:name="v" android:fillColor="#000000" android:pathData="M300,70 l0,-70 70,70 0,0 -70,70z"/> </group> </vector>
在anim下頂一個objectAnimator,并在動畫中修改矢量圖的path
<setxmlns:android="http://schemas.android.com/apk/res/android"> <objectAnimator android:duration="3000" android:propertyName="pathData" android:valueFrom="M300,70 l0,-70 70,70 0,0 -70,70z" android:valueTo="M300,70 l0,-70 70,0 0,140 -70,0z" android:valueType="pathType"/> </set>
在drawable下定義一個animated-vector,并把drawable指向矢量圖,把target中的動畫指定為之前定義的objectAnimator
<animated-vectorxmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/vector_drawable"> <target android:name="v" android:animation="@anim/vector_anim"/> </animated-vector>
轉(zhuǎn)場動畫
在Android L之前,我們可以在startActivity之后調(diào)用overridePendingTransition來指定Activity的轉(zhuǎn)場動畫?,F(xiàn)在Android L給我們帶來了更絢麗的轉(zhuǎn)場動畫。
新的轉(zhuǎn)場動畫分為兩大類,一種是普通的過渡動畫,另一種是共享元素的過渡動畫。
要想使用新的轉(zhuǎn)場動畫,可以繼承Material Design主題后在style風(fēng)格中指定:
<stylename="DefaultTheme"parent="android:Theme.Material"> <!-- 允許使用transitions --> <item name="android:windowContentTransitions">true</item> <!-- 指定進(jìn)入、退出、返回、重新進(jìn)入時的transitions --> <item name="android:windowEnterTransition">@transition/explode</item> <item name="android:windowExitTransition">@transition/explode</item> <item name="android:windowReturnTransition">@transition/explode</item> <item name="android:windowReenterTransition">@transition/explode</item> <!-- 指定進(jìn)入、退出、返回、重新進(jìn)入時的共享transitions --> <item name="android:windowSharedElementEnterTransition">@transition/change</item> <item name="android:windowSharedElementExitTransition">@transition/change</item> <item name="android:windowSharedElementReturnTransition">@transition/change</item> <item name="android:windowSharedElementReenterTransition">@transition/change</item> </style>
也可以在activity的oncreate方法中進(jìn)行代碼設(shè)置:
// 允許使用transitions getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); // 指定進(jìn)入、退出、返回、重新進(jìn)入時的transitions getWindow().setEnterTransition(newExplode()); getWindow().setExitTransition(newExplode()); getWindow().setEnterTransition(newExplode()); getWindow().setExitTransition(newExplode()); // 指定進(jìn)入、退出、返回、重新進(jìn)入時的共享transitions getWindow().setSharedElementEnterTransition(newChangeTransform()); getWindow().setSharedElementExitTransition(newChangeTransform()); getWindow().setSharedElementReturnTransition(newChangeTransform()); getWindow().setSharedElementReenterTransition(newChangeTransform());
普通轉(zhuǎn)場動畫
所有繼承自visibility類都可以作為進(jìn)入、退出的過度動畫。如果我們想自定義進(jìn)入和退出時的動畫效果,只需要繼承Visibility,重載onAppear和onDisappear方法來定義進(jìn)入喝退出的動畫。系統(tǒng)提供了三種默認(rèn)方式:
explode 從屏幕中心移入或移出視圖
slide 從屏幕邊緣移入或移出視圖
fade 改變視圖的透明度
想在xml中指定自定義的進(jìn)入、退出的過度動畫需要先對動畫進(jìn)行定義:
<transitionclass="my.app.transition.CustomTransition"/>
注意:其中CustomTransition是你自定義的動畫,它必須繼承自Visibility。
想以普通轉(zhuǎn)場動畫的方式啟動一個Activity,必須在startActivity函數(shù)中傳遞一個ActivityOptions的Bundle對象:
ActivityOptionsoptions = ActivityOptions.makeSceneTransitionAnimation(activity); startActivity(intent,options.toBundle());
如果想讓返回也具備轉(zhuǎn)場效果,那么在返回的Activity中不要再調(diào)用finish函數(shù),而是應(yīng)該使用finishAfterTransition來結(jié)束一個Activity,該函數(shù)會等待動畫執(zhí)行完畢才結(jié)束該Activity。
共享轉(zhuǎn)場動畫
當(dāng)兩個Activity具備某些相遇的元素時,共享轉(zhuǎn)場動畫將是一個非常好的選擇。使用轉(zhuǎn)場動畫需要將相同的元素通過android:transitionName或者view.setTransitionName設(shè)置為相同的名稱,這樣系統(tǒng)才能區(qū)分出相同的元素。
共享轉(zhuǎn)場動畫支持以下共享元素:
changeBounds 對目標(biāo)視圖的大小進(jìn)行動畫
changeClipBounds 對目標(biāo)視圖的剪裁大小進(jìn)行動畫
changeTransform 對目標(biāo)視圖進(jìn)行縮放、旋轉(zhuǎn)、位移動畫
changeImageTransform 對目標(biāo)圖片進(jìn)行縮放
通過下面的函數(shù)啟動一個共享元素動畫:
ActivityOptionsoptions = ActivityOptions.makeSceneTransitionAnimation(activity,view, "name"); startActivity(intent,options.toBundle());
如果有多個共享元素,則可以通過Pair進(jìn)行包裝處理:
ActivityOptionsoptions = ActivityOptions.makeSceneTransitionAnimation(activity,Pair.create(view1,"name1"),Pair.create(view2,"name2")); startActivity(intent,.toBundle());
返回時如果需要具備轉(zhuǎn)場動畫,那么也需要用finish函數(shù)替代finishAfterTransition來結(jié)束一個Activity。
共享轉(zhuǎn)場動畫通??梢愿鶕?jù)指定的元素判斷出合適的轉(zhuǎn)場動畫效果,不需要我們做額外的處理,也可以通過之前學(xué)習(xí)的方法進(jìn)行指定共享元素轉(zhuǎn)場動畫效果。
組合轉(zhuǎn)場動畫
我們可以把多個轉(zhuǎn)場動畫進(jìn)行組合,作出更具個性的轉(zhuǎn)場效果,在資源文件中通過以下方式:
<transitionSetxmlns:android="http://schemas.android.com/apk/res/android"> <explode/> <transition class="my.app.transition.CustomTransition"/> <<changeImageTransform/> </transitionSet>
代碼中我們可以通過TransitionSet類組合多個轉(zhuǎn)場動畫:
TransitionSettransitionSet =new TransitionSet(); transitionSet.addTransition(newFade()); transitionSet.addTransition(newChangeBounds());
組合可以同時針對普通轉(zhuǎn)場動畫和共享元素轉(zhuǎn)場動畫。
轉(zhuǎn)場動畫也可以像普通動畫一樣設(shè)置持續(xù)時間,延期執(zhí)行時間,速率插入器,以及動畫的監(jiān)聽等。
轉(zhuǎn)場動畫通常是對整個布局起作用,如果我們想對某個特定的view實(shí)施轉(zhuǎn)場動畫,可以把該view設(shè)置為轉(zhuǎn)場動畫的target,這樣轉(zhuǎn)場動畫將只對特定的view起作用。共享元素的動畫的target需要指定為transitionName
以上所述是小編給大家介紹的Android5.0新特性詳解之全新的動畫,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- Android5.0多種側(cè)滑欄效果實(shí)例代碼
- Android5.0+ CollapsingToolbarLayout使用詳解
- Android5.0中Material Design的新特性
- Android基于ViewDragHelper仿QQ5.0側(cè)滑界面效果
- Android 5.0最應(yīng)該實(shí)現(xiàn)的8個期望
- 基于Android實(shí)現(xiàn)仿QQ5.0側(cè)滑
- Android獲取設(shè)備隱私 忽略6.0權(quán)限管理
- Android使用ViewDragHelper實(shí)現(xiàn)仿QQ6.0側(cè)滑界面(一)
- Android高仿QQ6.0側(cè)滑刪除實(shí)例代碼
- Android 5.0中CoordinatorLayout的使用技巧
相關(guān)文章
Android?AIDL通信DeadObjectException解決方法示例
這篇文章主要為大家介紹了Android?AIDL通信DeadObjectException解決的方法示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03Android編程之菜單的實(shí)現(xiàn)方法實(shí)例詳解
這篇文章主要介紹了Android編程之菜單的實(shí)現(xiàn)方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了上下文菜單、選項(xiàng)菜單和子菜單的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-11-11Android多種方式實(shí)現(xiàn)相機(jī)圓形預(yù)覽的示例代碼
這篇文章主要介紹了Android多種方式實(shí)現(xiàn)相機(jī)圓形預(yù)覽的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08Android miniTwitter登錄界面開發(fā)實(shí)例
這篇文章主要為大家詳細(xì)介紹了Android miniTwitter登錄界面開發(fā)實(shí)例,感興趣的小伙伴們可以參考一下2016-04-04JetPack Compose底部導(dǎo)航欄的實(shí)現(xiàn)方法詳解
開發(fā)一個新項(xiàng)目,底部導(dǎo)航欄一般是首頁的標(biāo)配,在以前的xml布局中,我們可以很輕松的是用谷歌提供的BottomNavigationView或者自定義來實(shí)現(xiàn)底部導(dǎo)航的功能,在Compose中也有也提供了一個類似的控件androidx.compose.material.BottomNavigation2022-09-09Android studio報錯:The emulator process for AVD (xxx) was kill
這篇文章主要介紹了Android studio報錯:The emulator process for AVD (xxx) was killed,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12Android中使用OkHttp包處理HTTP的get和post請求的方法
OkHttp包為安卓開發(fā)中的HTTP協(xié)議網(wǎng)絡(luò)編程帶來了很大的便利,這里我們就來看一下最基本的、Android中使用OkHttp包處理HTTP的get和post請求的方法:2016-07-07