Android 之路69---转场动画

导读

1.单个视图揭露动画
2.多视图转场动画
3.Activity转场动画(有问题)

单个视图揭露动画

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <CheckBox
        android:text="Play animation"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/checkBox" />

    <View
        android:id="@+id/view"
        android:layout_centerInParent="true"
        android:background="@color/colorAccent"
        android:onClick="onClick"
        android:visibility="invisible"
        android:layout_width="300dp"
        android:layout_height="300dp"/>

    <Button
        android:onClick="onClick"
        android:id="@+id/buttonChangeVisibility"
        android:layout_width="wrap_content"
        android:text="switch"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        style="?android:buttonBarButtonStyle"
        android:layout_height="wrap_content" />

</RelativeLayout>

MainActivity.java

package com.hala.transitionanimayion;

import android.animation.Animator;
import android.annotation.TargetApi;
import android.os.Build;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.ViewAnimationUtils;
import android.widget.CheckBox;

public class MainActivity extends AppCompatActivity {


    private static final String TAG = "RevealActivity";
    private View mView;
    private CheckBox mCheckBox;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mView=findViewById(R.id.view);
        mCheckBox=(CheckBox)findViewById(R.id.checkBox);
    }

    public void onClick(View view){
        final boolean playAnimation=mCheckBox.isShown();
        switch (view.getId()){
            case R.id.buttonChangeVisibility:
                handleChangeVisibility(playAnimation);
                break;
        }
    }

    private void handleChangeVisibility(boolean playAnimation) {
        Log.d(TAG, "handleChangeVisibility() called with: playAnimation = [" + playAnimation + "]");
        Log.d(TAG, "handleChangeVisibility: " + mView.isChecked());
        if(playAnimation){
            if(mView.isShown()){
                //如果点击前isShown都为true 则调用不可见函数
                revealExit();
            }else{
                revealEnter();
            }
        }else{
            if(mView.isShown()){
                mView.setVisibility(View.INVISIBLE);
            }else{
                mView.setVisibility(View.VISIBLE);
            }
        }
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    private void revealExit() {
        int w = mView.getWidth();
        int h = mView.getHeight();

        int cx = w;
        int cy = h;

        int r = (int) Math.hypot(w, h);

        Animator animator = ViewAnimationUtils.createCircularReveal(mView, cx, cy, r, 0);

        animator.setDuration(2000);
        animator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animator) {

            }

            //在动画结束后显示不可见
            @Override
            public void onAnimationEnd(Animator animator) {
                mView.setVisibility(View.INVISIBLE);
            }

            @Override
            public void onAnimationCancel(Animator animator) {

            }

            @Override
            public void onAnimationRepeat(Animator animator) {

            }
        });
        animator.start();
    }


    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    private void revealEnter() {
        int w=mView.getWidth();
        int h=mView.getHeight();

        int cx=w;
        int cy=h;

        //根据长，宽给出对角线
        int r=(int)Math.hypot(w,h);

        //参数：视图，圆的中心点（左上角为0，0），最初半径，最终半径
        Animator animator= ViewAnimationUtils.createCircularReveal(mView,cx,cy,0,r);
        animator.setDuration(2000);
        mView.setVisibility(View.VISIBLE);
        animator.start();
    }
}

多视图转场动画

ic_close_black_24dp.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M19,6.41L17.59,5 12,10.59 6.41,5 5,6.41 10.59,12 5,17.59 6.41,19 12,13.41 17.59,19 19,17.59 13.41,12z"/>
</vector>

ic_info_black_24dp.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM13,17h-2v-6h2v6zM13,9h-2L11,7h2v2z"/>
</vector>

strings.xml

<resources>
    <string name="app_name">TransitionAnimation</string>
    <string name="title">长白山脉</string>
    <string name="address">吉林省东南部地区</string>
    <string name="info">长白山脉是松花江、图们江和鸭绿江的发源地。是中国满族的发祥地和满族文化圣山。
        长白山脉区域总面积1964平方千米，核心区758平方千米，长白山系的最高峰是朝鲜境内的将军峰，海拔2749米。
        中国境内最高峰白云峰，海拔2691米，是中国东北的最高峰。狭义的长白山位于吉林省东南部长白山脉的主峰。
        广义的长白山是中国辽宁、吉林、黑龙江三省东部山地以及俄罗斯远东和朝鲜半岛诸多余脉的总称。
        长白山在生态、生物、地质和历史等诸多方面都具有突出的普遍价值和卓越的自然品质以及丰富的文化内涵。
    </string>
    <string name="pic" translatable="false">pic</string>
    <string name="icon" translatable="false">icon</string>
</resources>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/scene_root"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.constraint.ConstraintLayout>

scene_overview.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_scene"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:id="@+id/image"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:src="@drawable/chang_bai"
        android:transitionName="@string/pic"
        />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp">

        <ImageButton
            android:id="@+id/btnInfo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_marginTop="4dp"
            android:background="?android:selectableItemBackground"
            android:onClick="onClick"
            android:src="@drawable/ic_info_black_24dp" />

        <TextView
            android:id="@+id/tvTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_toStartOf="@id/btnInfo"
            android:text="@string/title"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline" />

        <TextView
            android:id="@+id/tvAddress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/tvTitle"
            android:layout_marginTop="8dp"
            android:text="@string/address"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium" />

    </RelativeLayout>

</LinearLayout>

