Activity转场动画的学习

作者: 谢尔顿 | 来源:发表于2018-02-06 11:48 被阅读19次

前言

学习完大神Carson_Ho关于动画的一系列文章后，这篇文章是我自己结合一些文章总结的关于Android 5.0的转场动画。

参考文章：

1.传统转场动画

该部分在文章Android补间动画的学习中也有阐述。
效果图：

效果图

动画xml文件的准备

slide_right_in.xml

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

    <translate
        android:fromXDelta="100%"
        android:toXDelta="0%"
        android:duration = "500"
        />

</set>

slide_left_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
    android:fromXDelta="0%"
    android:toXDelta="-40%"
    android:duration = "500"
    />
</set>

slide_left_in.xml

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

    <translate
        android:fromXDelta="-100%"
        android:toXDelta="0%"
        android:duration="500"
        />
</set>

slide_right_out.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0%"
        android:toXDelta="100%"
        android:duration = "500"
        />
</set>

在activity中使用

ActivityA的代码

startActivity(new Intent(TransitionsActivity.this,TraditionalActivity.class));
overridePendingTransition(R.anim.slide_right_in,R.anim.slide_left_out);

ActivityB的代码

finish();
overridePendingTransition(R.anim.slide_left_in, R.anim.slide_right_out);

2. Android 5.0新的转场动画

Android 5.0新的转场动画有四种，Explode、Slide、Fade、Share。
效果图：

效果图

（1）Explode
Explode的效果是下一个页面的元素从四面八方进入，最终形成完整的页面。代码如下：

// 跳转
Intent intent = new Intent(this, CActivity.class);
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

// 跳转的Activity
public class CActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setEnterTransition(new Explode());
        setContentView(R.layout.activity_c);
    }
}

在跳转时需要注意的点是：intent后面还要再传一个参数bundle，固定写法ActivityOptions.makeSceneTransitionAnimation(this).toBundle()，下一个Activity根据这个就能识别出使用5.0新转场动画。

跳转的Activity在onCreate方法中，调用getWindow().setEnterTransition(new Explode())即可，必须在setContentView之前调用。

（2）Slide
Slide就是下一个页面元素从底部一次向上运动，最终形成完整的页面。代码如下：

// 跳转
Intent intent = new Intent(this, CActivity.class);
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

// 跳转的Activity
public class CActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setEnterTransition(new Slide());
        setContentView(R.layout.activity_c);
    }
}

与Explode唯一的区别就是在跳转的Activiy的onCreate方法中设置transition为Slide即可。

（3）Fade
Fade就是下一个页面元素渐变出现，最终形成完整的页面。代码如下：

// 跳转
Intent intent = new Intent(this, CActivity.class);
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

// 跳转的Activity
public class CActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setEnterTransition(new Fade());
        getWindow().setExitTransition(new Fade());
        setContentView(R.layout.activity_c);
    }
}

同样，就是跳转的Activity在onCreate方法中设置transition为Fade即可，只不过这里最好同时设置Enter和Exit。

（4）Share
Share是最复杂的一种转场方式，在跳转的两个Activity之间，如果有相同的View元素，那么，两个元素就可以设置成共享状态，在跳转时，这个View就会从第一个Activity的显示状态过渡到第二个Activity的显示状态，给用户的感觉仿佛是两个Activity共享一个View。

下面是share的单独效果图：

效果图

前后两个Activity都有两个共同的元素，一个机器人Logo，一个Android文字，但是他们在两个Activity中的位置、大小都不一样，于是，在两个Activity跳转过程中，位置、大小会自动有一个渐变的过程，从第一个Activity的状态渐变到第二个Activity的状态，从而给人一种两个Activity共享元素的感觉。

代码如下：

<!-- 首先，两个Activity共享的元素需要设置相同的transitionName： android:transitionName="fab" -->
<Button
     android:id="@+id/fab_button"
     android:layout_width="56dp"
     android:layout_height="56dp"
     android:background="@mipmap/ic_launcher"
     android:elevation="5dp"
     android:onClick="explode"
     android:transitionName="fab" />

