Android动画之场景变换Transition动画的使用

其他 2019-01-18 14:20:52 阅读次数: 0
版权声明：本文为博主原创文章，转载希望能注明出处，感谢。 https://blog.csdn.net/u010126792/article/details/85794815

动画入门和进阶文章列表：

Animation动画概述和执行原理
Android动画之补间动画TweenAnimation
Android动画之逐帧动画FrameAnimation
Android动画之插值器简介和系统默认插值器
Android动画之插值器Interpolator自定义
Android动画之视图动画的缺点和属性动画的引入
Android动画之ValueAnimator用法和自定义估值器
Android动画之ObjectAnimator实现补间动画和ObjectAnimator自定义属性
Android动画之ObjectAnimator中ofXX函数全解析-自定义Property，TypeConverter，TypeEvaluator
Android动画之AnimatorSet联合动画用法
Android动画之LayoutTransition布局动画
Android动画之共享元素动画
Android动画之ViewPropertyAnimator（专用于view的属性动画）
Android动画之Activity切换动画overridePendingTransition实现和Theme Xml方式实现
Android动画之ActivityOptionsCompat概述
Android动画之场景变换Transition动画的使用
Android动画之Transition和TransitionManager使用
Android动画之圆形揭露动画Circular Reveal

Transition 概述

在这里插入图片描述
Trasition 内部保存了所有关于动画的信息，当场景变换时动画将在目标对象上执行。Transition基于两个概念：场景（scenes）和变换（transitions），场景是UI当前状态，变换则定义了在不同场景之间动画变化的过程。

Transition分为三种类型（android5.0中使用）。
进入动画：Activity中的所有视图进入屏幕的动画。
退出动画：Activity中的所有视图退出屏幕的动画。
共享元素动画：利用共享的元素实现Activity的跳转动画。
进入动画和退出动画合称Content Transition（内容变换动画），所以Transition分为内容变换动画和共享元素动画。

当一个场景改变的时候，transition主要负责：
捕捉每个View在开始场景和结束场景时的状态，根据两个场景（开始和结束）之间的区别创建一个Animator，所以Transition内部利用了属性动画。

如何在Activity中使用Transition

  • 在使用Transition 的activity中需要启用transition ，可以通过代码也可以通过设置主题：

代码方式，在setContentView之前调用：
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
主题xml方式：

<item name="android:windowContentTransitions">true</item>

  • Activity中设置进入，退出Transition动画，Material主题默认会将exit的transition设置成null而enter的transition设置成Fade ，如果reenter 或者 return transition没有明确设置，则将用exit 和enter的transition替代。

  • 开始一个activity的content transition需要调用startActivity(Context, Bundle)方法，Bundle参数生成方法ActivityOptions.makeSceneTransitionAnimation(activity, pairs).toBundle();

  • 在代码中触发通过finishAfterTransition()方法触发返回动画，而不是调用finish()方法。

Fragment中使用Transition

和activity中使用大体相同，不同点如下：

  • Fragment在其FragmentTransaction执行added, removed, attached, detached, shown, ，hidden时触发动画。

  • 在Fragment commit之前，共享元素需要通过调用addSharedElement(View, String) 方法来成为FragmentTransaction的一部分。

2 Content Transition

content transition决定了非共享view元素在activity和fragment切换期间是如何进入或者退出场景的
可以利用代码或者XML方式实现。

设置Content Transition的函数：
setEnterTransition() - ActivityA 跳转到 ActivityB，ActivityB中的View进入场景的transition。
setExitTransition() - ActivityA 跳转到 ActivityB，ActivityA中的View退出场景的transition。
setReturnTransition() - 从ActivityB 返回Activity A时，ActivityB中的View退出场景的transition。
setReenterTransition() - 从ActivityB 返回Activity A时，ActivityA中的View进入场景的transition

xml中的属性

//对应setEnterTransition
<item name="android:windowEnterTransition"></item>   
//对应setExitTransition
<item name="android:windowExitTransition"></item>
//对应setReturnTransition
<item name="android:windowReturnTransition"></item>
//对应setReenterTransition
<item name="android:windowReenterTransition"></item>

系统提供的动画效果（用于content Transition）
explode(分解)：从屏幕中间进或出，移动视图。
slide(滑动)：从屏幕边缘进或出，移动试图。
fade(淡出)：通过改变屏幕上的视图的不透明度，达到添加或移除视图。

三种效果都有对应的实现类,分别为：
分解：Explode
Xml中定义方式：<explode xmlns:android="http://schemas.android.com/apk/res/android"/>

