Android5.0新特性詳解之全新的動(dòng)畫

更新時(shí)間：2016年09月08日 09:23:45 作者：阿倫-艾坲森

這篇文章主要介紹了Android5.0新特性詳解之全新的動(dòng)畫的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下

在Material Design設(shè)計(jì)中，為用戶與app交互反饋他們的動(dòng)作行為和提供了視覺上的連貫性。Material主題為控件和Activity的過渡提供了一些默認(rèn)的動(dòng)畫，在android L上，允許自定義這些動(dòng)畫：

Touch feedback 觸摸反饋

Circular Reveal 圓形展示

Curved motion 曲線運(yùn)動(dòng)

View state changes 視圖狀態(tài)變化

Vector Drawables 矢量圖動(dòng)畫

Activity transitions 活動(dòng)轉(zhuǎn)場(chǎng)

觸摸反饋

觸摸反饋是指用戶在觸摸控件時(shí)的一種可視化交互，在Android L之前，通常是通過press色變來凸顯，但是因?yàn)槭撬查g變化的效果，不如動(dòng)畫生動(dòng)。

在Android L使用了RippleDrawable類，用一個(gè)水波紋擴(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é)動(dòng)畫顏色，系統(tǒng)默認(rèn)的顏色為主題的一個(gè)屬性顏色：

android:colorControlHighlight，所以我們可以通過修改該顏色值來統(tǒng)一修改默認(rèn)的水波紋顏色。android:colorAccent可以修改checkbox的選中顏色，更多顏色設(shè)置請(qǐng)參考主題。

系統(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);

圓形展示

我們通常會(huì)顯示或者隱藏一個(gè)view，在Android L之前，這是一個(gè)生硬瞬間變化動(dòng)作，現(xiàn)在，有了一個(gè)新的api為此效果提供一個(gè)圓形的顯示或者隱藏的動(dòng)畫效果。

RevealAnimator和之前的動(dòng)畫使用沒什么區(qū)別，同樣可以設(shè)置監(jiān)聽器和加速器來實(shí)現(xiàn)各種各樣的特效，該動(dòng)畫主要用在隱藏或者顯示一個(gè)view，改變view的大小等過渡效果。

通過ViewAnimationUtils.createCircularReveal來創(chuàng)建一個(gè)動(dòng)畫，該api接受5個(gè)參數(shù)

view ：操作的視圖

centerX：動(dòng)畫開始的中心點(diǎn)X

centerY ：動(dòng)畫開始的中心點(diǎn)Y

startRadius：動(dòng)畫開始半徑

startRadius ：動(dòng)畫結(jié)束半徑

沿著中心的縮小的動(dòng)畫

Animatoranimator = ViewAnimationUtils.createCircularReveal(
view, //操作的視圖
view.getWidth() / 2,//動(dòng)畫開始的中心點(diǎn)X
view.getHeight() / 2,//動(dòng)畫開始的中心點(diǎn)Y
view.getWidth(),//動(dòng)畫開始半徑
0 //動(dòng)畫結(jié)束半徑
);
animator.setInterpolator(newLinearInterpolator());
animator.setDuration(1000);
animator.start();

從左上角擴(kuò)展的圓形動(dòng)畫

Animatoranimator = ViewAnimationUtils.createCircularReveal(
view,0,0,0,(float) Math.hypot(view.getWidth(), view.getHeight()));
animator.setDuration(1000);
animator.start();

曲線運(yùn)動(dòng)

曲線動(dòng)畫在Android L之前我們可以通過繼承位移動(dòng)畫重載applyTransformation函數(shù)來實(shí)現(xiàn)運(yùn)動(dòng)軌跡算法，但是操作起來比較繁瑣：

通過繼承位移動(dòng)畫，來改寫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)在我們有了更簡(jiǎn)單的實(shí)現(xiàn)方式。

ObjectAnimator新增了path方式來構(gòu)建動(dòng)畫，并且可以同時(shí)對(duì)x，y兩個(gè)屬性做動(dòng)畫，我們只用指定一個(gè)曲線的path，即可作出曲線的動(dòng)畫，可以用quadTo/cubicTo繪制貝塞爾曲線，也可以使用arcTo繪制普通的弧線

新增了PathInterpolator動(dòng)畫插入器，新的基于貝塞爾曲線或路徑對(duì)象的插入器。這個(gè)插入器指定了一個(gè)1x1正方形運(yùn)動(dòng)曲線，它使用(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)切換時(shí)指定一個(gè)動(dòng)畫，來增加過渡效果，吸引用戶眼球，以突出重點(diǎn)內(nèi)容。

