Transition
过渡动画
引入
从API 1
就存在的Drawable Animation
和View Animation
,以及API 11(Android 3.0)
以后加入的Property Animation
。而过渡动画Transition
是在API 19(Android 4.4.2)
中加入的。
ransition是一种简单的动画显示。这种动画可以平滑的从一种图片变换为另一张图片,不是那种突兀的切换。
Transition可以简单的在两帧之间切换,常用于选择与被选择之间切换,或者渐进的今日新的场景。
XML文件包含切换的帧图片。transition标签作为容器,item为切换用的帧,Android:drawable为图片id。
TransitionDrawable
TransitionDrawable获取transition中的资源,之后调用startTransition进行切换,该函数将第一帧切换到第二帧。reverseTransition是另一种切换方式,将反复切换两帧,会根据上一次切换的第二帧作为下一次切换的第一帧。
XML文件代码:
1. <?xml version="1.0" encoding="utf-8"?>
2. <transition
3. xmlns:android="http://schemas.android.com/apk/res/android">
4.
5. <item android:drawable="@drawable/left" />
6. <item android:drawable="@drawable/right" />
7.
8. </transition>
Activity代码:
TransitionDrawable sceneDrawable = (TransitionDrawable) scene.getDrawable();
sceneDrawable.reverseTransition(3000);
转场动画(Activity Transition)基本介绍
Android 5.0 提供了三种Transition类型
进入:决定Activity中的所有的视图怎么进入屏幕。
退出:决定一个Activity中的所有视图怎么退出屏幕。
共享元素:决定两个activities之间的过渡,怎么共享(它们)的视图。
进入和退出包含如下动画效果
explode(分解) – 从屏幕中间进或出
slide(滑动) - 从屏幕边缘进或出地
fade(淡出) –通过改变屏幕上视图的不透明度达到添加或者移除视图的效果
共享元素包含如下动画效果
changeBounds - 改变目标视图的布局边界
changeClipBounds - 裁剪目标视图边界
changeTransform - 改变目标视图的缩放比例和旋转角度
changeImageTransform - 改变目标图片的大小和缩放比例
使用
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>
代码设置
ActivityA
// 基本的startActivity(intent)方法
startActivity(intent,ActivityOptions
.makeSceneTransitionAnimation(MainActivity.this).toBundle());
ActivityB
// 在onCreate()允许使用transitions
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
// 设置一个enter transition
getWindow().setEnterTransition(new Explode());
getWindow().setEnterTransition(new Slide());
getWindow().setEnterTransition(new Fade());
样式使用
设置一个进入动画,默认退出时同样的动画类型
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
共享元素的动画
首先需要在他的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());
布局元素的过渡动画
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);
}
实现例子
MainActivity
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
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>