Android高级UI开发(二十八)转场动画之多个共享元素、滑入滑出、淡入淡出

举报
yd_57386892 发表于 2020/12/29 00:58:03 2020/12/29
【摘要】 上一篇我们介绍了转场动画的基本用法,最关键的就是两个页面上的控件有一个共享名属性:transitionName,将两个页面上的两个控件的transitionName属性设置为相同的名字,然后再结合少量的JAVA代码就可以实现页面跳转的同时两个控件执行转场动画。上一篇我们只介绍了一组控件的共享元素:transitionName,那么如果有多组这样的控件,也就是说有多个共享元素的...

上一篇我们介绍了转场动画的基本用法,最关键的就是两个页面上的控件有一个共享名属性:transitionName,将两个页面上的两个控件的transitionName属性设置为相同的名字,然后再结合少量的JAVA代码就可以实现页面跳转的同时两个控件执行转场动画。上一篇我们只介绍了一组控件的共享元素:transitionName,那么如果有多组这样的控件,也就是说有多个共享元素的情况下,如何用JAVA代码来驱动多组控件的转场动画。先看一下运行效果:

(源码下载地址:https://download.csdn.net/download/gaoxiaoweiandy/11099369

我们发现第一个页面的jackson小图与第二个页面的jackson大图是一组,第一个页面的“转场”按钮与第二个页面的“返回偶像”

按钮是一组,两组控件都执行了转场动画,说明现在有2个共享元素,第一组控件共享一个transitionName,第二组控件共享一个transitionName。接下来我们就看一下具体如何实现,还是从布局讲起。

1. 多组转场动画

1.1 布局

activity_main.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"
      android:background="#ffffff"
      xmlns:app="http://schemas.android.com/apk/res-auto">
      <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="?attr/colorPrimary"
      app:title="转场动画"
      app:titleTextColor="#ffffff"
      app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
       />
      <ImageView
      android:layout_margin="10dp"
      android:layout_below="@+id/toolbar"
      android:id="@+id/iv1"
      android:layout_width="200dp"
      android:layout_height="wrap_content"
      android:scaleType="centerCrop"
      android:transitionName="imvJackson"
      android:src="@mipmap/jack1" />
      <Button
      android:layout_alignParentRight="true"
      android:layout_below="@+id/iv1"
      android:id="@+id/btTransition"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:transitionName="buttonTrans"
      android:text="转场" />
      </RelativeLayout>
  
 

从第一个页面中的布局可以看出我们分别为ImageView与Button设置了一个transitionName. 那么第二个页面中的控件肯定会与它们以相同的transitionName配对。我们现在就看一下第二个页面的布局,看是否如我们所猜想的。

activity_second.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"
      xmlns:app="http://schemas.android.com/apk/res-auto">
      <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="?attr/colorPrimary"
      app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
      app:title="网易新闻"
      app:titleTextColor="#ff0" />
      <ImageView
      android:id="@+id/iv1"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:scaleType="centerCrop"
      android:src="@mipmap/jack2"
      android:transitionName="imvJackson" />
      <Button
      android:transitionName="buttonTrans"
      android:id="@+id/btBack"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_alignParentBottom="true"
      android:layout_alignParentRight="true"
      android:text="返回偶像"></Button>
      </RelativeLayout>
  
 

我们可以看到第二个页面中的Imageview与第一个页面中的Imagview是一组,它们都共用一个共享transitionName="imvJackSon";然后两个Button是一组,它们共用的transitionName="buttonTrans"。这样就有2组控件,2个共享元素,当然将来执行2组转场动画,正如文章开始的动图所示。我们配置好了XML共享元素后,接下来看一下JAVA代码里如何调起这2组转场动画。

1. 2.  JAVA代码

1.2.1 MainActivity.java(第一个页面)


      package com.example.transitions;
      import android.app.Activity;
      import android.content.Intent;
      import android.os.Build;
      import android.os.Bundle;
      import android.support.v4.app.ActivityOptionsCompat;
      import android.support.v4.util.Pair;
      import android.support.v7.app.AppCompatActivity;
      import android.support.v7.widget.Toolbar;
      import android.view.View;
      import android.view.Window;
      import android.widget.Button;
      import android.widget.ImageView;
      public class MainActivity extends AppCompatActivity {
      private ImageView imvTransition1; //转场动画控件1
      private Button btTransition1; //转场动画控件2
      private Toolbar toolbar;
      @Override
      protected void onCreate(Bundle savedInstanceState) {
      //设置允许使用转场动画
       getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
      super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       toolbar = (Toolbar) findViewById(R.id.toolbar);
       setSupportActionBar(toolbar);
       imvTransition1 = (ImageView) findViewById(R.id.iv1);
       btTransition1 = (Button) findViewById(R.id.btTransition);
       btTransition1.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
      //iv1与btTransition1将执行转场动画
       Pair<View, String> pImv = Pair.create((View)imvTransition1,
      "imvJackson");
       Pair<View, String> pButton = Pair.create((View)btTransition1,"buttonTrans");
       ActivityOptionsCompat compat = ActivityOptionsCompat.makeSceneTransitionAnimation(
       MainActivity.this,
       pImv,
       pButton);
       Intent intent = new Intent();
       intent.setClass(MainActivity.this,SecondActivity.class);
       MainActivity.this.startActivity(intent,compat.toBundle());
       }
       });
       }
      }
  
 

