Android知识Android开发Android技术知识

谁说Android的动画不廉价（二）之转场动画

2017-03-07  本文已影响429人  Android开发哥

本系列文章一共5篇
谁说Android的动画不廉价（一）之项目分层
谁说Android的动画不廉价（二）之转场动画
谁说Android的动画不廉价（三）之共享元素动画
谁说Android的动画不廉价（四）之元素动画
谁说Android的动画不廉价（五）之水波纹动画
GitHub源码

引言

本篇博文是基于上一篇博文谁说Android的动画不廉价（一）之项目分层的基础上做的拓展。需要实现的是Android下面这种转场效果。

目标效果图

主界面 
<?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">

    <include layout="@layout/tool_bar" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:focusableInTouchMode="true"
        android:onClick="transition"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="30dp"
            android:src="@drawable/circle_blue" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="转场动画"
            android:textSize="20sp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:focusableInTouchMode="true"
        android:onClick="shareElements"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/img"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="30dp"
            android:src="@drawable/circle_orange"
            android:transitionName="share" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="共享元素动画"
            android:textSize="20sp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:focusableInTouchMode="true"
        android:onClick="viewAnimations"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="30dp"
            android:src="@drawable/circle_red" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="元素动画"
            android:textSize="20sp" />

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:focusableInTouchMode="true"
        android:onClick="circularAnimations"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/img1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="30dp"
            android:src="@drawable/circle_yellow"
            android:transitionName="share1" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:onClick="circularAnimations"
            android:text="水波纹动画"
            android:textSize="20sp" />

    </LinearLayout>
</LinearLayout>

activity_transition_demo.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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <include layout="@layout/tool_bar" />

    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="30dp"
        android:src="@drawable/circle_orange" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:text="Android是一种基于Linux的自由及开放源代码的操作系统，主要使用于移动设备，如智能手机和平板电脑，由Google公司和开放手机联盟领导及开发。尚未有统一中文名称，中国大陆地区较多人使用“安卓”或“安致”。"
        android:textSize="18sp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:onClick="exit"
        android:text="Exit" />
</LinearLayout>

代码文件

MainActivity.java

package demo.august1996.top.transitionanimationsdemo;

import android.content.Intent;
import android.support.v4.app.ActivityOptionsCompat;
import android.transition.Slide;
import android.view.Gravity;
import android.view.View;

import demo.august1996.top.transitionanimationsdemo.Activity.ToolbarActivity;

public class MainActivity extends ToolbarActivity {

    @Override
    protected void beforeInitView() {
        super.beforeInitView();

        Slide slideTransition = new Slide();
        slideTransition.setSlideEdge(Gravity.LEFT);
        slideTransition.setDuration(1000);
        getWindow().setReenterTransition(slideTransition);
        getWindow().setExitTransition(slideTransition);
    }

    @Override
    protected void initView() {

    }

    @Override
    protected int getContentViewID() {
        return R.layout.activity_main;
    }

    @Override
    protected String getToolbarTitle() {
        return "谁说Android的动画不廉价";
    }

    public void transition(View v) {
        Intent intent = new Intent(this, TransitionActivity.class);
        ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this);
        startActivity(intent, activityOptionsCompat.toBundle());
    }

    public void shareElements(View v) {

    }

    public void viewAnimations(View v) {

    }

    public void circularAnimations(View v) {

    }
}

这里的代码量比较少，大多数东西是从前面提到过的。直接看TransitionActivity的代码

TransitionActivity.java

package demo.august1996.top.transitionanimationsdemo;

import android.content.Intent;
import android.support.v4.app.ActivityOptionsCompat;
import android.view.View;

import demo.august1996.top.transitionanimationsdemo.Activity.ToolbarActivity;

public class TransitionActivity extends ToolbarActivity {

    public static final int EXPLODE_CODE = 1;
    public static final int EXPLODE_XML = 2;
    public static final int SLIDE_CODE = 3;
    public static final int SLIDE_XML = 4;


