当前位置:   article > 正文

Android Transition框架介绍&使用_android studio transition库

android studio transition库

简介

自KitKat起,Android加入了Android Transition框架,可以帮助我们做一些Activity级别或View级别的动画效果,今天的内容就是如何在View上使用Transition。

有别于传统的Animation,Transition需要对动画前后设置不同布局,通过相应的API实现两个布局的切换动画。而传统Animation只会对应一个布局文件,动画结束时,即使设置了fillAfter(true)让画面停留在动画的最后一帧也不会对布局产生影响。现在,对于这种动画前后需要改变布局的场景,我们可以使用Transition。

1.创建应用程序:

第一步:

使用Android Studio创建一个新的工程。建一个空的Activity。由于本例使用了一些5.0加入的API,SDK版本请使用21.

第二步:

创建一些Demo中需要用到的Drawable。我们将使用Shape创建4个圆形,每一个都有不同的颜色与渐进效果。首先在drawable目录下新建一个文件:shape1.xml

  1. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:dither="true"
  3. android:shape="oval">
  4. <!--gradientRadius 很难理解,**%的形式在三星note机型上表现非常差!
  5. 使用float值在5.0上的表现非常差! -->
  6. <!-- %意识是相对于自己的尺寸,%p是相对于自己Parent的-->
  7. <gradient
  8. android:endColor="#66ff0000"
  9. android:gradientRadius="75%"
  10. android:centerColor="#ffffcc00"
  11. android:startColor="#ffffcc00"
  12. android:type="radial"
  13. android:useLevel="false"/>
  14. <size
  15. android:height="100dp"
  16. android:width="100dp"/>
  17. </shape>

以上代码构建出的是一个由渐变色填充而成的圆形图案。而四个图形在大小与样式方面完全相同,仅仅在色彩上有所区别。当然,大家可能需要为不同像素密度的设备分别准备多种不同版本的图形。利用以下代码创建shape2.xml:

  1. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:dither="true"
  3. android:shape="oval" >
  4. <gradient
  5. android:endColor="#66ffcc00"
  6. android:gradientRadius="75%"
  7. android:startColor="#ff00ff00"
  8. android:type="radial"
  9. android:useLevel="false" />
  10. <size
  11. android:height="100dp"
  12. android:width="100dp" />
  13. </shape>

接着创建shape3.xml

  1. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:dither="true"
  3. android:shape="oval" >
  4. <gradient
  5. android:endColor="#6600ff00"
  6. android:gradientRadius="75%"
  7. android:startColor="#ff0000ff"
  8. android:type="radial"
  9. android:useLevel="false" />
  10. <size
  11. android:height="100dp"
  12. android:width="100dp" />
  13. </shape>
最后创建shape4.xml

  1. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:dither="true"
  3. android:shape="oval" >
  4. <gradient
  5. android:endColor="#660000ff"
  6. android:gradientRadius="75%"
  7. android:startColor="#ffff0000"
  8. android:type="radial"
  9. android:useLevel="false" />
  10. <size
  11. android:height="100dp"
  12. android:width="100dp" />
  13. </shape>
我们将把这些图形作为ImageButtons应用在两种布局场景之内。

2.创建布局

第一步

我们需要为每个动画创建两个布局,分别对应动画前的状态和动画后的状态。在Transition中,这两个状态被定义成Scene,Transition就是不同Scene之间的切换效果。不同Scene的布局文件可以有重名控件,并且往往看起来差不多,只是同一个控件的位置大小图片等属性不一样。

OK,现在我们创建布局文件,在res/layout目录下新建scene_1.xml。

首先我们添加一个RelativeLayout用来容纳我们后面的ImageButton:

  1. <pre name="code" class="html"><RelativeLayout
  2. xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:tools="http://schemas.android.com/tools"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:id="@+id/container"
  7. tools:context="xzy.demo.androidtestapi.transition.TestTransition">
  8. </RelativeLayout>

 