<Button
     android:id="@+id/fab_button"
     android:layout_width="160dp"
     android:layout_height="160dp"
     android:layout_alignParentEnd="true"
     android:layout_below="@id/holder_view"
     android:layout_marginTop="-80dp"
     android:background="@mipmap/ic_launcher"
     android:elevation="5dp"
     android:transitionName="fab" />

// 跳转时，要为每一个共享的view设置对应的transitionName
View fab = findViewById(R.id.fab_button);
View txName = findViewById(R.id.tx_user_name);
intent = new Intent(this, CActivity.class);
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view, "share"),
        Pair.create(fab, "fab"),
        Pair.create(txName, "user_name"))
        .toBundle());

// 跳转的Activity在onCreate方法中开启Transition模式
public class CActivity extends AppCompatActivity {

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
        setContentView(R.layout.activity_c);
    }
}

（5）Share转场的经典例子
效果图：

效果图

用到的布局文件

activity_typical.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:padding="20dp"
    tools:context="com.gjj.androidstudydemo.activity.TypicalActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

rv_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:paddingBottom="12dp">

    <ImageView
        android:id="@+id/head_image"
        android:layout_width="86dp"
        android:layout_height="86dp"
        android:scaleType="centerCrop"
        android:transitionName="headImage"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="64dp"
        android:layout_marginLeft="16dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:textStyle="bold"
            android:textColor="#383838"
            android:layout_marginTop="6dp"
            android:transitionName="name"/>

        <TextView
            android:id="@+id/desc"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:textColor="#808080"
            android:layout_marginTop="12dp"
            android:transitionName="desc"/>
    </LinearLayout>
</LinearLayout>

Activity的代码

package com.gjj.androidstudydemo.activity;

import android.app.ActivityOptions;
import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.Pair;
import android.view.View;

import com.gjj.androidstudydemo.R;
import com.gjj.androidstudydemo.adapter.RVAdapter;
import com.gjj.androidstudydemo.bean.RVBean;

import java.util.ArrayList;

import butterknife.BindView;
import butterknife.ButterKnife;

public class TypicalActivity extends AppCompatActivity implements RVAdapter.RVClickListener {