    @Override
    protected void beforeInitView() {
        super.beforeInitView();
    }

    @Override
    protected void initView() {

    }

    @Override
    protected int getContentViewID() {
        return R.layout.activity_transition;
    }

    @Override
    protected String getToolbarTitle() {
        return "转场动画";
    }

    public void explodeCode(View v) {
        Intent intent = new Intent(this, TransitionDemoActivity.class);
        intent.putExtra("type", EXPLODE_CODE);
        ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this);
        startActivity(intent, activityOptionsCompat.toBundle());
    }

    public void explodeXML(View v) {
        Intent intent = new Intent(this, TransitionDemoActivity.class);
        intent.putExtra("type", EXPLODE_XML);
        ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this);
        startActivity(intent, activityOptionsCompat.toBundle());
    }

    public void slideCode(View v) {
        Intent intent = new Intent(this, TransitionDemoActivity.class);
        intent.putExtra("type", SLIDE_CODE);
        ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this);
        startActivity(intent, activityOptionsCompat.toBundle());
    }

    public void slideXML(View v) {
        Intent intent = new Intent(this, TransitionDemoActivity.class);
        intent.putExtra("type", SLIDE_XML);
        ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(this);
        startActivity(intent, activityOptionsCompat.toBundle());
    }

    @Override
    protected boolean canBack() {
        return true;
    }
}

其实这里也没有太多的代码主要是根据不同的参数去启动Activity，我们主要的动画代码其实是在TransitionDemoActivity里面

TransitionDemoActivity.java

这才是主要的代码

package demo.august1996.top.transitionanimationsdemo;

import android.transition.Explode;
import android.transition.Slide;
import android.transition.Transition;
import android.transition.TransitionInflater;
import android.view.Gravity;
import android.view.View;
import android.view.animation.DecelerateInterpolator;

import demo.august1996.top.transitionanimationsdemo.Activity.ToolbarActivity;

public class TransitionDemoActivity extends ToolbarActivity {


    @Override
    protected void beforeInitView() {
        super.beforeInitView();
        Transition transition = null;
        switch (getIntent().getIntExtra("type", -1)) {
            case TransitionActivity.EXPLODE_CODE:
                transition = new Explode();
                transition.setDuration(1000);
                transition.setInterpolator(new DecelerateInterpolator());
                break;
            case TransitionActivity.EXPLODE_XML:
                transition = TransitionInflater.from(this).inflateTransition(R.transition.simple_explode);
                break;
            case TransitionActivity.SLIDE_CODE:
                transition = new Slide();
                ((Slide) transition).setSlideEdge(Gravity.RIGHT);
                transition.setDuration(1000);
                transition.setInterpolator(new DecelerateInterpolator());
                break;
            case TransitionActivity.SLIDE_XML:
                transition = TransitionInflater.from(this).inflateTransition(R.transition.simple_slide);
                break;
        }
        if (transition != null) {
            getWindow().setEnterTransition(transition);
            getWindow().setExitTransition(transition);
        }
    }

    @Override
    protected String getToolbarTitle() {
        return "转场动画看这里";
    }

    @Override
    protected void initView() {

    }

    @Override
    protected int getContentViewID() {
        return R.layout.activity_transition_demo;
    }

    public void exit(View v) {
        finishAfterTransition();
    }

    @Override
    protected boolean canBack() {
        return true;
    }
}

咋一看，这里也没多少代码。。。所以说Android的动画其实也是很廉价的。最主要看看下面两个动画资源文件怎么写。

动画资源文件

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <explode
        android:duration="1000"
        android:interpolator="@android:interpolator/bounce" />
</transitionSet>

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <slide
        android:duration="1000"
        android:interpolator="@android:interpolator/decelerate_cubic"
        android:slideEdge="bottom" />
</transitionSet>

我们的效果图

转场动画

总结

Android动画真的很廉价。。。

上一篇下一篇

猜你喜欢

热点阅读