接着向这个RelativeLayout中添加4个ImageButton,每个ImageButton会只用1个我们之前创建的shape. 

  1. <ImageButton
  2. android:layout_width="wrap_content"
  3. android:layout_height="wrap_content"
  4. android:id="@+id/btn1"
  5. android:src="@drawable/shape1"
  6. android:background="#00000000"
  7. android:contentDescription="shape"
  8. android:layout_alignParentLeft="true"
  9. android:layout_alignParentTop="true"
  10. android:scaleType="centerInside"
  11. />
  12. <ImageButton
  13. android:layout_width="wrap_content"
  14. android:layout_height="wrap_content"
  15. android:id="@+id/btn2"
  16. android:src="@drawable/shape2"
  17. android:background="#00000000"
  18. android:contentDescription="shape"
  19. android:layout_alignParentRight="true"
  20. android:layout_alignParentTop="true"
  21. android:scaleType="centerInside"
  22. />
  23. <ImageButton
  24. android:layout_width="wrap_content"
  25. android:layout_height="wrap_content"
  26. android:id="@+id/btn3"
  27. android:src="@drawable/shape3"
  28. android:background="#00000000"
  29. android:contentDescription="shape"
  30. android:layout_alignParentLeft="true"
  31. android:layout_alignParentBottom="true"
  32. android:scaleType="centerInside"
  33. />
  34. <ImageButton
  35. android:layout_width="wrap_content"
  36. android:layout_height="wrap_content"
  37. android:id="@+id/btn4"
  38. android:src="@drawable/shape4"
  39. android:background="#00000000"
  40. android:contentDescription="shape"
  41. android:layout_alignParentRight="true"
  42. android:layout_alignParentBottom="true"
  43. android:scaleType="centerInside"
  44. />

注意,需要对scene中的每个控件单独设置ID和事件,即使不同scene中的控件ID相同,也许要单独设置事件。

在IDE中,我们的布局预览效果如下:


接下来,我们创建scene_2.xml:

  1. <RelativeLayout
  2. xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:tools="http://schemas.android.com/tools"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:id="@+id/container"
  7. tools:context="xzy.demo.androidtestapi.transition.TestTransition">
  8. <ImageButton
  9. android:layout_width="wrap_content"
  10. android:layout_height="wrap_content"
  11. android:id="@+id/btn1"
  12. android:src="@drawable/shape1"
  13. android:background="#00000000"
  14. android:contentDescription="shape"
  15. android:layout_alignParentRight="true"
  16. android:layout_alignParentBottom="true"
  17. android:scaleType="centerInside"
  18. android:onClick="changeScene"/>
  19. <ImageButton
  20. android:layout_width="wrap_content"
  21. android:layout_height="wrap_content"
  22. android:id="@+id/btn2"
  23. android:src="@drawable/shape2"
  24. android:background="#00000000"
  25. android:contentDescription="shape"
  26. android:layout_alignParentLeft="true"
  27. android:layout_alignParentBottom="true"
  28. android:scaleType="centerInside"
  29. android:onClick="changeScene"/>
  30. <ImageButton
  31. android:layout_width="wrap_content"
  32. android:layout_height="wrap_content"
  33. android:id="@+id/btn3"
  34. android:src="@drawable/shape3"
  35. android:background="#00000000"
  36. android:contentDescription="shape"
  37. android:layout_alignParentRight="true"
  38. android:layout_alignParentTop="true"
  39. android:scaleType="centerInside"
  40. android:onClick="changeScene"/>
  41. <ImageButton
  42. android:layout_width="wrap_content"
  43. android:layout_height="wrap_content"
  44. android:id="@+id/btn4"
  45. android:src="@drawable/shape4"
  46. android:background="#00000000"
  47. android:contentDescription="shape"
  48. android:layout_alignParentLeft="true"
  49. android:layout_alignParentTop="true"
  50. android:scaleType="centerInside"
  51. android:onClick="changeScene"/>
  52. </RelativeLayout>
