transición de animación de Android transición de animación

Transition过渡动画

introducir

De API 1existente Drawable Animationy View Animation, y API 11(Android 3.0)agregado más tarde Property Animation. La animación de transición Transitionse API 19(Android 4.4.2)agrega en formato .

 

La transición es una pantalla de animación simple. Este tipo de animación puede cambiar suavemente de una imagen a otra, no el tipo de cambio abrupto.

La transición puede simplemente cambiar entre dos fotogramas y, a menudo, se usa para cambiar entre selección y selección, o nuevas escenas progresivas en la actualidad.

El archivo XML contiene las imágenes de fotogramas cambiados. La etiqueta de transición sirve como contenedor, el elemento es el marco para cambiar y Android :drawable es la identificación de la imagen.

 

TransiciónDibujable

TransitionDrawable obtiene los recursos en la transición y luego llama a startTransition para cambiar. Esta función cambia el primer cuadro al segundo cuadro. reverseTransition es otro método de conmutación, que alternará dos fotogramas repetidamente y utilizará el segundo fotograma del conmutador anterior como el primer fotograma del conmutador siguiente.

 

Código de archivo 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>  

Código de actividad :

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

escenaDrawable.reverseTransition( 3000 );  

Introducción básica a la animación de transición (Transición de actividad)

Android 5.0 proporciona tres tipos de Transición
para ingresar : determine cómo todas las vistas en la Actividad ingresan a la pantalla.
Salir : determina cómo todas las vistas de una actividad salen de la pantalla.
Elementos compartidos : decida cómo compartir (sus) puntos de vista al realizar la transición entre dos actividades.

 

Entrar y salir incluyen los siguientes efectos de animación

explotar (descomposición)  - entrar o salir desde el centro de la pantalla

deslizar  : moverse hacia adentro o hacia afuera desde el borde de la pantalla

desvanecerse (desvanecerse)  : cambiando la opacidad de la vista en la pantalla para agregar o eliminar el efecto de la vista

 

Los elementos compartidos contienen los siguientes efectos de animación

changeBounds  : cambia los límites del diseño de la vista de destino

changeClipBounds  - Recorta los límites de la vista de destino

changeTransform  : cambie la escala y la rotación de la vista de destino

changeImageTransform  : cambie el tamaño y la escala de la imagen de destino

 

usar

configuración xml

Usa la propiedad android :windowContentTransitions para habilitar las transiciones de contenido de ventana (efectos) cuando defines estilos que heredan del tema material . También puede especificar entradas, salidas y transiciones para elementos compartidos:

<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>  

Definir animación de transición

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

configuración de código

ActividadA

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

ActividadB

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

uso de estilo

Establezca una animación de entrada, el valor predeterminado es el mismo tipo de animación al salir

 

setExitTransition() - Cuando A inicia B , hace que la Vista en A salga de la transición de la escena

setEnterTransition () - Cuando A inicia B , haga que la Vista en B ingrese la transición de la escena

setReturnTransition() - Cuando B regresa a A , hace que la Vista en B salga de la transición de la escena

setReenterTransition () - Cuando B regresa a A , haga que la Vista en A ingrese a la transición de la escena

 

 

Animación de elementos compartidos

首先需要在他的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());

Animación de transición para elementos de diseño

El marco de transición también se puede utilizar para animar la transición de una vista de un estado a otro en un diseño de actividad .

// implementación sencilla

Administrador de transición . comenzar la Transición Retrasada ( raíz de la escena );

Esto cambia las propiedades de la vista correspondiente , haciéndola más grande. El marco de transición registrará los valores inicial y final y luego creará una animación de transición. .

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);
    }

Ejemplo de implementación

Actividad principal

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());

    }

}

El diseño xml de MainActivity:

<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>

ActividadDos

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);
    }
}

xml de diseño de ActivityTwo:

<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>