Android技术分享| Activity 过渡动画 — 让切换更加炫酷

介绍

在 android5.0 以上版本中，google 为咱们供给了几种 activity 切换的过渡动画，意图是为了让 activity 切换转场愈加漂亮，而在 android5.0 之前的 activity 切换显得生硬。虽然能够自定义给 activity 增加动画作用，但是作用也不尽满意。而 androi5.x 供给的切换动画就显得十分自然，而且简单运用。

现在咱们来看看 androi5.x 供给的动画作用图：

Activity过渡动画

在 androi5.x 中，为 activity 供给了三中动画作用，分别是：

explode（分化）
slide（滑进滑出）
fade（淡入淡出）

这三种都是 activity 的切换动画作用，除了这三种以外，咱们看如上动态图中的　“同享元素”　，它其实也是一种转场动画，只不过这种需求必定的条件才干够运用。比如： activity1 和 activity2 中有两个如出一辙的内容，从 activity1 跳转到 activity2 时咱们才运用同享元素的动画作用，到达愈加的 ui 体会。

下面咱们来详细学习和实现一下这几种过渡动画。

一、explode（分化）

作用图：

explode 从屏幕中间进或许出，然后将视图移动至最终位置，到达动画的作用。

二、slide（滑动）

作用图：

slide 是从屏幕边缘进出，同理通过移动视图形成动画。

三、fade（淡入淡出）

作用图：

fade 则是通过改动视图的透明度来到达动画作用。

如何运用

咱们知道敞开一个 activity 只需 startActivity(); 即可，更多的是，咱们要想参加过渡动画，也只需求在 startActivity(); 中传入需求的参数即可。

第一步：

例如，我要从 MainActivity 中发动 AnimationActivity，只需求在 MainActivity 中 startActivity(); 传入参数即可，代码如下：

startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

第二步：

在 AnimationActivity 中的 setContentView(); 方法前参加一行代码：

//在需求发动的 activity 中开发动画的特征
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

或许，在 AnimationActivity 中设置如下 style，并引用到 AnimationActivity 即可。

 <item name="android:windowContentTransitions">true</item>

第三步：

在 AnimationActivity 中设置要使用的动画作用，如上面介绍的，作用有三种。然后选择恣意一种即可，代码如下：

getWindow().setEnterTransition(new Explode());
getWindow().setEnterTransition(new Slide());
getWindow().setEnterTransition(new Fade());

上面设置的是进入 activity 的动画，也能够设置退出 activity 的动画，代码如下：

getWindow().setExitTransition(new Explode());
getWindow().setExitTransition(new Slide());
getWindow().setExitTransition(new Fade());

同享元素动画作用

通过上面这三个步骤，我相信你必定能够实现简单的 activity 过渡动画了，然后接下来介绍的是 activity 同享元素的动画作用，这儿会稍微难一点。我就拿我的比如一部分来举比如，这样显得愈加简单理解。

例如，我的比如中两个页面都有一个相同内容的 textview ，所以要使其得到同享。

  <!-- 同享元素有必要增加　transitionName　特点，且对应的元素 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" />

留意：咱们有必要为两个页面的一起元素（textview）设置一个特点：

android:transitionName="shared element"

并且有必要确保两个 textview 的　transitionName 设置的内容共同，否者将无法到达同享元素的动画作用。

最终的要害一步：更改 startActivity(); 参数内容，由于咱们设定了同享元素，所以到进行指定，这样 startActivity 时才干够找到目标，所以发动 activity 的代码因改为这样：

//这儿的　sharedElementName 有必要与 xml 文件中设置的值共同，否则无法同享
// tvSharedElement 表示要参加同享的　view
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, tvSharedElement,
      "shared element").toBundle());

如果你的两个 activity 中有两个及以上的内容需求同享元素动画时，你只需求修改代码为：

        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this,
                Pair.create((View) tvSharedElement, "shared element"))
                .toBundle());

这儿通过 Pair.create(view，”shared name”)；来传入需求同享的元素。

好了，本篇关于 android5.x 供给的几种过渡动画作用就展现完了，虽然过渡动画作用很漂亮，但是也要合理的运用，也不能每一个 activity 都设置过渡动画。那么，如上动态图演示的一样，本事例要害代码将在下面贴出：

事例代码

Ｍ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 文件中设置的值共同，否则无法同享
        // tvSharedElement 表示要参加同享的　view
//        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, tvSharedElement,
//                "shared element").toBundle());
        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this,
                Pair.create((View) tvSharedElement, "shared element"))
                .toBundle());
    }
}

接着是 AnimationsActivity 的代码，这是一个开发动画的 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);
        //在需求发动的 activity 中开发动画的特征
        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 下一级才干生效 -->
    <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 的切换愈加炫酷起来吧！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

Android技术分享| Activity 过渡动画 — 让切换更加炫酷

介绍

Activity过渡动画

一、explode（分化）

二、slide（滑动）

三、fade（淡入淡出）

如何运用

同享元素动画作用

事例代码

近期文章

近期评论