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 (第一个页面的布局)


  
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. android:background="#ffffff"
  6. xmlns:app="http://schemas.android.com/apk/res-auto">
  7. <android.support.v7.widget.Toolbar
  8. android:id="@+id/toolbar"
  9. android:layout_width="match_parent"
  10. android:layout_height="wrap_content"
  11. android:background="?attr/colorPrimary"
  12. app:title="转场动画"
  13. app:titleTextColor="#ffffff"
  14. app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
  15. />
  16. <ImageView
  17. android:layout_margin="10dp"
  18. android:layout_below="@+id/toolbar"
  19. android:id="@+id/iv1"
  20. android:layout_width="200dp"
  21. android:layout_height="wrap_content"
  22. android:scaleType="centerCrop"
  23. android:transitionName="imvJackson"
  24. android:src="@mipmap/jack1" />
  25. <Button
  26. android:layout_alignParentRight="true"
  27. android:layout_below="@+id/iv1"
  28. android:id="@+id/btTransition"
  29. android:layout_width="wrap_content"
  30. android:layout_height="wrap_content"
  31. android:transitionName="buttonTrans"
  32. android:text="转场" />
  33. </RelativeLayout>

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

activity_second.xml (第二个页面的布局)


  
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. xmlns:app="http://schemas.android.com/apk/res-auto">
  6. <android.support.v7.widget.Toolbar
  7. android:id="@+id/toolbar"
  8. android:layout_width="match_parent"
  9. android:layout_height="wrap_content"
  10. android:background="?attr/colorPrimary"
  11. app:popupTheme="@style/ThemeOverlay.AppCompat.Dark"
  12. app:title="网易新闻"
  13. app:titleTextColor="#ff0" />
  14. <ImageView
  15. android:id="@+id/iv1"
  16. android:layout_width="match_parent"
  17. android:layout_height="match_parent"
  18. android:scaleType="centerCrop"
  19. android:src="@mipmap/jack2"
  20. android:transitionName="imvJackson" />
  21. <Button
  22. android:transitionName="buttonTrans"
  23. android:id="@+id/btBack"
  24. android:layout_width="wrap_content"
  25. android:layout_height="wrap_content"
  26. android:layout_alignParentBottom="true"
  27. android:layout_alignParentRight="true"
  28. android:text="返回偶像"></Button>
  29. </RelativeLayout>

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

1. 2.  JAVA代码

1.2.1 MainActivity.java(第一个页面)


  
  1. package com.example.transitions;
  2. import android.app.Activity;
  3. import android.content.Intent;
  4. import android.os.Build;
  5. import android.os.Bundle;
  6. import android.support.v4.app.ActivityOptionsCompat;
  7. import android.support.v4.util.Pair;
  8. import android.support.v7.app.AppCompatActivity;
  9. import android.support.v7.widget.Toolbar;
  10. import android.view.View;
  11. import android.view.Window;
  12. import android.widget.Button;
  13. import android.widget.ImageView;
  14. public class MainActivity extends AppCompatActivity {
  15. private ImageView imvTransition1; //转场动画控件1
  16. private Button btTransition1; //转场动画控件2
  17. private Toolbar toolbar;
  18. @Override
  19. protected void onCreate(Bundle savedInstanceState) {
  20. //设置允许使用转场动画
  21. getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
  22. super.onCreate(savedInstanceState);
  23. setContentView(R.layout.activity_main);
  24. toolbar = (Toolbar) findViewById(R.id.toolbar);
  25. setSupportActionBar(toolbar);
  26. imvTransition1 = (ImageView) findViewById(R.id.iv1);
  27. btTransition1 = (Button) findViewById(R.id.btTransition);
  28. btTransition1.setOnClickListener(new View.OnClickListener() {
  29. @Override
  30. public void onClick(View v) {
  31. //iv1与btTransition1将执行转场动画
  32. Pair<View, String> pImv = Pair.create((View)imvTransition1,
  33. "imvJackson");
  34. Pair<View, String> pButton = Pair.create((View)btTransition1,"buttonTrans");
  35. ActivityOptionsCompat compat = ActivityOptionsCompat.makeSceneTransitionAnimation(
  36. MainActivity.this,
  37. pImv,
  38. pButton);
  39. Intent intent = new Intent();
  40. intent.setClass(MainActivity.this,SecondActivity.class);
  41. MainActivity.this.startActivity(intent,compat.toBundle());
  42. }
  43. });
  44. }
  45. }

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


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

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


  
  1. //iv1与btTransition1将执行转场动画
  2. Pair<View, String> pImv = Pair.create((View)imvTransition1,"imvJackson");
  3. Pair<View, String> pButton = Pair.create((View)btTransition1,"buttonTrans");
  4. 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(第二个页面)


  
  1. public class SecondActivity extends AppCompatActivity {
  2. private Toolbar toolbar;
  3. private Button btBack;
  4. @Override
  5. protected void onCreate(Bundle savedInstanceState) {
  6. getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
  7. super.onCreate(savedInstanceState);
  8. setContentView(R.layout.activity_second);
  9. toolbar = (Toolbar)findViewById(R.id.toolbar);
  10. setSupportActionBar(toolbar);
  11. btBack = this.findViewById(R.id.btBack);
  12. btBack.setOnClickListener(new View.OnClickListener() {
  13. @Override
  14. public void onClick(View v) {
  15. onBackPressed();
  16. }
  17. });
  18. }
  19. }

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

最终的运行效果如下:

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

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

2.1 滑入滑出动画

效果图如下:

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

 


  
  1. btTransition1.setOnClickListener(new View.OnClickListener() {
  2. @Override
  3. public void onClick(View v) {
  4. Slide slide = new Slide();
  5. slide.setDuration(300);
  6. getWindow().setExitTransition(slide);//出去的动画
  7. getWindow().setEnterTransition(slide);//进来的动画
  8. ActivityOptionsCompat
  9. optionsCompat=ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this);
  10. Intent intent = new Intent(MainActivity.this, SecondActivity.class);
  11. startActivity(intent, optionsCompat.toBundle());
  12. }
  13. });

2.2  Explode暴露动画

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


  
  1. btTransition1.setOnClickListener(new View.OnClickListener() {
  2. @Override
  3. public void onClick(View v) {
  4. Explode explode = new Explode();
  5. explode.setDuration(1000);
  6. getWindow().setExitTransition(explode);//出去的动画
  7. getWindow().setEnterTransition(explode);//进来的动画
  8. ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(MainActivity.this);
  9. Intent intent = new Intent(MainActivity.this, SecondActivity.class);
  10. startActivity(intent, optionsCompat.toBundle());
  11. }
  12. });

效果图如下:

 

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个月内不可修改。

举报
请填写举报理由
0/200