Android动画<第九篇>：转场动画补充篇

（1）Activity转场动画

【1】自定义动画

    ActivityOptions compat = ActivityOptions.makeCustomAnimation(TestActivity.this, R.anim.top_in, R.anim.bottom_out);
    startActivity(new Intent(TestActivity.this, TestActivity.class), compat.toBundle());

top_in.xml

<?xml version="1.0" encoding="utf-8"?>
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromYDelta="-100%p"
    android:toYDelta="0"/>

bottom_out.xml

<?xml version="1.0" encoding="utf-8"?>
<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fromYDelta="0"
    android:toYDelta="100%p"/>
179.gif

【2】 从View的中心位置开始缩放Activity

    ActivityOptions compat = ActivityOptions.makeScaleUpAnimation(mImage, mImage.getWidth() / 2, mImage.getHeight() / 2, 0, 0);
    startActivity(new Intent(TestActivity.this, MainActivity.class), compat.toBundle());

【3】 从图片的中心位置缩放Activity

ActivityOptions compat = ActivityOptions.makeThumbnailScaleUpAnimation(mImage, BitmapFactory.decodeResource(getResources(),R.mipmap.ic_launcher_round),mImage.getWidth() / 2, mImage.getHeight() / 2);
 startActivity(new Intent(mContext, MakeThumbnailScaleUpAnimationActivity.class), compat.toBundle());

【4】场景切换

ActivityOptions compat = ActivityOptions.makeSceneTransitionAnimation(mActivity);
startActivity(new Intent(mContext, MakeSceneTransitionActivity.class), compat.toBundle());
（2）场景切换动画

【1】 默认切换（自动切换）

定义两个场景

    mSceneStart = Scene.getSceneForLayout(mSceneRootView, R.layout.scene_change_bounds_start, this);
    mSceneEnd = Scene.getSceneForLayout(mSceneRootView, R.layout.scene_change_bounds_end, this);



/**
 * 切换动画
 */
private void toggleScene() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        TransitionManager.go(mStartSceneState ? mSceneEnd : mSceneStart);
        mStartSceneState = !mStartSceneState;
    }
}

效果如下：

180.gif

【2】 ChangeBounds的使用（改变目标视图的布局边界）

定义两个场景

    mSceneStart = Scene.getSceneForLayout(mSceneRootView, R.layout.scene_change_bounds_start, this);
    mSceneEnd = Scene.getSceneForLayout(mSceneRootView, R.layout.scene_change_bounds_end, this);



/**
 * 切换动画
 */
private void toggleScene() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        TransitionManager.go(mStartSceneState ? mSceneEnd : mSceneStart, new ChangeBounds());
        mStartSceneState = !mStartSceneState;
    }
}

效果如下：

181.gif

【3】 ChangeTransform的使用（改变目标的缩放比例和旋转角度）

定义两个场景

    mSceneStart = Scene.getSceneForLayout(mSceneRootView, R.layout.scene_change_bounds_start, this);
    mSceneEnd = Scene.getSceneForLayout(mSceneRootView, R.layout.scene_change_bounds_end, this);

场景一布局

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

    <ImageView
        android:id="@+id/image_scene_start_one"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:src="@mipmap/tu1"/>

    <ImageView
        android:id="@+id/image_scene_start_two"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="8dp"
        android:src="@mipmap/tu2"/>

    <ImageView
        android:id="@+id/image_scene_start_three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:src="@mipmap/tu3"/>

    <ImageView
        android:id="@+id/image_scene_start_four"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:src="@mipmap/tu4"/>

</RelativeLayout>

场景二布局

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

    <ImageView
        android:id="@+id/image_scene_start_one"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_margin="8dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:scaleX="0.5"
        android:scaleY="0.5"
        android:src="@mipmap/tu1"/>

    <ImageView
        android:id="@+id/image_scene_start_two"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="8dp"
        android:rotation="90"
        android:src="@mipmap/tu2"/>

    <ImageView
        android:id="@+id/image_scene_start_three"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:src="@mipmap/tu3"
        android:scaleX="1.5"
        android:scaleY="1.5"/>

    <ImageView
        android:id="@+id/image_scene_start_four"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:src="@mipmap/tu4"
        android:rotation="-90"/>

</RelativeLayout>



/**
 * 切换动画
 */
private void toggleScene() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        TransitionManager.go(mStartSceneState ? mSceneEnd : mSceneStart, new ChangeTransform());
        mStartSceneState = !mStartSceneState;
    }
}

效果如下：

182.gif

场景一和场景二的布局差不多，只是场景二布局中的图片加上了旋转缩放的属性：

    android:scaleX="0.5"
    android:scaleY="0.5"

    android:scaleX="1.5"
    android:scaleY="1.5"

    android:rotation="90"

    android:rotation="-90"

【4】 ChangeClipBounds的使用（裁剪目标视图边界）

建立两个裁剪后的场景：

    mSceneRootView = findViewById(R.id.layout_scene_transition_root);

    View viewStart = LayoutInflater.from(this).inflate(R.layout.image_layout_end, null);
    viewStart.findViewById(R.id.image).setClipBounds(new Rect(0, 0, 300, 300));
    View viewEnd = LayoutInflater.from(this).inflate(R.layout.image_layout_end, null);
    viewEnd.findViewById(R.id.image).setClipBounds(new Rect(400, 300, 700, 600));
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        mSceneStart = new Scene(mSceneRootView, viewStart);
        mSceneEnd = new Scene(mSceneRootView, viewEnd);
    }



