android 动画 过渡动画 transition

Transition过渡动画

引入

从API 1就存在的Drawable Animation和View Animation，以及API 11(Android 3.0)以后加入的Property Animation。而过渡动画Transition是在API 19(Android 4.4.2)中加入的。

 

ransition是一种简单的动画显示。这种动画可以平滑的从一种图片变换为另一张图片，不是那种突兀的切换。

Transition可以简单的在两帧之间切换，常用于选择与被选择之间切换，或者渐进的今日新的场景。

XML文件包含切换的帧图片。transition标签作为容器，item为切换用的帧，Android:drawable为图片id。

 

TransitionDrawable

TransitionDrawable获取transition中的资源，之后调用startTransition进行切换，该函数将第一帧切换到第二帧。reverseTransition是另一种切换方式，将反复切换两帧，会根据上一次切换的第二帧作为下一次切换的第一帧。

 

XML文件代码:

1.<?xml version="1.0" encoding="utf-8"?>  2.<transition  3.    xmlns:android="http://schemas.android.com/apk/res/android">  4.      5.    <item android:drawable="@drawable/left" />  6.    <item android:drawable="@drawable/right" />  7.  8.</transition>  

Activity代码:

TransitionDrawable sceneDrawable = (TransitionDrawable) scene.getDrawable();  

sceneDrawable.reverseTransition(3000);  

转场动画(Activity Transition)基本介绍

Android 5.0 提供了三种Transition类型
进入：决定Activity中的所有的视图怎么进入屏幕。
退出：决定一个Activity中的所有视图怎么退出屏幕。
共享元素：决定两个activities之间的过渡，怎么共享(它们)的视图。

 

进入和退出包含如下动画效果

explode(分解) – 从屏幕中间进或出

slide(滑动) - 从屏幕边缘进或出地

fade(淡出) –通过改变屏幕上视图的不透明度达到添加或者移除视图的效果

 

共享元素包含如下动画效果

changeBounds - 改变目标视图的布局边界

changeClipBounds - 裁剪目标视图边界

changeTransform - 改变目标视图的缩放比例和旋转角度

changeImageTransform - 改变目标图片的大小和缩放比例

 

使用

xml设置

当你定义继承了material主题样式时，使用Android:windowContentTransitions属性启用窗口的内容转换(效果)。你还可以指定进入、退出、和共享元素的转换：

<style name="myTheme" parent="android:Theme.Material">          <!-- 允许使用transitions -->          <item name="android:windowContentTransitions">true</item>          <!-- 指定进入和退出transitions -->          <item name="android:windowEnterTransition">@transition/explode</item>          <item name="android:windowExitTransition">@transition/explode</item>          <!-- 指定shared element transitions -->          <item name="android:windowSharedElementEnterTransition">              @transition/change_image_transform</item>          <item name="android:windowSharedElementExitTransition">              @transition/change_image_transform</item>  </style>  

定义transition动画

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">      <explode/>      <changeBounds/>      <changeTransform/>      <changeClipBounds/>      <changeImageTransform/>  <!--changeBound 这个是最长使用的 改变View 大小和位置changeClipBounds 改变 Clip 边界的大小changeImageTransform 改变ImageView 的大小 和 martixChangeTransform 改变普通的 View 一些Scalex 值ChangeScroll 改变滑动位置--></transitionSet>

代码设置

ActivityA

// 基本的startActivity(intent)方法startActivity(intent,ActivityOptions.makeSceneTransitionAnimation(MainActivity.this).toBundle());

ActivityB

// 在onCreate()允许使用transitions getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); // 设置一个enter transition getWindow().setEnterTransition(new Explode());getWindow().setEnterTransition(new Slide());getWindow().setEnterTransition(new Fade());

样式使用

设置一个进入动画，默认退出时同样的动画类型

 

setExitTransition() - 当A start B时，使A中的View退出场景的transition

setEnterTransition() - 当A start B时，使B中的View进入场景的transition

setReturnTransition() - 当B 返回 A时，使B中的View退出场景的transition

setReenterTransition() - 当B 返回 A时，使A中的View进入场景的transition

 

 

共享元素的动画