滑动：Slide，
setSlideEdge(int slideEdge) 设置从哪个边出现或隐藏，取值为
Gravity.LEFT, Gravity.TOP, Gravity.RIGHT, Gravity.BOTTOM, Gravity.START, Gravity.END.
对应的xml中的属性为android:slideEdge
Xml中定义slide方式：

<slide xmlns:android="http://schemas.android.com/apk/res/android" android:slideEdge="bottom"/>

淡入淡出对应Fade：
Xml中使用方式：<fade xmlns:android="http://schemas.android.com/apk/res/android"/>

XML方式定义transition

explode

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<explode
    android:duration="500"
    android:interpolator="@android:interpolator/accelerate_decelerate"/>
</transitionSet>

fade

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
<fade
    android:duration="500"
    android:interpolator="@android:interpolator/accelerate_decelerate"/>
</transitionSet>

slide

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <slide
        android:duration="500"
        android:slideEdge="bottom"
        android:interpolator="@android:interpolator/accelerate_decelerate" />
</transitionSet>

xml中实现进入退出动画

Style中设置：

<item name="android:windowContentTransitions">true</item>
        <item name="android:windowEnterTransition">@transition/explode</item>
        <item name="android:windowExitTransition">@transition/fade</item>
        <item name="android:windowReenterTransition">@transition/solid</item>
        <item name="android:windowReturnTransition">@transition/explode</item>

调用

ActivityOptionsCompat activityOptionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(Main8Activity.this);
Intent intent = new Intent(Main8Activity.this, Main7Activity.class);
startActivity(intent,activityOptionsCompat.toBundle());

退出时调用：

@Override
public void onBackPressed() {
    super.onBackPressed();
    ActivityCompat.finishAfterTransition(this);
}

在这里插入图片描述

代码方式实现

oncreate函数中

