Android进阶UI之5.0——过渡动画
2016-07-25 15:08
375 查看
1 概述
在Android5.x中,Google对动画效果进行了更深一步的诠释,为Activity的转场效果设计了更加丰富的动画效果。Android5.x提供了三种Transition类型。
1、进入:一个进入的过渡(动画)决定activity中的所有的视图怎么进入屏幕。
2、退出:一个退出的过渡(动画)决定一个activity中的所有视图怎么退出屏幕。
3、共享元素:一个共享元素过渡(动画)决定两个activities之间的过渡,怎么共享(它们)的视图。
进入和退出的效果包括:
explode(分解) –进或出地移动视图,从屏幕中间
slide(滑动) -进或出地移动视图,从屏幕边缘
fade(淡出) –通过改变屏幕上视图的不透明度达到添加或者移除视图(的效果)
2 使用步骤
2.1 xml设置
当你定义继承了material主题样式时,使用Android:windowContentTransitions属性启用窗口的内容转换(效果)。你还可以指定进入、退出、和共享元素的转换:<style name="myTheme" parent="android:Theme.Material"> <!-- 允许使用transitions --> <item name="android:windowContentTransitions">true</item> <!-- 指定进入和退出transitions --> <item name="android:windowEnterTransition">@transition/explode</item> <item name="android:windowExitTransition">@transition/explode</item> <!-- 指定shared element transitions --> <item name="android:windowSharedElementEnterTransition"> @transition/change_image_transform</item> <item name="android:windowSharedElementExitTransition"> @transition/change_image_transform</item> </style>
定义transition动画:
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> <explode/> <changeBounds/> <changeTransform/> <changeClipBounds/> <changeImageTransform/> changeBound 这个是最长使用的 改变View 大小和位置 changeClipBounds 改变 Clip 边界的大小 changeImageTransform 改变ImageView 的大小 和 martix ChangeTransform 改变普通的 View 一些Scalex 值 ChangeScroll 改变滑动位置 </transitionSet>
2.2 代码设置
2.2.1 基本设置
ActivityA:// 基本的startActivity(intent)方法 startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this).toBundle()); 1
ActivityB:
// 在onCreate()允许使用transitions getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); // 设置一个enter transition getWindow().setEnterTransition(new Explode()); getWindow().setEnterTransition(new Slide()); getWindow().setEnterTransition(new Fade());
2.2.2 样式使用
设置一个进入动画,默认退出时同样的动画类型setExitTransition() - 当A start B时,使A中的View退出场景的transition setEnterTransition() - 当A start B时,使B中的View进入场景的transition setReturnTransition() - 当B 返回 A时,使B中的View退出场景的transition setReenterTransition() - 当B 返回 A时,使A中的View进入场景的transition
2.2.3 共享元素的动画
首先需要在他的ActivityA布局、ActivityB布局中共同设置共享元素android:transitionName="XXX"
如果只要一个共享元素,那么在ActivityB中可以这样写
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this,view,"share").toBundle());
由多个共享元素,那么我们可以通过Pair.create()来创建多个共享元素
startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, Pair.create(view,"share"),Pair.create(fab,"fab")).toBundle());
3 布局元素的过渡动画
Transition框架还可以用于activity布局中view从一种状态到另一种状态的过渡动画。//简单实现 TransitionManager.beginDelayedTransition(sceneRoot);
这会改变相应view的属性,让其变大。Transition框架将记录开始和结束的的值,然后创建一个过渡动画。
squareGreen.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { TransitionManager.beginDelayedTransition(sceneRoot); setViewWidth(squareRed, 500); setViewWidth(squareBlue, 500); setViewWidth(squareGreen, 500); setViewWidth(squareYellow, 500); } }); } private void setViewWidth(View view, int x) { ViewGroup.LayoutParams params = view.getLayoutParams(); params.width = x; view.setLayoutParams(params); }
4 实现例子
MainActivitypackage com.example.transition; public class MainActivity extends AppCompatActivity { private Intent intent; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); intent = new Intent(MainActivity.this, ActivityTwo.class); } public void explode(View view) { intent.putExtra("transition", "explode"); //将原先的跳转改成如下方式 startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this).toBundle()); /** * 修改ActivityTwo返回到MainActivity动画设置 */ Fade fade = new Fade(); fade.setDuration(2000); getWindow().setReenterTransition(fade); } public void slide(View view) { intent.putExtra("transition", "slide"); startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this).toBundle()); } public void fade(View view) { intent.putExtra("transition", "fade"); startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this).toBundle()); } public void share(View view) { //共享元素 ImageView share = (ImageView) findViewById(R.id.share); intent.putExtra("transition", "share"); //将原先的跳转改成如下方式,注意这里面的第三个参数决定了ActivityTwo 布局中的android:transitionName的值,它们要保持一致 startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this, share, "shareTransition").toBundle()); //创建多个共享单元 //startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, Pair.create(share, "shareTransition"), Pair.create(fab, "fab")).toBundle()); } }
MainActivity的布局xml:
<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:background="#ffffff" android:gravity="center" android:orientation="vertical" tools:context=".MainActivity"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:onClick="explode" android:text="explode" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:onClick="slide" android:text="slide" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:onClick="fade" android:text="fade" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:onClick="share" android:text="share" /> <ImageView android:id="@+id/share" android:layout_width="40dp" android:layout_height="40dp" android:layout_gravity="center_horizontal" android:src="@mipmap/ic_guide_view_1"/> </LinearLayout>
ActivityTwo
package com.example.transition; public class ActivityTwo extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // 允许使用transitions getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS); String transition = getIntent().getStringExtra("transition"); switch (transition) { case "explode": // 设置进入时进入动画 Explode explode = new Explode(); explode.setDuration(2000); getWindow().setEnterTransition(explode); // 设置退出时退出动画 Fade fade1 = new Fade(); fade1.setDuration(2000); getWindow().setReturnTransition(fade1); break; case "slide": Slide slide = new Slide(); slide.setDuration(2000); getWindow().setEnterTransition(slide); break; case "fade": Fade fade = new Fade(); fade.setDuration(3000); getWindow().setEnterTransition(fade); break; case "share": break; } // 所有操作在设置内容视图之前 setContentView(R.layout.activity_two); } }
ActivityTwo的布局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"> <ImageView android:id="@+id/share" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_centerInParent="true" android:layout_gravity="center_horizontal" android:src="@mipmap/ic_guide_view_1" android:onClick="share" android:transitionName="shareTransition" /> </RelativeLayout>
相关文章推荐
- 使用C++实现JNI接口需要注意的事项
- Android IPC进程间通讯机制
- Android Manifest 用法
- [转载]Activity中ConfigChanges属性的用法
- Android之获取手机上的图片和视频缩略图thumbnails
- Android之使用Http协议实现文件上传功能
- Android学习笔记(二九):嵌入浏览器
- android string.xml文件中的整型和string型代替
- i-jetty环境搭配与编译
- android之定时器AlarmManager
- android wifi 无线调试
- Android Native 绘图方法
- Android java 与 javascript互访(相互调用)的方法例子
- android 代码实现控件之间的间距
- android FragmentPagerAdapter的“标准”配置
- Android"解决"onTouch和onClick的冲突问题
- android:installLocation简析
- android searchView的关闭事件
- SourceProvider.getJniDirectories