首先需要在他的ActivityA布局、ActivityB布局中共同设置共享元素android:transitionName="XXX"如果只要一个共享元素，那么在ActivityB中可以这样写startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this,view,"share").toBundle());由多个共享元素，那么我们可以通过Pair.create()来创建多个共享元素startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, Pair.create(view,"share"),Pair.create(fab,"fab")).toBundle());

布局元素的过渡动画

Transition框架还可以用于activity布局中view从一种状态到另一种状态的过渡动画。

//简单实现

TransitionManager.beginDelayedTransition(sceneRoot);

这会改变相应view的属性，让其变大。Transition框架将记录开始和结束的的值，然后创建一个过渡动画。.

squareGreen.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                TransitionManager.beginDelayedTransition(sceneRoot);                setViewWidth(squareRed, 500);                setViewWidth(squareBlue, 500);                setViewWidth(squareGreen, 500);                setViewWidth(squareYellow, 500);            }        });    }    private void setViewWidth(View view, int x) {        ViewGroup.LayoutParams params = view.getLayoutParams();        params.width = x;        view.setLayoutParams(params);    }

实现例子

MainActivity

public class MainActivity extends AppCompatActivity {    private Intent intent;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        intent = new Intent(MainActivity.this, ActivityTwo.class);    }    public void explode(View view) {        intent.putExtra("transition", "explode");        //将原先的跳转改成如下方式        startActivity(intent, ActivityOptions        .makeSceneTransitionAnimation(MainActivity.this).toBundle());        /**         * 修改ActivityTwo返回到MainActivity动画设置         */        Fade fade = new Fade();        fade.setDuration(2000);        getWindow().setReenterTransition(fade);    }    public void slide(View view) {        intent.putExtra("transition", "slide");        startActivity(intent, ActivityOptions        .makeSceneTransitionAnimation(MainActivity.this).toBundle());    }    public void fade(View view) {        intent.putExtra("transition", "fade");        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this).toBundle());    }    public void share(View view) {        //共享元素        ImageView share = (ImageView) findViewById(R.id.share);        intent.putExtra("transition", "share");        //将原先的跳转改成如下方式，注意这里面的第三个参数决定了ActivityTwo 布局中的android:transitionName的值，它们要保持一致        startActivity(intent, ActivityOptions        .makeSceneTransitionAnimation(MainActivity.this,share,"shareTransition").toBundle();        //创建多个共享单元        //startActivity(intent,ActivityOptions.makeSceneTransitionAnimation(this,Pair.create(share, "shareTransition"), Pair.create(fab, "fab")).toBundle());    }}

MainActivity的布局xml:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="#ffffff"    android:gravity="center"    android:orientation="vertical"    tools:context=".MainActivity">    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:onClick="explode"        android:text="explode" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:onClick="slide"        android:text="slide" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:onClick="fade"        android:text="fade" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="center_horizontal"        android:onClick="share"        android:text="share" />    <ImageView        android:id="@+id/share"        android:layout_width="40dp"        android:layout_height="40dp"        android:layout_gravity="center_horizontal"        android:src="@mipmap/ic_guide_view_1"/></LinearLayout>

ActivityTwo

public class ActivityTwo extends AppCompatActivity {    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        // 允许使用transitions        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);        String transition = getIntent().getStringExtra("transition");        switch (transition) {            case "explode":                // 设置进入时进入动画                Explode explode = new Explode();                explode.setDuration(2000);                getWindow().setEnterTransition(explode);                // 设置退出时退出动画                Fade fade1 = new Fade();                fade1.setDuration(2000);                getWindow().setReturnTransition(fade1);                break;            case "slide":                Slide slide = new Slide();                slide.setDuration(2000);                getWindow().setEnterTransition(slide);                break;            case "fade":                Fade fade = new Fade();                fade.setDuration(3000);                getWindow().setEnterTransition(fade);                break;            case "share":                break;        }        // 所有操作在设置内容视图之前        setContentView(R.layout.activity_two);    }}

ActivityTwo的布局xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent">    <ImageView        android:id="@+id/share"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_centerInParent="true"        android:layout_gravity="center_horizontal"        android:src="@mipmap/ic_guide_view_1"        android:onClick="share"        android:transitionName="shareTransition" /></RelativeLayout>