这是第一个页面的代码,其中


      private ImageView imvTransition1; //转场动画控件1
      private Button btTransition1; //转场动画控件2
  
 

这两个控件将要执行转场动画,它们的transitionName与第二个页面中的控件共享。


      //iv1与btTransition1将执行转场动画
      Pair<View, String> pImv = Pair.create((View)imvTransition1,"imvJackson");
      Pair<View, String> pButton = Pair.create((View)btTransition1,"buttonTrans");
      ActivityOptionsCompat compat = ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this,pImv,pButton);
  
 

这里的makeSceneTransitionAnimation的函数原型是:

static ActivityOptionsCompat makeSceneTransitionAnimation(@NonNull Activity activity, Pair... sharedElements);

 

第一个参数就是当前页面MainActivity.this,第二个是一个可变参数,可以有多个Pair。每一个Pair使用Pair.create函数创建,这个create函数把要执行动画的控件与它的transitionName绑定成一个key,value对。

最后我们把这两个Pair:  pImv,pButton作为参数传入makeSceneTransitionAnimation函数调起多个控件的转场动画。

1.2.2 SecondActivity.java(第二个页面)


      public class SecondActivity extends AppCompatActivity {
     	private Toolbar toolbar;
     	private Button btBack;
     	@Override
     	protected void onCreate(Bundle savedInstanceState) {
      		getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
     		super.onCreate(savedInstanceState);
      		setContentView(R.layout.activity_second);
      		toolbar = (Toolbar)findViewById(R.id.toolbar);
      		setSupportActionBar(toolbar);
      		btBack = this.findViewById(R.id.btBack);
      		btBack.setOnClickListener(new View.OnClickListener() {
     			@Override
     			public void onClick(View v) {
       onBackPressed();
      			}
      		});
      	}
      }
  
 

第二个页面很简单,我们还是为btBack"返回偶像"按钮的单击响应函数里调用了 系统的onBackPressed函数,这个函数会帮我们实现转场动画:当返回到上一个页面时执行的逆向转场动画。

最终的运行效果如下:

2.  页面进入离开的转场动画

上面我们讲的转场动画的焦点都集中在某一个组件上,接下来我们来看一下页面之间的一些转场动画,比如滑入滑出。

2.1 滑入滑出动画

效果图如下:

布局不变(当然在这里已经不需要设置transitionName了),然后改变一下MainActivity.java中的按钮单击函数:

 


       btTransition1.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
       Slide slide = new Slide();
       slide.setDuration(300);
       getWindow().setExitTransition(slide);//出去的动画
       getWindow().setEnterTransition(slide);//进来的动画
       ActivityOptionsCompat
      optionsCompat=ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this);
       Intent intent = new Intent(MainActivity.this, SecondActivity.class);
       startActivity(intent, optionsCompat.toBundle());
       }
       });
  
 

2.2  Explode暴露动画

布局同上,也是只改变一下MainActivity.java中的按钮单击函数


       btTransition1.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
       Explode explode = new Explode();
       explode.setDuration(1000);
       getWindow().setExitTransition(explode);//出去的动画
       getWindow().setEnterTransition(explode);//进来的动画
       ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this);
       Intent intent = new Intent(MainActivity.this, SecondActivity.class);
       startActivity(intent, optionsCompat.toBundle());
       }
       });
  
 

效果图如下:

 

Ok,至此转场动画搞一段落。源码下载地址:https://download.csdn.net/download/gaoxiaoweiandy/11099369

文章来源: blog.csdn.net,作者:冉航--小虾米,版权归原作者所有,如需转载,请联系作者。

原文链接:blog.csdn.net/gaoxiaoweiandy/article/details/89096633

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。