StateListAnimator類和圖片選擇器，顏色選擇器類似，可以根據(jù)view的狀態(tài)改變呈現(xiàn)不同的動(dòng)畫效果，通過xml我們可以構(gòu)建對(duì)應(yīng)不同狀態(tài)的動(dòng)畫合集，其使用方式也非常簡(jiǎn)單，在對(duì)應(yīng)的狀態(tài)指定一個(gè)屬性動(dòng)畫即可：

<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)動(dòng)畫，代碼中可以通過AnimationInflater.loadStateListAnimator()加載動(dòng)畫，并使用View.setStateListAnimator()將其指定給View。

可以在狀態(tài)切換的過程指定多個(gè)屬性動(dòng)畫的合集，繼承了Material主題后，按鈕默認(rèn)擁有了z屬性動(dòng)畫。如果想取消這種默認(rèn)狀態(tài)，可以把狀態(tài)動(dòng)畫指定為null。

除了StateListAnimator類指定狀態(tài)切換的屬性動(dòng)畫外，還可以通過AnimatedStateListDrawable來指定狀態(tài)切換的幀動(dòng)畫：

<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>

矢量圖動(dòng)畫

前面我們學(xué)習(xí)了矢量圖，AnimatedVectorDrawable類讓你能使一個(gè)矢量圖動(dòng)起來。矢量圖動(dòng)畫比幀動(dòng)畫更平滑的展現(xiàn)圖片的變化過程，并且無論在內(nèi)存占用，還是包體積占用上都要優(yōu)于幀動(dòng)畫。通常定義一個(gè)矢量圖動(dòng)畫需要三步：

在drawable資源目錄下定義一個(gè)矢量圖

<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下頂一個(gè)objectAnimator，并在動(dòng)畫中修改矢量圖的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下定義一個(gè)animated-vector，并把drawable指向矢量圖，把target中的動(dòng)畫指定為之前定義的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)場(chǎng)動(dòng)畫

在Android L之前，我們可以在startActivity之后調(diào)用overridePendingTransition來指定Activity的轉(zhuǎn)場(chǎng)動(dòng)畫?，F(xiàn)在Android L給我們帶來了更絢麗的轉(zhuǎn)場(chǎng)動(dòng)畫。

新的轉(zhuǎn)場(chǎng)動(dòng)畫分為兩大類，一種是普通的過渡動(dòng)畫，另一種是共享元素的過渡動(dòng)畫。

要想使用新的轉(zhuǎn)場(chǎng)動(dòng)畫，可以繼承Material Design主題后在style風(fēng)格中指定：

<stylename="DefaultTheme"parent="android:Theme.Material">
<!-- 允許使用transitions -->
<item name="android:windowContentTransitions">true</item>
<!-- 指定進(jìn)入、退出、返回、重新進(jìn)入時(shí)的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)入時(shí)的共享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)入時(shí)的transitions
getWindow().setEnterTransition(newExplode());
getWindow().setExitTransition(newExplode());
getWindow().setEnterTransition(newExplode());
getWindow().setExitTransition(newExplode());
// 指定進(jìn)入、退出、返回、重新進(jìn)入時(shí)的共享transitions
getWindow().setSharedElementEnterTransition(newChangeTransform());
getWindow().setSharedElementExitTransition(newChangeTransform());
getWindow().setSharedElementReturnTransition(newChangeTransform());
getWindow().setSharedElementReenterTransition(newChangeTransform());

普通轉(zhuǎn)場(chǎng)動(dòng)畫

所有繼承自visibility類都可以作為進(jìn)入、退出的過度動(dòng)畫。如果我們想自定義進(jìn)入和退出時(shí)的動(dòng)畫效果，只需要繼承Visibility，重載onAppear和onDisappear方法來定義進(jìn)入喝退出的動(dòng)畫。系統(tǒng)提供了三種默認(rèn)方式：

explode 從屏幕中心移入或移出視圖

slide 從屏幕邊緣移入或移出視圖

fade 改變視圖的透明度

想在xml中指定自定義的進(jìn)入、退出的過度動(dòng)畫需要先對(duì)動(dòng)畫進(jìn)行定義：

<transitionclass="my.app.transition.CustomTransition"/>

注意：其中CustomTransition是你自定義的動(dòng)畫，它必須繼承自Visibility。

想以普通轉(zhuǎn)場(chǎng)動(dòng)畫的方式啟動(dòng)一個(gè)Activity，必須在startActivity函數(shù)中傳遞一個(gè)ActivityOptions的Bundle對(duì)象：