    @BindView(R.id.rv)
    RecyclerView mRv;
    private ArrayList<RVBean> beans;
    private RVAdapter mRVAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_typical);
        ButterKnife.bind(this);
        setTitle("典型应用");
        init();
    }

    /**
     * 初始化控件和数据
     */
    private void init() {
        mRv.setLayoutManager(new LinearLayoutManager(this,LinearLayoutManager.VERTICAL,false));

        beans = new ArrayList<>();
        beans.add(new RVBean("谈笑冯生", R.mipmap.head_image_01, "低调奢华有内涵"));
        beans.add(new RVBean("高鹏展翅", R.mipmap.head_image_02, "桌游传奇小王子"));
        beans.add(new RVBean("珉而好学", R.mipmap.head_image_03, "套路王"));
        beans.add(new RVBean("汰渍洗衣粉，加亮不加价", R.mipmap.head_image_04, "What are you 说啥捏？"));
        beans.add(new RVBean("尼古拉斯.赵政", R.mipmap.head_image_05, "亚洲舞王不解释"));

        beans.add(new RVBean("谈笑冯生", R.mipmap.head_image_06, "低调奢华有内涵"));
        beans.add(new RVBean("高鹏展翅", R.mipmap.head_image_07, "桌游传奇小王子"));
        beans.add(new RVBean("珉而好学", R.mipmap.head_image_08, "套路王"));
        beans.add(new RVBean("汰渍洗衣粉，加亮不加价", R.mipmap.head_image_09, "What are you 说啥捏？"));
        beans.add(new RVBean("尼古拉斯.赵政", R.mipmap.head_image_10, "亚洲舞王不解释"));

        beans.add(new RVBean("谈笑冯生", R.mipmap.head_image_11, "低调奢华有内涵"));
        beans.add(new RVBean("高鹏展翅", R.mipmap.head_image_12, "桌游传奇小王子"));
        beans.add(new RVBean("珉而好学", R.mipmap.head_image_13, "套路王"));
        beans.add(new RVBean("汰渍洗衣粉，加亮不加价", R.mipmap.head_image_14, "What are you 说啥捏？"));
        beans.add(new RVBean("尼古拉斯.赵政", R.mipmap.head_image_15, "亚洲舞王不解释"));

        beans.add(new RVBean("谈笑冯生", R.mipmap.head_image_16, "低调奢华有内涵"));
        beans.add(new RVBean("高鹏展翅", R.mipmap.head_image_17, "桌游传奇小王子"));
        beans.add(new RVBean("珉而好学", R.mipmap.head_image_18, "套路王"));
        beans.add(new RVBean("汰渍洗衣粉，加亮不加价", R.mipmap.head_image_19, "What are you 说啥捏？"));
        beans.add(new RVBean("尼古拉斯.赵政", R.mipmap.head_image_20, "亚洲舞王不解释"));

        mRVAdapter = new RVAdapter(beans,this);
        mRv.setAdapter(mRVAdapter);
        mRVAdapter.setListener(this);
    }

    /**
     * 条目的点击事件
     * @param position
     */
    @Override
    public void onItemClick(int position) {
        RVBean bean = beans.get(position);

        Intent intent = new Intent(TypicalActivity.this, TypicalDetailActivity.class);
        intent.putExtra("resId",bean.getResId());
        intent.putExtra("name",bean.getName());
        intent.putExtra("desc",bean.getDesc());

        /**
         * 获取到点击条目的view
         */
        int firstVisiblePosition = ((LinearLayoutManager)mRv.getLayoutManager()).findFirstVisibleItemPosition();

        View itemView = mRv.getChildAt(position - firstVisiblePosition);
        View headImage = itemView.findViewById(R.id.head_image);
        View name = itemView.findViewById(R.id.name);
        View desc = itemView.findViewById(R.id.desc);
        //启动activity时，使用共享元素
        startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this,
                Pair.create(headImage,"headImage"),
                Pair.create(name,"name"),
                Pair.create(desc,"desc")).toBundle());
    }
}

跳转后Activity的布局文件

<?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/iv_head"
        android:layout_width="match_parent"
        android:layout_height="280dp"
        android:scaleType="centerCrop"
        android:transitionName="headImage"/>

    <TextView
        android:id="@+id/tx_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="28sp"
        android:textColor="#383838"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="16dp"
        android:transitionName="name"/>

    <TextView
        android:id="@+id/tx_desc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:textColor="#808080"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="16dp"
        android:transitionName="desc"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:textColor="#808080"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:text="社会主义核心价值观是社会主义核心价值体系的内核，体现社会主义核心价值体系的根本性质和基本特征，反映社会主义核心价值体系的丰富内涵和实践要求，是社会主义核心价值体系的高度凝练和集中表达。"/>
</LinearLayout>

跳转后activity的代码

package com.gjj.androidstudydemo.activity;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;
import android.widget.TextView;

import com.gjj.androidstudydemo.R;

import butterknife.BindView;
import butterknife.ButterKnife;

public class TypicalDetailActivity extends AppCompatActivity {

    @BindView(R.id.iv_head)
    ImageView mIvHead;
    @BindView(R.id.tx_name)
    TextView mTxName;
    @BindView(R.id.tx_desc)
    TextView mTxDesc;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_typical_detail);
        ButterKnife.bind(this);
        Intent intent = getIntent();
        String name = intent.getStringExtra("name");
        String desc = intent.getStringExtra("desc");
        int resId = intent.getIntExtra("resId", 0);
        mIvHead.setImageResource(resId);
        mTxName.setText(name);
        mTxDesc.setText(desc);
    }
}

Activity转场动画的学习

前言

1.传统转场动画

2. Android 5.0新的转场动画

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读