scene_info.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <ImageView
        android:id="@+id/image"
        android:layout_width="160dp"
        android:layout_height="120dp"
        android:src="@drawable/chang_bai" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp">

        <ImageButton
            android:id="@+id/btnClose"
            android:transitionName="@string/icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_marginTop="4dp"
            android:background="?android:selectableItemBackground"
            android:onClick="onClick"
            android:src="@drawable/ic_close_black_24dp" />

        <TextView
            android:id="@+id/tvTitle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_toStartOf="@id/btnClose"
            android:text="@string/title"
            android:textAppearance="@style/TextAppearance.AppCompat.Title" />

        <TextView
            android:id="@+id/tvAddress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/tvTitle"
            android:layout_marginTop="8dp"
            android:text="@string/address"
            android:textAppearance="@style/TextAppearance.AppCompat.Medium" />

        <TextView
            android:id="@+id/tvInfo"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/tvAddress"
            android:layout_marginTop="8dp"
            android:text="@string/info" />

    </RelativeLayout>


</LinearLayout>

transition.xml

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">


    <changeImageTransform android:duration="1500">
        <targets android:targetId="@id/image"/>
    </changeImageTransform>

    <fade android:duration="1500" android:startDelay="500">

    </fade>
</transitionSet>

MainActivity.java

package com.hala.transitionanimation;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.transition.Scene;
import android.transition.Transition;
import android.transition.TransitionInflater;
import android.transition.TransitionManager;
import android.view.View;
import android.view.ViewGroup;

public class MainActivity extends AppCompatActivity {

    private Scene mOverViewScene;
    private Scene mInfoScene;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        ViewGroup sceneRoot = (ViewGroup) findViewById(R.id.scene_root);
        mOverViewScene = Scene.getSceneForLayout(sceneRoot, R.layout.scene_overview, getBaseContext());
        mInfoScene = Scene.getSceneForLayout(sceneRoot, R.layout.scene_info, getBaseContext());

        TransitionManager.go(mOverViewScene);

    }


    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.btnInfo:
                Transition transition = TransitionInflater.from(getBaseContext())
                        .inflateTransition(R.transition.transition);
                TransitionManager.go(mInfoScene, transition);
                break;
            case R.id.btnClose:
                //用系统默认的动画效果
                TransitionManager.go(mOverViewScene);
                break;
        }
    }
}

Activity转场动画

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_first"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/iv1"
            android:layout_width="0dp"
            android:layout_height="160dp"
            android:layout_weight="1"
            android:background="?attr/selectableItemBackground"
            android:onClick="onClick"
            android:src="@drawable/pic1" />

        <ImageView
            android:id="@+id/iv2"
            android:layout_width="0dp"
            android:layout_height="160dp"
            android:layout_weight="1"
            android:background="?attr/selectableItemBackground"
            android:onClick="onClick"
            android:src="@drawable/pic2" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/iv3"
            android:layout_width="0dp"
            android:layout_height="160dp"
            android:layout_weight="1"
            android:background="?attr/selectableItemBackground"
            android:onClick="onClick"
            android:src="@drawable/pic3" />

        <ImageView
            android:id="@+id/iv4"
            android:layout_width="0dp"
            android:layout_height="160dp"
            android:layout_weight="1"
            android:background="?attr/selectableItemBackground"
            android:onClick="onClick"
            android:src="@drawable/pic4" />

    </LinearLayout>

</LinearLayout>

activity_main2.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_second"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/iv"
        android:transitionName="img"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

MainActivity.java

package com.hala.transitionanimation;

import android.annotation.TargetApi;
import android.app.ActivityOptions;
import android.content.Intent;
import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.transition.Explode;
import android.transition.Transition;
import android.util.Pair;
import android.view.View;


public class MainActivity extends AppCompatActivity {


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


    }


    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public void onClick(View view) {
        int resId = -1;
        switch (view.getId()) {
            case R.id.iv1:
                resId = R.drawable.pic1;
                break;
            case R.id.iv2:
                resId = R.drawable.pic2;
                break;
            case R.id.iv3:
                resId = R.drawable.pic3;
                break;
            case R.id.iv4:
                resId = R.drawable.pic4;
                break;
        }
            Intent intent = new Intent(this, Main2Activity.class);
            intent.putExtra("resId", resId);
            Transition transition = new Explode();
            //排除某些视图，在转场时不变，此为保持状态栏不变
            //注意两个activity都要设置
            transition.excludeTarget(android.R.id.statusBarBackground, true);

            getWindow().setEnterTransition(transition);
            getWindow().setExitTransition(transition);
            //返回时指定转场效果
            getWindow().setReenterTransition(transition);
            //为共享元素指定转场效果
            getWindow().setSharedElementEnterTransition(transition);

            //这里img是在activity_main.xml中设置的属性  android:transitionName="img"
            Pair<View, String> shareElement = Pair.create(view, "img");
            ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, shareElement);
            startActivity(intent, options.toBundle());

    }
}

Main2Activity.java

package com.hala.transitionanimation;

import android.annotation.TargetApi;
import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.transition.Explode;
import android.transition.Transition;
import android.widget.ImageView;

public class Main2Activity extends AppCompatActivity {

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);

        int resId = getIntent().getExtras().getInt("resId");
        ImageView iv = (ImageView) findViewById(R.id.iv);
        iv.setTransitionName("img");
        iv.setImageResource(resId);

        Transition transition = new Explode();
        //保持状态栏不变
        transition.excludeTarget(android.R.id.statusBarBackground, true);
        getWindow().setEnterTransition(transition);
        getWindow().setExitTransition(transition);
    }
}