最后是scene_3.xml

  1. <RelativeLayout
  2. xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:tools="http://schemas.android.com/tools"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:id="@+id/container"
  7. tools:context="xzy.demo.androidtestapi.transition.TestTransition">
  8. <ImageButton
  9. android:layout_width="wrap_content"
  10. android:layout_height="wrap_content"
  11. android:id="@+id/btn1"
  12. android:src="@drawable/shape1"
  13. android:background="#00000000"
  14. android:contentDescription="shape"
  15. android:layout_alignParentRight="true"
  16. android:layout_alignParentBottom="true"
  17. android:scaleType="centerInside"
  18. android:onClick="changeScene"/>
  19. <ImageButton
  20. android:layout_width="wrap_content"
  21. android:layout_height="wrap_content"
  22. android:id="@+id/btn2"
  23. android:src="@drawable/shape2"
  24. android:background="#00000000"
  25. android:contentDescription="shape"
  26. android:layout_alignParentRight="true"
  27. android:layout_alignParentBottom="true"
  28. android:scaleType="centerInside"
  29. android:onClick="changeScene"/>
  30. <ImageButton
  31. android:layout_width="wrap_content"
  32. android:layout_height="wrap_content"
  33. android:id="@+id/btn3"
  34. android:src="@drawable/shape3"
  35. android:background="#00000000"
  36. android:contentDescription="shape"
  37. android:layout_alignParentRight="true"
  38. android:layout_alignParentBottom="true"
  39. android:scaleType="centerInside"
  40. android:onClick="changeScene"/>
  41. <ImageButton
  42. android:layout_width="wrap_content"
  43. android:layout_height="wrap_content"
  44. android:id="@+id/btn4"
  45. android:src="@drawable/shape4"
  46. android:background="#00000000"
  47. android:contentDescription="shape"
  48. android:layout_alignParentRight="true"
  49. android:layout_alignParentBottom="true"
  50. android:scaleType="centerInside"
  51. android:onClick="changeScene"/>
  52. <TextView
  53. android:id="@+id/info"
  54. android:text="序列动画,会在球动完后出来"
  55. android:layout_centerInParent="true"
  56. android:layout_width="wrap_content"
  57. android:layout_height="wrap_content"/>
  58. </RelativeLayout>

现在我们回头看一下三个scene,除了ImageButton的位置,这三个布局基本相同。

3.不同场景使用Transition进行过渡:

第一步

打开创建的主Activity,在onCreate()之前做如下申明:

  1. private Scene mScene1, mScene2, mScene3;
  2. private RelativeLayout mBaseLayout;
  3. private TransitionManager mCustomTransitionManager;

      第二步:

编写一些初始化代码,在onCreate()中自动创建的代码后面添加以下代码:

  1. setContentView(R.layout.base_transition_layout);
  2. //得到容器ViewGroup
  3. mBaseLayout = (RelativeLayout) findViewById(R.id.base);
  4. //创建三个场景
  5. mScene1 = new Scene(mBaseLayout, mBaseLayout.findViewById(R.id.container));
  6. mScene2 = Scene.getSceneForLayout(mBaseLayout, R.layout.scene_2, this);
  7. mScene3 = Scene.getSceneForLayout(mBaseLayout, R.layout.scene_3, this);
  8. //create transition, set properties
  9. TransitionInflater inflater = TransitionInflater.from(this);
  10. mCustomTransitionManager = inflater.inflateTransitionManager(R.transition.transition_mgr,
  11. mBaseLayout);

首先,我们要对容器ViewGroup进行定义,后面的每个scene都是添加到这个容器中的。然后我们初始化不同的scene,每个Transition会对应两个Scene,通过这种方式,Android将能够根据我们的需要在两个场景之间进行过渡、并将不同场景下具备相同ID的任意视图元素作为同一对象加以处理,这样场景切换时就能显示出动画式的变化效果。

      第三步:

