【移動應(yīng)用開發(fā)技術(shù)】android Material Design怎么創(chuàng)建新動畫

【移動應(yīng)用開發(fā)技術(shù)】androidMaterialDesign怎么創(chuàng)建新動畫

這篇“androidMaterialDesign怎么創(chuàng)建新動畫”文章的知識點大部分人都不太理解，所以在下給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“androidMaterialDesign怎么創(chuàng)建新動畫”文章吧。MaterialDesign中的動畫將為用戶提供操作反饋并在用戶與您的應(yīng)用進行互動時提供視覺連續(xù)性。Material

Design將為按鈕與操作行為轉(zhuǎn)換提供一些默認動畫，而Android5.0(APILevel

21)及更高版本可讓您定制這些動畫，同時也可創(chuàng)建新動畫：一、觸摸反饋動畫效果圖：MaterialDesign的觸摸反饋可在用戶與UI元素互動時，在接觸點上提供即時視覺確認。適用于按鈕的默認觸摸動畫使用全新

RippleDrawable類別，以波紋效果實現(xiàn)不同狀態(tài)間的轉(zhuǎn)換。在大多數(shù)情況下，應(yīng)以下列方式指定視圖背景，在您的視圖XML中應(yīng)用此功能：android:attr/selectableItemBackground指定有界的波紋。android:attr/selectableItemBackgroundBorderless指定越過視圖邊界的波紋。

它將由一個非空背景的視圖的最近父項所繪制和設(shè)定邊界。任何view處于可點擊狀態(tài)，都可以使用RippleDrawable來達到水波紋特效，而且必須處于可點擊狀態(tài)，才會出現(xiàn)波紋動畫效果。在代碼中可以這樣設(shè)置：注意：selectableItemBackgroundBorderless是APILevel21中推出的新屬性。此外，您可利用ripple元素將RippleDrawable定義為一個XML資源。您可以為RippleDrawable對象指定一種顏色。如果要改變默認觸摸反饋顏色，請使用主題的

android:colorControlHighlight屬性。如果要了解更多信息，請參閱RippleDrawable類別的API參考文檔。我們來看看系統(tǒng)自帶的觸摸反饋動畫是怎么實現(xiàn)的，為什么只需要在view的background或者foreground屬性設(shè)置成?android:attr/selectableItemBackground或者?android:attr/selectableItemBackgroundBorderless就可以實現(xiàn)波紋動畫的效果?這兩個屬性點進去，可以看到在路徑sdk/platforms/android-xx/data/res/values/attrs.xml文件中有定義這么兩個屬性：<!--

Background

drawable

for

bordered

standalone

items

that

need

focus/pressed

states.

-->

<attr

name="selectableItemBackground"

format="reference"

/>

<!--

Background

drawable

for

borderless

standalone

items

that

need

focus/pressed

states.

-->

<attr

name="selectableItemBackgroundBorderless"

format="reference"

/>我們想到，這兩個屬性既然是整個app中有效的，那可能會是在Theme中的屬性吧，那就去AndroidManifest文件中跟這個Theme一步步看下去，***在Base.V21.Theme.AppCompat.Light這個style中看到確實是有這兩個item屬性：<item

name="selectableItemBackground">?android:attr/selectableItemBackground</item>

<item

name="selectableItemBackgroundBorderless">?android:attr/selectableItemBackgroundBorderless</item>但是這里還是調(diào)用的系統(tǒng)的定義的屬性，繼續(xù)往下追，在android:Theme.Material和android:Theme.Material.Light中，可以看到：<item

name="selectableItemBackground">@drawable/item_background_material</item>

<item

name="selectableItemBackgroundBorderless">@drawable/item_background_borderless_material</item>然后sdk路徑下platforms\\android-xx\\data\\res\\drawable可以找到這些資源文件如下圖：item_background_material的內(nèi)容是：<ripple

xmlns:android="/apk/res/android"

android:color="?attr/colorControlHighlight">

<item

android:id="@id/mask">