/**
 * 切换动画
 */
private void toggleScene() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            TransitionManager.go(mStartSceneState ? mSceneEnd : mSceneStart, new ChangeClipBounds());
        }
        mStartSceneState = !mStartSceneState;
    }
}

效果如下：

183.gif

【5】ChangeImageTransform的使用（改变目标图片的大小和缩放比例）

    mSceneStart = Scene.getSceneForLayout(mSceneRootView, R.layout.scene_change_image_transform_start, this);
    mSceneEnd = Scene.getSceneForLayout(mSceneRootView, R.layout.scene_change_image_transform_end, this);



/**
 * 切换动画
 */
private void toggleScene() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            TransitionManager.go(mStartSceneState ? mSceneEnd : mSceneStart, new ChangeImageTransform());
        }
        mStartSceneState = !mStartSceneState;
    }
}

scene_change_image_transform_start.xml

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

    <ImageView
        android:id="@+id/image_change_clip_bounds"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:src="@drawable/che"
        android:scaleType="center"
        android:contentDescription="@null"/>

</RelativeLayout>

scene_change_image_transform_end.xml

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

    <ImageView
        android:id="@+id/image_change_clip_bounds"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:src="@drawable/che"
        android:scaleType="fitXY"
        android:contentDescription="@null"/>

</RelativeLayout>

效果如下：

184.gif

【6】 Fade动画（渐变动画）

    mSceneStart = Scene.getSceneForLayout(mSceneRootView, R.layout.scene_fade_start, this);
    mSceneEnd = Scene.getSceneForLayout(mSceneRootView, R.layout.scene_fade_end, this);



/**
 * 切换动画
 */
private void toggleScene() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        Fade fade = new Fade();
        fade.setDuration(3000);
        TransitionManager.go(mStartSceneState ? mSceneEnd : mSceneStart, fade);
        mStartSceneState = !mStartSceneState;
    }
}

scene_fade_start.xml

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

    <ImageView
        android:id="@+id/image_scene_start"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/che"/>

</RelativeLayout>

scene_fade_end.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/image_scene_end"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        android:src="@drawable/che"/>
</RelativeLayout>

效果如下：

185.gif

【7】 Slide动画（滑动动画）

    mSceneStart = Scene.getSceneForLayout(mSceneRootView, R.layout.scene_slide_start, this);
    mSceneEnd = Scene.getSceneForLayout(mSceneRootView, R.layout.scene_slide_end, this);



/**
 * 切换动画
 */
private void toggleScene() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        Slide slide= new Slide();
        slide.setDuration(3000);
        TransitionManager.go(mStartSceneState ? mSceneEnd : mSceneStart, slide);
        mStartSceneState = !mStartSceneState;
    }
}

scene_slide_start.xml

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

    <ImageView
        android:id="@+id/image_scene_start"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/che"/>

</RelativeLayout>

scene_slide_end.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/image_scene_end"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        android:src="@drawable/che"/>
</RelativeLayout>

效果如下：

186.gif

【8】 Explode动画（分裂动画）

    mSceneStart = Scene.getSceneForLayout(mSceneRootView, R.layout.scene_explode_start, this);
    mSceneEnd = Scene.getSceneForLayout(mSceneRootView, R.layout.scene_explode_end, this);



/**
 * 切换动画
 */
private void toggleScene() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        Explode explode= new Explode();
        explode.setDuration(3000);
        TransitionManager.go(mStartSceneState ? mSceneEnd : mSceneStart, explode);
        mStartSceneState = !mStartSceneState;
    }
}

scene_explode_start.xml

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

    <ImageView
        android:id="@+id/image_scene_start"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/che"/>

</RelativeLayout>

scene_explode_end.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:id="@+id/image_scene_end"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        android:src="@drawable/che"/>
</RelativeLayout>

效果如下：

187.gif

【9】 transitionSet的使用（多种动画组合）

zuhe_transform.xml

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

    <changeBounds
        android:duration="1000"/>

    <changeTransform
        android:duration="1000" />

</transitionSet>



    TransitionManager.go(mSceneEnd,TransitionInflater.from(this).inflateTransition(R.transition.zuhe_transform));

【10】 beginDelayedTransition的使用

即通过TransitionManager.beginDelayedTransition()完成动画，TransitionManager.go需要建立两个场景，每个场景都要单独写一个布局文件，但是TransitionManager.beginDelayedTransition()只需要一个场景就够了，也就是说只要一个布局文件就够了，它的场景切换动画就是改变当前view的属性。

比如：直接对布局中的某view操作

    mSceneRootView = findViewById(R.id.layout_scene_transition_root);
    image_change = findViewById(R.id.image_change);



/**
 * 切换动画
 */
private void toggleScene() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {

        TransitionManager.beginDelayedTransition(mSceneRootView, new ChangeImageTransform());

        if(mStartSceneState){
            image_change.setScaleType(ImageView.ScaleType.CENTER);
        }else{
            image_change.setScaleType(ImageView.ScaleType.FIT_XY);
        }

        mStartSceneState = !mStartSceneState;
    }
}



<RelativeLayout
    android:id="@+id/layout_scene_transition_root"
    android:layout_width="match_parent"
    android:layout_height="300dp">

    <ImageView
        android:id="@+id/image_change"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:src="@drawable/che"
        android:scaleType="center"
        android:contentDescription="@null"/>

</RelativeLayout>
（3）共享元素

共享元素没有补充的，直接看上一篇文章即可。

[本章完...]

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容