设置点击事件,触发不同的Transition动画:

  1. public void changeScene(View v) {
  2. if (v.getId() == R.id.anim_1) {
  3. //简单的写法,直接用TransitionManager,使用默认动画效果
  4. TransitionManager.go(mScene1);
  5. } else if (v.getId() == R.id.anim_2) {
  6. TransitionManager.go(mScene2);
  7. } else if (v.getId() == R.id.anim_3) {
  8. mCustomTransitionManager.transitionTo(mScene3);
  9. } else if (v.getId() == R.id.anim_4) {
  10. //在下一帧进行动画,可以继续设置属性等
  11. TransitionManager.beginDelayedTransition(mBaseLayout);
  12. //可以继续设置View的属性,不会影响动画
  13. ImageView btn4 = (ImageView) mBaseLayout.findViewById(R.id.btn4);
  14. ViewGroup.LayoutParams params = btn4.getLayoutParams();
  15. if (params.width > dip2px(this, 51)) {
  16. params.width = dip2px(this, 51);
  17. params.height = dip2px(this, 50);
  18. } else {
  19. params.width = dip2px(this, 100);
  20. params.height = dip2px(this, 100);
  21. }
  22. btn4.setLayoutParams(params);
  23. }
  24. }

Android提供了一系列过渡类型可供选择,大家可以根据自己需要的场景变化方式采用其中的不同动画效果。在今天的Demo中,我们使用
TransitionManager.go(mScene2);

来触发默认的动画效果,采用:

mCustomTransitionManager.transitionTo(mScene3);

来触发我们自定义的动画效果。 Android会计算如何根据我们设置的Transition属性在两个Scene间实现基过渡。感兴趣的朋友也可以点击此处查看更多与Transition引用相关的选项。

程序主Activity代码如下:

  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="#ff000000"
  6. tools:context="xzy.demo.androidtestapi.transition.TestTransition">
  7. <Button
  8. android:id="@+id/anim_1"
  9. android:layout_width="wrap_content"
  10. android:layout_height="wrap_content"
  11. android:onClick="changeScene"
  12. android:text="演示1"
  13. />
  14. <Button
  15. android:id="@+id/anim_2"
  16. android:layout_width="wrap_content"
  17. android:layout_height="wrap_content"
  18. android:layout_toRightOf="@id/anim_1"
  19. android:onClick="changeScene"
  20. android:text="演示2"
  21. />
  22. <Button
  23. android:id="@+id/anim_3"
  24. android:layout_width="wrap_content"
  25. android:layout_height="wrap_content"
  26. android:layout_toRightOf="@id/anim_2"
  27. android:onClick="changeScene"
  28. android:text="演示3"
  29. />
  30. <Button
  31. android:id="@+id/anim_4"
  32. android:layout_width="wrap_content"
  33. android:layout_height="wrap_content"
  34. android:layout_toRightOf="@id/anim_3"
  35. android:onClick="changeScene"
  36. android:text="演示4"
  37. />
  38. <RelativeLayout
  39. android:layout_width="match_parent"
  40. android:layout_height="match_parent"
  41. android:id="@+id/base"
  42. android:layout_below="@id/anim_1">
  43. <include layout="@layout/scene_1"
  44. />
  45. </RelativeLayout>
  46. </RelativeLayout>

现在大家可以运行自己的程序,点击不同的Button查看不同Transition的动画效果。


总结:

在今天的文章中,我们事实上还只是初步了解了自己能够利用Android Transition框架实现怎样的设计方案与过渡效果。要在自己的应用程序中引入更多过渡机制,大家可以点击此处查看TransitionManager类当中的其它方法,其中包括beginDelayedTransition与transitionTo。此外,大家也不妨尝试利用TransitionSet将多种过渡机制结合在一起,例如同时使用来自不同过渡机制的渐变与移动效果。根据过渡机制复杂程度的不同,大家可能还需要用到TransitionValues类,它能够提供与对应过渡相关的数据值引用能力。如果各位还想了解更多与场景处理相关的技术手段,也可以点击此处查看Scene类的相关说明。


DEMO APK下载地址:下载,需使用5.0设备安装

参考Blog:An Introduction to Android Transitions


作者:xzy2046,转载需注明。博客主页:http://blog.csdn.net/xzy2046

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/空白诗007/article/detail/995995
推荐阅读
相关标签
  

闽ICP备14008679号