<color

android:color="@color/white"

/>

</item>

</ripple>item_background_borderless_material的內(nèi)容是：<ripple

xmlns:android="/apk/res/android"

android:color="?attr/colorControlHighlight"

/>系統(tǒng)的做法是用ripple元素將RippleDrawable定義為一個XML

資源，而通過看View的源碼中在構(gòu)造方法中是這樣獲取background屬性的：public

View(Context

context,

@Nullable

AttributeSet

attrs,

int

defStyleAttr,

int

defStyleRes)

{

this(context);

final

TypedArray

a

=

context.obtainStyledAttributes(

attrs,

ernal.R.styleable.View,

defStyleAttr,

defStyleRes);

if

(mDebugViewAttributes)

{

saveAttributeData(attrs,

a);

}

Drawable

background

=

null;

switch

(attr)

{

case

ernal.R.styleable.View_background:

background

=

a.getDrawable(attr);

break;

.

.

.

}也就是說，這個background實際上就是RippleDrawable類。那我們就來看看這個RippleDrawable內(nèi)部到底是怎么做的吧。首先官方文檔對RippleDrawable解釋是Drawablethatshowsarippleeffectinresponsetostatechanges.The

anchoringpositionoftherippleforagivenstatemaybespecifiedbycalling

setHotspot(float,float)withthecorrespondingstateattributeidentifier.通過顯示出波紋效果來響應(yīng)狀態(tài)的改變，對于給定狀態(tài)的波紋的錨定位置可以通過調(diào)用具有對應(yīng)的狀態(tài)屬性標識符的setHotspot(float，float)來指定。RippleDrawable繼承自LayerDrawable，而LayerDrawable是繼承Drawable，RippleDrawable又是為了響應(yīng)View的statechange，那就看看Drawable類中對點擊時的狀態(tài)處理吧。public

boolean

setState(@NonNull

final

int[]

stateSet)

{

if

(!Arrays.equals(mStateSet,

stateSet))

{

mStateSet

=

stateSet;

return

onStateChange(stateSet);

}

return

false;

}給Drawable設(shè)置狀態(tài)屬性時，會把狀態(tài)的數(shù)組傳給onStateChange方法，在RippleDrawable中重寫了onStateChange?？吹絪etRippleActive和setBackgroundActive這兩個方法應(yīng)該可以猜到是什么意思了，接著看。private

void

setRippleActive(boolean

active)

{

if

(mRippleActive

!=

active)

{

mRippleActive

=

active;

if

(active)

{

tryRippleEnter();

}

else

{

tryRippleExit();

}

}

}如果Drawable是enable=true且pressd=true時，會調(diào)用tryRippleEnter方法看到這里，我們可以知道要開始做波紋動畫的效果了。mRipple

是RippleForeground類的實例，然而我沒有在RippleForeground類中找到setup和enter方法，但是RippleForeground繼承自RippleComponent類，于是，我在這個類中發(fā)現(xiàn)了這兩個方法。public

final

void

setup(float

maxRadius,

int

densityDpi)

{

if

(maxRadius

>=

0)

{

mHasMaxRadius

=

true;

mTargetRadius

=

maxRadius;

}

else

{

mTargetRadius

=

getTargetRadius(mBounds);

}

mDensityScale

=

densityDpi

*

DisplayMetrics.DENSITY_DEFAULT_SCALE;

onTargetRadiusChanged(mTargetRadius);

}setup是初始化一系列參數(shù)，enter創(chuàng)建一個動畫并開始動畫。從上面創(chuàng)建動畫的代碼可以看到，實際上是一個組合的屬性動畫，然后自定義了三個屬性波紋半徑TWEEN_RADIUS、波紋中心點TWEEN_ORIGIN和波紋的不透明度OPACITY。通過這三個屬性的過渡變化得到一個復合的動畫。以上就是前景波紋動畫效果的實現(xiàn)過程。private

void

setBackgroundActive(boolean

active,

boolean

focused)

{

if

(mBackgroundActive

!=

active)

{

mBackgroundActive

=

active;

if

(active)

{

tryBackgroundEnter(focused);

}

else

{

tryBackgroundExit();

}

}

}mBackground是RippleBackground類的實例，與RippleForeground不同的是，背景動畫只是改變了不透明度。@Override

protected

Animator

createSoftwareEnter(boolean

fast)

{

//

Linear

enter

based

on

current

opacity.

final

int

maxDuration

=

fast

?

OPACITY_ENTER_DURATION_FAST

:

OPACITY_ENTER_DURATION;

final

int

duration

=

(int)

((1

-

mOpacity)

*

maxDuration);

final

ObjectAnimator

opacity

=

ObjectAnimator.ofFloat(this,

OPACITY,

1);

opacity.setAutoCancel(true);

opacity.setDuration(duration);

opacity.setInterpolator(LINEAR_INTERPOLATOR);

return

opacity;

}以上分析的都是手指觸摸view時產(chǎn)生的enter波紋動畫，當手指抬起時state也會改變，會產(chǎn)生一個exit動畫，這里就不詳細分析了。二、使用揭露效果效果圖：當需要顯示或隱藏一組UI元素時，揭露動畫可為用戶提供視覺連續(xù)性。/*

@param

view

The

View

will

be

clipped

to

the

animating

circle.要隱藏或顯示的view

*

@param

centerX

The

x

coordinate

of

the

center

of

the

animating

circle,

relative

to

<code>view</code>.動畫開始的中心點X

*

@param

centerY

The

y

coordinate

of

the

center

of

the

animating

circle,

relative

to

<code>view</code>.動畫開始的中心點Y

*

@param

startRadius

The

starting

radius

of

the

animating

circle.動畫開始半徑

*

@param

endRadius

The

ending

radius

of

the

animating

circle.動畫結(jié)束半徑

*/

public

static

Animator

createCircularReveal(View

view,

int

centerX,

int

centerY,

float

startRadius,

float

endRadius)

{

return

new

RevealAnimator(view,

centerX,

centerY,

startRadius,

endRadius);

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

TextView

tv9

=

(TextView)

findViewById(R.id.tv9);

findViewById(R.id.content_main).setOnClickListener(new

View.OnClickListener()

{

@Override

public

void

onClick(View

v)

{

//

get

the

center

for

the

clipping

circle

int

cx

=

(tv9.getRight()

-

tv9.getLeft())

/

2;

int

cy

=

(tv9.getBottom()

-

tv9.getTop())

/

2;

//

get

the

final

radius

for

the

clipping

circle

int

finalRadius

=

Math.max(tv9.getWidth(),

tv9.getHeight());

//

create

the

animator

for

this

view

(the

start

radius

is

zero)

final

Animator

anim

=

ViewAnimationUtils.createCircularReveal(tv9,

cx,

cy,

0,

finalRadius);

tv9.setVisibility(View.VISIBLE);

anim.start();

}

});隱藏view：final

TextView

tv9

=

(TextView)

findViewById(R.id.tv9);

tv9.setOnClickListener(new

View.OnClickListener()

{

@Override

public

void

onClick(View

v)

{

//

get

the

center

for

the

clipping

circle

int

cx

=

(tv9.getRight()

-

tv9.getLeft())

/

2;

int

cy

=

(tv9.getBottom()

-

tv9.getTop())

/

2;

//

get

the

final

radius

for

the

clipping

circle

int

initRadius

=

Math.max(tv9.getWidth(),

tv9.getHeight());

//

create

the

animator

for

this

view

(the

start

radius

is

zero)

final

Animator

anim

=

ViewAnimationUtils.createCircularReveal(tv9,

cx,

cy,

initRadius,

0);

anim.addListener(new

AnimatorListenerAdapter()

{

@Override

public

void

onAnimationEnd(Animator

animation)

{

super.onAnimationEnd(animation);

//

make

the

view

visible

and

start

the

animation

tv9.setVisibility(View.INVISIBLE);

}

});

anim.start();

}

});沿著中心縮?。篈nimator

animator

=

ViewAnimationUtils.createCircularReveal(view,

view.getWidth()

/

2,

view.getHeight()

/

2,

view.getWidth(),

0);

animator.setInterpolator(new

LinearInterpolator());

animator.setDuration(1000);

animator.start();從左上角擴展：Animator

animator

=

ViewAnimationUtils.createCircularReveal(view,0,0,0,(float)

Math.hypot(view.getWidth(),

view.getHeight()));

animator.setDuration(1000);

animator.start();三、使用轉(zhuǎn)場動畫效果圖以共享元素的轉(zhuǎn)場動畫為例：MaterialDesign應(yīng)用中的操作行為轉(zhuǎn)換透過通用元素之間的移動和轉(zhuǎn)換提供不同狀態(tài)之間的視覺連接。可為進入、退出轉(zhuǎn)換以及操作行為之間的共享元素轉(zhuǎn)換指定定制動畫。在5.0之前，我們可以在startActivity之后調(diào)用overridePendingTransition來指定Activity的轉(zhuǎn)場動畫。進入轉(zhuǎn)換將決定操作行為中視圖如何進入場景。例如，在分解進入轉(zhuǎn)換中，視圖將從屏幕外進入場景并飛往屏幕中心。退出轉(zhuǎn)換將決定操作行為中應(yīng)用行為的顯示視圖如何退出場景。例如，在分解退出轉(zhuǎn)換中，視圖將從屏幕中心退出場景。共享元素轉(zhuǎn)換將決定兩個操作行為轉(zhuǎn)換之間共享的視圖如何在這些操作行為中轉(zhuǎn)換。

例如，如果兩個操作行為擁有相同的圖像，但其位置與大小不同，changeImageTransform共享元素轉(zhuǎn)換將在這些操作行為之間平滑地轉(zhuǎn)換與縮放圖像。Android5.0(APILevel21)支持這些進入與退出轉(zhuǎn)換：(普通過渡動畫)分解-從場景中心移入或移出視圖?；瑒?從場景邊緣移入或移出視圖。淡入淡出-通過調(diào)整透明度在場景中增添或移除視圖。也支持這些共享元素轉(zhuǎn)換：(共享元素的過渡動畫)changeBounds-為目標視圖的大小添加動畫。changeClipBounds-為目標視圖的裁剪大小添加動畫。changeTransform-為目標視圖的縮放、旋轉(zhuǎn)和位移添加動畫。changeImageTransform-為目標圖片的縮放、旋轉(zhuǎn)和位移添加動畫。指定轉(zhuǎn)場動畫要想使用新的轉(zhuǎn)場動畫，可以繼承MaterialDesign主題后在style風格中指定：其中，change_image_transform定義如下：<!--

res/transition/change_image_transform.xml

-->

<!--

(see

also

Shared

Transitions

below)

-->

<transitionSet

xmlns:android="/apk/res/android">

<changeImageTransform/>

</transitionSet>如果要帶代碼中開啟窗口內(nèi)容轉(zhuǎn)換，需要調(diào)用Window.requestFeature()方法。普通轉(zhuǎn)場動畫：所有繼承自visibility類都可以作為進入、退出的過度動畫。如果我們想自定義進入和退出時的動畫效果，只需要繼承Visibility，重載onAppear和onDisappear方法來定義進入喝退出的動畫。系統(tǒng)提供了三種默認方式：explode從屏幕中心移入或移出視圖slide從屏幕邊緣移入或移出視圖fade改變視圖的透明度想在xml中指定自定義的進入、退出的過度動畫需要先對動畫進行定義：<transition

class="my.app.transition.CustomTransition"/>注意：其中CustomTransition是我們自定義的動畫，它必須繼承自Visibility。想以普通轉(zhuǎn)場動畫的方式啟動一個Activity，必須在startActivity函數(shù)中傳遞一個ActivityOptions的Bundle對象：ActivityOptions

options

=

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)場動畫：如果要在兩個具有共享元素的Activity之間使用轉(zhuǎn)場動畫，那么：1、在題中啟用窗口內(nèi)容轉(zhuǎn)換。android:windowContentTransitions2、在Theme中指定一個共享元素轉(zhuǎn)換。3、將transitions定義為xml資源。4、利用android:transitionName屬性對兩個布局中的共享元素指定一個通用名稱。5、使用ActivityOptions.makeSceneTransitionAnimation()方法。//

get

the

element

that

receives

the

click

event

final

View

imgContainerView

=

findViewById(R.id.img_container);

//

get

the

common

element

for

the

transition

in

this

activity

final

View

androidRobotView

=

findViewById(R.id.image_small);

//

define

a

click

listener

imgContainerView.setOnClickListener(new

View.OnClickListener()

{

@Override

public

void

onClick(View

view)

{

Intent

intent

=

new

Intent(this,

Activity2.class);

//

create

the

transition

animation

-

the

images

in

the

layouts

//

of

both

activities

are

defined

with

android:transitionName="robot"

ActivityOptions

options

=

ActivityOptions

.makeSceneTransitionAnimation(this,

androidRobotView,

"robot");

//

start

the

new

activity

startActivity(intent,

options.toBundle());

}

});如果要在代碼中生成共享view，那么需要調(diào)用View.setTransitionName()方法對兩個布局中的共享元素指定一個通用名稱。如果有多個共享元素，則可以通過Pair進行包裝處理：ActivityOptions

options

=

ActivityOptions.makeSceneTransitionAnimation(activity,

Pair.create(view1,

"name1"),//這里view1、view2如果是TextView或者ImageView等，需要轉(zhuǎn)成View類型才可以

Pair.create(view2,

"name2"));

startActivity(intent,.toBundle());返回時如果需要具備轉(zhuǎn)場動畫，那么也需要用finish函數(shù)替代finishAfterTransition來結(jié)束一個Activity。使用曲線運動因為曲線運動和屬性動畫以及貝塞爾曲線這些東西混雜在一起，所以準備把這節(jié)拿出來單獨寫。這里就不多說了。視圖狀態(tài)改變Android

5.0在原有的圖片選擇器和顏色選擇器上進行了增強，不僅是控件能根據(jù)不同的狀態(tài)顯示不同的背景圖片，還能在兩種狀態(tài)切換時指定一個動畫，來增加過渡效果，吸引用戶眼球，以突出重點內(nèi)容。StateListAnimator類和圖片選擇器，顏色選擇器類似，可以根據(jù)view的狀態(tài)改變呈現(xiàn)不同的動畫效果，通過xml我們可以構(gòu)建對應(yīng)不同狀態(tài)的動畫合集，其使用方式也非常簡單，在對應(yīng)的狀態(tài)指定一個屬性動畫即可：<selector

xmlns:android="/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>代碼中這樣加載即可：TextView

tv11

=

(TextView)

findViewById(R.id.tv11);

StateListAnimator

stateLAnim

=

AnimatorInflater.loadStateListAnimator(this,R.drawable.selector_for_button);

tv11.setStateListAnimator(stateLAnim);繼承了Material主題后，按鈕默認擁有了z屬性動畫。如果想取消這種默認狀態(tài)，可以把狀態(tài)動畫指定為null。除了StateListAnimator類指定狀態(tài)切換的屬性動畫外，還可以通過AnimatedStateListDrawable來指定狀態(tài)切換的幀動畫：<animated-selector

xmlns:android="/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>幀動畫的資源文件直接在xml中作為view的background即可。四、矢量圖動畫效果圖:先在drawable中定義一張矢量圖：<?xml

version="1.0"

encoding="utf-8"?>

<vector

xmlns:android="/apk/res/android"

android:height="200dp"

android:width="200dp"

android:viewportHeight="400"

android:viewportWidth="400">

<group

android:name="rotationGroup"

android:pivotX="0"

android