@Override
protected void onCreate(Bundle savedInstanceState) {
   // overridePendingTransition(R.anim.translate_left_in,0);
    getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
    getWindow().setEnterTransition(new Explode());
    getWindow().setExitTransition(new Fade());
    Transition transition1 =  TransitionInflater.from(Main8Activity.this).inflateTransition(android.R.transition.slide_bottom);
    getWindow().setReenterTransition(transition1);
    Transition transition2 =  TransitionInflater.from(Main8Activity.this).inflateTransition(R.transition.explode);
    getWindow().setReturnTransition(transition2);
	//super.onCreate之前
    super.onCreate(savedInstanceState);

退出时调用：

@Override
public void onBackPressed() {
    super.onBackPressed();
    ActivityCompat.finishAfterTransition(this);
}

sdf
explode，fade，solid效果

explode效果

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
getWindow().setEnterTransition(new Explode());
getWindow().setExitTransition(new Explode());
Transition transition1 =  TransitionInflater.from(Main8Activity.this).inflateTransition(android.R.transition.explode);
getWindow().setReenterTransition(transition1);
Transition transition2 =  TransitionInflater.from(Main8Activity.this).inflateTransition(R.transition.explode);
getWindow().setReturnTransition(transition2);

图片3

fade效果

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
getWindow().setEnterTransition(new Fade());
getWindow().setExitTransition(new Fade());
Transition transition1 =  TransitionInflater.from(Main8Activity.this).inflateTransition(android.R.transition.fade);
getWindow().setReenterTransition(transition1);
Transition transition2 =  TransitionInflater.from(Main8Activity.this).inflateTransition(R.transition.fade);
getWindow().setReturnTransition(transition2);

图片4

solid

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
getWindow().setEnterTransition(new Slide(Gravity.BOTTOM));
getWindow().setExitTransition(new Slide(Gravity.TOP));
Transition transition1 =  TransitionInflater.from(Main8Activity.this).inflateTransition(R.transition.solid);
getWindow().setReenterTransition(transition1);
Transition transition2 =  TransitionInflater.from(Main8Activity.this).inflateTransition(android.R.transition.slide_bottom);
getWindow().setReturnTransition(transition2);

图片con5

PS：
如果从ActivityA启动ActivityB，界面切换的时候，ActivityA退出还没有完全展示exitAnimator时，ActivityB就进入了，如果想等ActivityA完全退出后ActivityB再进入可以通过设置setAllowEnterTransitionOverlap(false)(默认是true)，同样可以在xml中设置：
false
false

3 共享元素动画

函数说明：
setSharedElementEnterTransition();ActivityA 跳转到 ActivityB，ActivityB进入动画transitionsetSharedElementExitTransition();ActivityA 跳转到 ActivityB，ActivityA退出动画setSharedElementReenterTransition();从ActivityB 返回Activity A时，ActivityA进入场景的transition。
setSharedElementReturnTransition();从ActivityB 返回Activity A时，ActivityB退出场景的transition。

xml中对应的设置

<item name="android:windowSharedElementEnterTransition"></item>
<item name="android:windowSharedElementExitTransition"></item>
<item name="android:windowSharedElementReenterTransition"></item>
<item name="android:windowSharedElementReturnTransition"></item>

系统提供的自定义动画
changeBounds:改变目标视图的布局边界，也就是改变view的宽高或者位置。
changeClipBounds:裁剪目标视图边界，view的裁剪区域边界。
changeTransform:改变目标的缩放比例和旋转角度，对view进行缩放，旋转操作。
changeImageTransform:改变目标图片的大小和缩放比例，也就是改变图片的ScaleType。
overlay：覆盖
arcMotion：圆弧效果

对应的类：
ChangeBounds -捕获共享元素的layout bound，然后播放layout bound变化动画。ChangeBounds 是共享元素变换中用的最多的，因为前后两个activity中共享元素的大小和位置一般都是不同的。
ChangeTransform - 捕获共享元素的缩放（scale）与旋转（rotation）属性 ，然后播放缩放（scale）与旋转（rotation）属性变化动画。
ChangeClipBounds - 捕获共享元素clip bounds，然后播放clip bounds变化动画，view的裁剪区域边界。
ChangeImageTransform - 捕获共享元素（ImageView）的transform matrices 属性，然后播放ImageViewtransform matrices 属性变化动画。与ChangeBounds相结合，这个变换可以让ImageView在动画中高效实现大小，形状或者ImageView.ScaleType 属性平滑过度。

getWindow().setSharedElementsUseOverlay(true); overlay效果开启

定义xml文件
changeBounds

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeBounds
        android:duration="1000"
        android:interpolator="@android:interpolator/accelerate_decelerate" />
</transitionSet>

changeClipBounds

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeClipBounds
        android:duration="1000"
        android:interpolator="@android:interpolator/accelerate_decelerate" />
</transitionSet>

changeImageTransform

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeImageTransform
        android:duration="500"
        android:interpolator="@android:interpolator/accelerate_decelerate" />
</transitionSet>

changeTransform

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
    <changeTransform
        android:duration="500"
        android:interpolator="@android:interpolator/accelerate_decelerate" />
</transitionSet>

style中设置

<item name="android:windowContentTransitions">true</item>
<item name="android:windowSharedElementEnterTransition">@transition/changebounds</item>
<item name="android:windowSharedElementExitTransition">@transition/changeclipbounds</item>
<item name="android:windowSharedElementReenterTransition">@transition/changeimagetransform</item>
<item name="android:windowSharedElementReturnTransition">@transition/changetransform</item>

 Bundle bundle = ActivityOptionsCompat.makeSceneTransitionAnimation(Main8Activity.this,gongxiang,"shareElement").toBundle();
 Intent intent = new Intent(Main8Activity.this, Main7Activity.class);
 startActivity(intent,bundle);

<ImageView
    android:id="@+id/gongxiang"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="400px"
    android:src="@drawable/image_home_game_nor2"
    android:transitionName="shareElement"/>

<ImageView
    android:id="@+id/toptop"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/image_home_game_nor"
    android:scaleType="fitCenter"
    android:transitionName="shareElement"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintRight_toRightOf="parent" />

Main8Activity和Main7Activity 共享两个圆形imageView：

在这里插入图片描述

代码实现

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
ChangeBounds changeBounds = new ChangeBounds();
changeBounds.setDuration(1000);
ChangeClipBounds changeClipBounds = new ChangeClipBounds();
changeClipBounds.setDuration(1000);
ChangeImageTransform changeImageTransform = new ChangeImageTransform();
changeImageTransform.setDuration(1000);
ChangeTransform changeTransform = new ChangeTransform();
changeTransform.setDuration(1000);
getWindow().setSharedElementEnterTransition(changeBounds);
getWindow().setSharedElementExitTransition(changeClipBounds);
getWindow().setSharedElementReenterTransition(changeImageTransform);
getWindow().setSharedElementReturnTransition(changeTransform);

在这里插入图片描述

开启Overlay

Overlay的具体效果不太明白，但是从语义来说应该是让动画更加的融合自然。
getWindow().setSharedElementsUseOverlay(true);
在这里插入图片描述

参考：
http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0201/2394.html

猜你喜欢

转载自blog.csdn.net/u010126792/article/details/85794815
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022