app動(dòng)效(app動(dòng)效圖標(biāo))
介紹
在 android5.0 以上版本中，google 為我們提供了幾種 activity 切換的過(guò)渡動(dòng)畫(huà)，目的是為了讓 activity 切換轉(zhuǎn)場(chǎng)更加美觀，而在 android5.0 之前的 activity 切換顯得生硬。雖然可以自定義給 activity 增添動(dòng)畫(huà)效果，但是效果也不盡如意。而 androi5.x 提供的切換動(dòng)畫(huà)就顯得非常自然，而且容易使用。
現(xiàn)在我們來(lái)看看 androi5.x 提供的動(dòng)畫(huà)效果圖：
Activity過(guò)渡動(dòng)畫(huà)
在 androi5.x 中，為 activity 提供了三中動(dòng)畫(huà)效果，分別是：
explode（分解）
slide（滑進(jìn)滑出）
fade（淡入淡出）
這三種都是 activity 的切換動(dòng)畫(huà)效果，除了這三種以外，我們看如上動(dòng)態(tài)圖中的 “共享元素” ，它其實(shí)也是一種轉(zhuǎn)場(chǎng)動(dòng)畫(huà)，只不過(guò)這種需要一定的條件才能夠使用。比如： activity1 和 activity2 中有兩個(gè)一模一樣的內(nèi)容，從 activity1 跳轉(zhuǎn)到 activity2 時(shí)我們才運(yùn)用共享元素的動(dòng)畫(huà)效果，達(dá)到更加的 ui 體驗(yàn)。
下面我們來(lái)具體學(xué)習(xí)和實(shí)現(xiàn)一下這幾種過(guò)渡動(dòng)畫(huà)。
一、explode（分解）
效果圖：
展開(kāi)全文
explode 從屏幕中間進(jìn)或者出，然后將視圖移動(dòng)至最后位置，達(dá)到動(dòng)畫(huà)的效果。
二、slide（滑動(dòng)）
效果圖：
slide 是從屏幕邊緣進(jìn)出，同理通過(guò)移動(dòng)視圖形成動(dòng)畫(huà)。
三、fade（淡入淡出）
效果圖：
fade 則是通過(guò)改變視圖的透明度來(lái)達(dá)到動(dòng)畫(huà)效果。
如何使用
我們知道開(kāi)啟一個(gè) activity 只需 startActivity(); 即可，更多的是，我們要想加入過(guò)渡動(dòng)畫(huà)，也只需要在 startActivity(); 中傳入需要的參數(shù)即可。
第一步：
例如，我要從 MainActivity 中啟動(dòng) AnimationActivity，只需要在 MainActivity 中 startActivity(); 傳入?yún)?shù)即可，代碼如下：
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
第二步：
在 AnimationActivity 中的 setContentView(); 方法前加入一行代碼：
//在需要啟動(dòng)的 activity 中開(kāi)啟動(dòng)畫(huà)的特征
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
或者，在 AnimationActivity 中設(shè)置如下 style，并引用到 AnimationActivity 即可。
item name="android:windowContentTransitions"true/item
第三步：
在 AnimationActivity 中設(shè)置要應(yīng)用的動(dòng)畫(huà)效果，如上面介紹的，效果有三種。然后選擇任意一種即可，代碼如下：
getWindow().setEnterTransition(new Explode());
getWindow().setEnterTransition(new Slide());
getWindow().setEnterTransition(new Fade());
上面設(shè)置的是進(jìn)入 activity 的動(dòng)畫(huà)，也可以設(shè)置退出 activity 的動(dòng)畫(huà)，代碼如下：
getWindow().setExitTransition(new Explode());
getWindow().setExitTransition(new Slide());
getWindow().setExitTransition(new Fade());
共享元素動(dòng)畫(huà)效果
通過(guò)上面這三個(gè)步驟，我相信你一定可以實(shí)現(xiàn)簡(jiǎn)單的 activity 過(guò)渡動(dòng)畫(huà)了，然后接下來(lái)介紹的是 activity 共享元素的動(dòng)畫(huà)效果，這里會(huì)稍微難一點(diǎn)。我就拿我的例子一部分來(lái)舉例子，這樣顯得更加容易理解。
例如，我的例子中兩個(gè)頁(yè)面都有一個(gè)同樣內(nèi)容的 textview ，所以要使其得到共享。
!-- 共享元素必須添加 transitionName 屬性，且對(duì)應(yīng)的元素 name 值一致 --
android.support.v7.widget.AppCompatTextView
android:id="@+id/tv_shared_element"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginTop="56dp"
android:layout_marginBottom="72dp"
android:gravity="center_horizontal"
android:text="@string/app_txt"
android:textColor="#323232"
android:textSize="18sp"
android:transitionName="shared element"
tools:ignore="UnusedAttribute" /
注意：我們必須為兩個(gè)頁(yè)面的共同元素（textview）設(shè)置一個(gè)屬性：
android:transitionName="shared element"
并且必須保證兩個(gè) textview 的 transitionName 設(shè)置的內(nèi)容一致，否者將無(wú)法達(dá)到共享元素的動(dòng)畫(huà)效果。
最后的關(guān)鍵一步：更改 startActivity(); 參數(shù)內(nèi)容，因?yàn)槲覀冊(cè)O(shè)定了共享元素，所以到進(jìn)行指定，這樣 startActivity 時(shí)才能夠找到目標(biāo)，所以啟動(dòng) activity 的代碼因改為這樣：
//這里的 sharedElementName 必須與 xml 文件中設(shè)置的值一致，否則無(wú)法共享
// tvSharedElement 表示要參與共享的 view
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, tvSharedElement,
"shared element").toBundle());
如果你的兩個(gè) activity 中有兩個(gè)及以上的內(nèi)容需要共享元素動(dòng)畫(huà)時(shí)，你只需要修改代碼為：
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this,
Pair.create((View) tvSharedElement, "shared element"))
.toBundle());
這里通過(guò) Pair.create(view，“shared name”)；來(lái)傳入需要共享的元素。
好了，本篇關(guān)于 android5.x 提供的幾種過(guò)渡動(dòng)畫(huà)效果就展示完了，雖然過(guò)渡動(dòng)畫(huà)效果很漂亮，但是也要合理的運(yùn)用，也不能每一個(gè) activity 都設(shè)置過(guò)渡動(dòng)畫(huà)。那么，如上動(dòng)態(tài)圖演示的一樣，本案例關(guān)鍵代碼將在下面貼出：
案例代碼
ＭainActivity 代碼如下：
package com.xww.activityanims;
import android.annotation.SuppressLint;
import android.app.ActivityOptions;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.AppCompatButton;
import android.support.v7.widget.AppCompatTextView;
import android.util.Pair;
import android.view.View;
import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;
@SuppressLint("NewApi")
public class MainActivity extends AppCompatActivity {
@BindView(R.id.btn_explode)
AppCompatButton btnExplode;
@BindView(R.id.btn_slide)
AppCompatButton btnSlide;
@BindView(R.id.btn_fade)
AppCompatButton btnFade;
@BindView(R.id.tv_shared_element)
AppCompatTextView tvSharedElement;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
}
@OnClick(R.id.btn_explode)
void onExplodeClick() {
Intent intent = new Intent(this, AnimationsActivity.class);
startActivityWithAnimation(intent, "explode");
}
@OnClick(R.id.btn_slide)
void onSlideClick() {
Intent intent = new Intent(this, AnimationsActivity.class);
startActivityWithAnimation(intent, "slide");
}
@OnClick(R.id.btn_fade)
void onFadeClick() {
Intent intent = new Intent(this, AnimationsActivity.class);
startActivityWithAnimation(intent, "fade");
}
private void startActivityWithAnimation(Intent intent, String animType) {
intent.putExtra("anim", animType);
//這里的 sharedElementName 必須與 xml 文件中設(shè)置的值一致，否則無(wú)法共享
// tvSharedElement 表示要參與共享的 view
// startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, tvSharedElement,
// "shared element").toBundle());
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this,
Pair.create((View) tvSharedElement, "shared element"))
.toBundle());
}
}
接著是 AnimationsActivity 的代碼，這是一個(gè)開(kāi)啟動(dòng)畫(huà)的 Activity ，代碼如下：
package com.xww.activityanims;
import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.AppCompatTextView;
import android.transition.Explode;
import android.transition.Fade;
import android.transition.Slide;
import android.view.Window;
import butterknife.BindView;
import butterknife.ButterKnife;
@SuppressLint("NewApi")
public class AnimationsActivity extends AppCompatActivity {
@BindView(R.id.tv_anim_type)
AppCompatTextView tvAnimType;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//在需要啟動(dòng)的 activity 中開(kāi)啟動(dòng)畫(huà)的特征
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
setContentView(R.layout.activity_animations);
ButterKnife.bind(this);
setEnterAnim();
}
@SuppressWarnings("ConstantConditions")
private void setEnterAnim() {
final String animType = (String) getIntent().getExtras().get("anim");
tvAnimType.setText(animType);
switch (animType) {
case "explode":
getWindow().setEnterTransition(new Explode());
break;
case "slide":
getWindow().setEnterTransition(new Slide());
break;
case "fade":
getWindow().setEnterTransition(new Fade());
break;
}
}
}
AnimationsActivity 布局文件如下：
?xml version="1.0" encoding="utf-8"?
android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android.support.v7.widget.ContentFrameLayout
android:id="@+id/frame"
android:layout_width="match_parent"
android:layout_height="280dp"
android:background="#ff3312"
android.support.v7.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="https://blog.csdn.net/smile_Running"
android:textColor="#ffffff"
android:textSize="20sp"
tools:ignore="HardcodedText" /
/android.support.v7.widget.ContentFrameLayout
!-- anchor 屬性必須在 CoordinatorLayout 下一級(jí)才能生效 --
android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_person_add_black_24dp"
app:elevation="8dp"
app:layout_anchor="@id/frame"
app:layout_anchorGravity="bottom|right" /
android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_sentiment_satisfied_black_24dp"
app:elevation="8dp"
app:layout_anchor="@id/frame"
app:layout_anchorGravity="bottom|left" /
android.support.v7.widget.CardView
android:layout_width="220dp"
android:layout_height="120dp"
app:cardBackgroundColor="#ffdd55"
app:cardCornerRadius="24dp"
app:cardElevation="8dp"
app:layout_anchor="@id/frame"
app:layout_anchorGravity="bottom|center_horizontal"
android.support.v7.widget.AppCompatTextView
android:id="@+id/tv_anim_type"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="animations"
android:textColor="#ffffff"
android:textSize="25sp"
tools:ignore="HardcodedText" /
/android.support.v7.widget.CardView
android.support.v7.widget.AppCompatTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="72dp"
android:gravity="center_horizontal"
android:text="@string/app_txt"
android:textColor="#323232"
android:textSize="18sp"
android:transitionName="shared element"
tools:ignore="UnusedAttribute" /
/android.support.design.widget.CoordinatorLayout
讓我們的 Activity 的切換更加炫酷起來(lái)吧！
掃描二維碼推送至手機(jī)訪問(wèn)。
版權(quán)聲明：本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布，如需轉(zhuǎn)載請(qǐng)注明出處。