ActivityOptionsoptions = ActivityOptions.makeSceneTransitionAnimation(activity);
startActivity(intent,options.toBundle());

如果想讓返回也具備轉(zhuǎn)場(chǎng)效果，那么在返回的Activity中不要再調(diào)用finish函數(shù)，而是應(yīng)該使用finishAfterTransition來結(jié)束一個(gè)Activity，該函數(shù)會(huì)等待動(dòng)畫執(zhí)行完畢才結(jié)束該Activity。

共享轉(zhuǎn)場(chǎng)動(dòng)畫

當(dāng)兩個(gè)Activity具備某些相遇的元素時(shí)，共享轉(zhuǎn)場(chǎng)動(dòng)畫將是一個(gè)非常好的選擇。使用轉(zhuǎn)場(chǎng)動(dòng)畫需要將相同的元素通過android:transitionName或者view.setTransitionName設(shè)置為相同的名稱，這樣系統(tǒng)才能區(qū)分出相同的元素。

共享轉(zhuǎn)場(chǎng)動(dòng)畫支持以下共享元素：

changeBounds 對(duì)目標(biāo)視圖的大小進(jìn)行動(dòng)畫

changeClipBounds 對(duì)目標(biāo)視圖的剪裁大小進(jìn)行動(dòng)畫

changeTransform 對(duì)目標(biāo)視圖進(jìn)行縮放、旋轉(zhuǎn)、位移動(dòng)畫

changeImageTransform 對(duì)目標(biāo)圖片進(jìn)行縮放

通過下面的函數(shù)啟動(dòng)一個(gè)共享元素動(dòng)畫：

ActivityOptionsoptions = ActivityOptions.makeSceneTransitionAnimation(activity,view, "name");
startActivity(intent,options.toBundle());

如果有多個(gè)共享元素，則可以通過Pair進(jìn)行包裝處理：

ActivityOptionsoptions = ActivityOptions.makeSceneTransitionAnimation(activity,Pair.create(view1,"name1"),Pair.create(view2,"name2"));
startActivity(intent,.toBundle());

返回時(shí)如果需要具備轉(zhuǎn)場(chǎng)動(dòng)畫，那么也需要用finish函數(shù)替代finishAfterTransition來結(jié)束一個(gè)Activity。

共享轉(zhuǎn)場(chǎng)動(dòng)畫通?？梢愿鶕?jù)指定的元素判斷出合適的轉(zhuǎn)場(chǎng)動(dòng)畫效果，不需要我們做額外的處理，也可以通過之前學(xué)習(xí)的方法進(jìn)行指定共享元素轉(zhuǎn)場(chǎng)動(dòng)畫效果。

組合轉(zhuǎn)場(chǎng)動(dòng)畫

我們可以把多個(gè)轉(zhuǎn)場(chǎng)動(dòng)畫進(jìn)行組合，作出更具個(gè)性的轉(zhuǎn)場(chǎng)效果，在資源文件中通過以下方式：

<transitionSetxmlns:android="http://schemas.android.com/apk/res/android">
<explode/>
<transition class="my.app.transition.CustomTransition"/>
<<changeImageTransform/>
</transitionSet>

代碼中我們可以通過TransitionSet類組合多個(gè)轉(zhuǎn)場(chǎng)動(dòng)畫：

TransitionSettransitionSet =new TransitionSet();
transitionSet.addTransition(newFade());
transitionSet.addTransition(newChangeBounds());

組合可以同時(shí)針對(duì)普通轉(zhuǎn)場(chǎng)動(dòng)畫和共享元素轉(zhuǎn)場(chǎng)動(dòng)畫。

轉(zhuǎn)場(chǎng)動(dòng)畫也可以像普通動(dòng)畫一樣設(shè)置持續(xù)時(shí)間，延期執(zhí)行時(shí)間，速率插入器，以及動(dòng)畫的監(jiān)聽等。

轉(zhuǎn)場(chǎng)動(dòng)畫通常是對(duì)整個(gè)布局起作用，如果我們想對(duì)某個(gè)特定的view實(shí)施轉(zhuǎn)場(chǎng)動(dòng)畫，可以把該view設(shè)置為轉(zhuǎn)場(chǎng)動(dòng)畫的target，這樣轉(zhuǎn)場(chǎng)動(dòng)畫將只對(duì)特定的view起作用。共享元素的動(dòng)畫的target需要指定為transitionName

以上所述是小編給大家介紹的Android5.0新特性詳解之全新的動(dòng)畫，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: