内容动画 Content Transition
content transition决定了非共享view元素在activity和fragment切换期间是如何进入或者退出场景的。
在5.0之后content transition可以通过调用Window和Fragment的如下代码来设置
-
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
使用方式
A start B
A中startActivity方式
ActivityOptionsCompat transitionActivityOptions =
ActivityOptionsCompat.makeSceneTransitionAnimation(this);
startActivity(i, transitionActivityOptions.toBundle());
B中设置动画 setEnterTransition
transition =TransitionInflater.from(this).
inflateTransition(R.transition.slide_content);
getWindow().setEnterTransition(transition);
动画效果说明
- explode(分解)：从屏幕中间进或出，移动视图。
- slide(滑动)：从屏幕边缘进或出，移动试图。
- fade(淡出)：通过改变屏幕上的视图的不透明度，达到添加或移除视图。
动画效果设置 R.transition.slide_content
<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<!--滑动-->
<slide
android:duration="1000"
android:slideEdge="bottom"
android:startDelay="0">
<!--作用目标集合-->
<targets>
<target android:targetId="@+id/tv_content" />
</targets>
</slide>
<!--淡入淡出-->
<fade
android:duration="1000"
android:fadingMode="fade_in_out"
android:startDelay="1000">
<targets>
<target android:targetId="@+id/tv_content1" />
</targets>
</fade>
<!--爆炸，屏幕中心爆炸-->
<explode
android:duration="1000"
android:slideEdge="bottom"
android:startDelay="2000">
<targets>
<target android:targetId="@+id/tv_content2" />
<target android:targetId="@+id/tv_content3" />
</targets>
</explode>
<fade
android:fadingMode="fade_in"
android:duration="1000"
android:startDelay="3000">
<targets>
<target android:targetId="@+id/tv_content4" />
</targets>
</fade>
</transitionSet>
效果
content.gif
共享元素动画 ShareElement Transition
activity和fragment切换期间，有关联的View进行平滑动画过渡
使用方式 A start B
A中设置关联元素 以android:transitionName进行关联
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="horizontal">
<ImageView
android:id="@+id/iv1"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#ff0000"
android:transitionName="iv1" />
<ImageView
android:id="@+id/iv2"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#ffff00"
android:scaleX="0.5"
android:scaleY="0.5"
android:transitionName="iv2" />
<ImageView
android:id="@+id/iv3"
android:layout_width="50dp"
android:layout_height="50dp"
android:scaleType="centerCrop"
android:src="@mipmap/rc"
android:transitionName="iv3" />
<ImageView
android:id="@+id/iv4"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#0000ff"
android:transitionName="iv4" />
</LinearLayout>
A中打开方式
Intent intent = new Intent(this, ShareActivity.class);
ActivityOptionsCompat transitionActivityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(this,
new Pair<>(findViewById(R.id.iv1), "iv1"),
new Pair<>(findViewById(R.id.iv2), "iv2"),
new Pair<>(findViewById(R.id.iv3), "iv3"),
new Pair<>(findViewById(R.id.iv4), "iv4"));
startActivity(intent, transitionActivityOptions.toBundle());
B中设置关联元素 android:transitionName 和A中设置相同名字的元素关联
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageView
android:id="@+id/iv1"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#ff0000"
android:transitionName="iv1" />
<ImageView
android:id="@+id/iv2"
android:layout_width="100dp"
android:layout_height="100dp"
android:background="#ffff00"
android:transitionName="iv2" />
<ImageView
android:id="@+id/iv3"
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="fitXY"
android:src="@mipmap/rc"
android:transitionName="iv3" />
<ImageView
android:id="@+id/iv4"
android:layout_width="100dp"
android:layout_height="100dp"
android:rotation="45"
android:background="#0000ff"
android:transitionName="iv4" />
</LinearLayout>
B中设置动画 setSharedElementEnterTransition
transition =TransitionInflater.from(this).
inflateTransition(R.transition.share);
getWindow().setSharedElementEnterTransition(transition);
动画效果说明
- changeBounds:改变目标视图的布局边界。
- changeClipBounds:裁剪目标视图边界。
- changeTransform:改变目标的缩放比例和旋转角度。
- changeImageTransform:改变目标图片的大小和缩放比例。
- overlay
效果
share.gif
场景动画
相同元素，各场景id一致
- 定义需要切换 layout xml页面；
- 调用 Scene.getSceneForLayout() 保存每个Layout；
- 调用 TransitionManager.go(scene1, new ChangeBounds()) 切换。
private void setupLayout() {
scene1 = Scene.getSceneForLayout(binding.sceneRoot, R.layout.activity_animations_scene1, this);
scene2 = Scene.getSceneForLayout(binding.sceneRoot, R.layout.activity_animations_scene2, this);
scene3 = Scene.getSceneForLayout(binding.sceneRoot, R.layout.activity_animations_scene3, this);
scene4 = Scene.getSceneForLayout(binding.sceneRoot, R.layout.activity_animations_scene4, this);
binding.sample3Button1.setOnClickListener(this);
binding.sample3Button2.setOnClickListener(this);
binding.sample3Button3.setOnClickListener(this);
binding.sample3Button4.setOnClickListener(this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.sample3_button1:
TransitionManager.go(scene1, new ChangeBounds());
break;
case R.id.sample3_button2:
TransitionManager.go(scene2, TransitionInflater.from(this).inflateTransition(R.transition.slide_and_changebounds));
break;
case R.id.sample3_button3:
TransitionManager.go(scene3,TransitionInflater.from(this).inflateTransition(R.transition.slide_and_changebounds_sequential));
break;
case R.id.sample3_button4:
TransitionManager.go(scene3,TransitionInflater.from(this).inflateTransition(R.transition.slide_and_changebounds_sequential_with_interpolators));
break;
}
}
参考：
https://www.jianshu.com/p/19cc20e6d8a9
https://www.jianshu.com/p/a43daa1e3d6e
网友评论