Android动画之LayoutTransition布局动画

2024-05-06 13:48

本文主要是介绍Android动画之LayoutTransition布局动画,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

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

1 LayoutTransition 概述

通过对视图动画和属性动画的学习,我们现在可以对一个view进行动画操作,但是如何在添加view,删除view,显示view,隐藏view时给相应view和受影响的其他view添加动画,不太容易做。如果不添加动画,单纯的使用setVisible会显得很突兀。如果只是对受到影响的view添加动画,可以通过设置view的高度使之显示和隐藏,还可以利用ScrollView通过滚动隐藏和显示动画,但其他受影响的view则比较难处理,布局动画LayoutTransition 就可以很好地完成这个功能。
在这里插入图片描述

来自Developer 网站关于LayoutTransition概述:
https://developer.android.google.cn/reference/android/animation/LayoutTransition

LayoutTransition字面翻译是布局的过渡也就是布局动画,这个类可以实现ViewGroup的布局改变时自动执行动画,LayoutTransition 从api11开始提供。给ViewGroup设置动画很简单,只需要生成一个LayoutTransition实例,然后调用ViewGroup的setLayoutTransition(LayoutTransition)函数就可以了。当设置了布局动画的ViewGroup添加或者删除内部view时就会触发动画。如果要设置定制的动画,需要调用setAnimator()方法。

布局动画由两种状态的改变导致执行四种不同的动画,两种状态的改变分别是view被添加到ViewGroup(或者变得可见VISIBILITY),view被移除ViewGroup(或者不可见),所以设置View可见或者不可见也将触发布局动画添加和删除动画的逻辑( GONE and VISIBLE)。

四种不同的动画分别是(api11中添加):

  • APPEARING:view被添加(可见)到ViewGroup会触发的动画。
  • DISAPPEARING :view被移除(不可见)ViewGroup会触发的动画。
  • CHANGE_APPEARING :view被添加(可见)到ViewGroup,会影响其他View,此时其它View会触发的动画。
  • CHANGE_DISAPPEARING:view被移除(不可见)ViewGroup,会影响其他View,此时其它View会触发的动画。
    API16 添加了CHANGING 类型,所以是五种类型动画。

四种类型的动画都有默认的动画效果,当只为ViewGroup设置了animateLayoutChanges=true后,触发ViewGroup中view的添加和删除就会触发默认动画。默认情况下DISAPPEARING和CHANGE_APPEARING类型动画会立即执行,其他类型动画则会有个延迟。会导致如下效果:当一个View被添加到布局中,其他受影响的View会首先移动,接着当view添加到布局时运行appearing animation。当一个view被从布局中移除时,首先运行移除动画,接着运行其他受影响的view的动画。可以利用setDuration和setStartDelay修改延迟时间。

注意:
如果在DISAPPEARING动画完成之前运行了APPEARING动画,则DISAPPEARING动画将停止,并且会恢复DISAPPEARING动画的效果。如果您在APPEARING动画完成之前启动DISAPPEARING动画,则会对APPEARING动画发生类似作用。

下面这段话揭示布局动画存在的一些问题:
为布局动画指定的动画,默认的或者用户自定义的,都仅仅是一些模板,简单说就是你指定了动画的值,但是布局动画最终不一定按照你指定的值运行。设置的这些动画有自己的属性值(duration,properties,start delay),但真正运行时动画的开始结束值是进程运行时从view的真实情况自动获取,自动设置的。。。还有很多就不翻译了,大家可以去看看。

ViewGroup在xml文件中设置了animateLayoutChanges=true会有默认的布局动画,但如果在一个多层嵌套的布局中,由于布局处于多个层级的关系这个布局动画很可能不会工作。有时CHANGE_APPEARING 和 CHANGE_DISAPPEARING动画在一个滚动的布局中,可能导致布局动画无法匹配view的实际位置导致动画看着不连贯(或者无法到准确位置),这时可以通过禁用CHANGE_APPEARING 和 CHANGE_DISAPPEARING动画解决。

LayoutTransition构造函数
LayoutTransition()

2 LayoutTransition 默认动画效果

ViewGroup在xml文件中设置了animateLayoutChanges=true会有默认的布局动画效果。

动画执行先后
从上面的分析可以知道,默认情况下DISAPPEARING和CHANGE_APPEARING类型动画会立即执行,其他类型动画则会有个延迟。也就是说如果删除view,被删除的view将先执行动画消失,经过一些延迟受影响的view会进行动画补上位置,如果添加view,受影响的view将会先给添加的view腾位置执行CHANGE_APPEARING动画,经过一些时间的延迟才会执行APPEARING动画。

代码示例:
布局文件:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/ll_container"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:animateLayoutChanges="true"tools:context=".Main8Activity"><Buttonandroid:id="@+id/btnadd"android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="5dp"android:text="添加view"/><Buttonandroid:id="@+id/btndel"android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="5dp"android:text="删除view"/>
</LinearLayout>
public class Main8Activity extends AppCompatActivity {private LinearLayout mContainer;private Button mBtnAdd;private Button mBtnDel;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main8);mContainer = findViewById(R.id.ll_container);mBtnAdd = findViewById(R.id.btnadd);mBtnAdd.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Button button = new Button(Main8Activity.this);button.setPadding(20,20,20,20);button.setText("tempBtn");mContainer.addView(button,2);}});mBtnDel = findViewById(R.id.btndel);mBtnDel.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {int count = mContainer.getChildCount();if (count >= 3){mContainer.removeViewAt(2 );}}});}
}

在这里插入图片描述

3 设置自定义布局动画

四种不同的动画分别是(api11中添加):

  • APPEARING:view被添加(可见)到ViewGroup会触发的动画。
  • DISAPPEARING :view被移除(不可见)ViewGroup会触发的动画。
  • CHANGE_APPEARING :view被添加(可见)到ViewGroup,会影响其他View,此时其它View会触发的动画。
  • CHANGE_DISAPPEARING:view被移除(不可见)ViewGroup,会影响其他View,此时其它View会触发的动画。
  • API16 添加了CHANGING 类型,View在ViewGroup中位置改变时的过渡动画,不涉及删除或者添加操作。

如何给ViewGroup添加布局动画:

  • 生成LayoutTransition实例LayoutTransition layoutTransition = new LayoutTransition();
  • 为LayoutTransition 各个类型动画设置用户自定义动画,setAnimator()函数
  • 通过ViewGroup的setLayoutTransition(layoutTransition )可以添加布局动画。

setAnimator(int transitionType, Animator animator)
参数说明:
transitionType:动画类型,分为五种,分别是CHANGE_APPEARING,CHANGE_DISAPPEARING,CHANGING,APPEARING,DISAPPEARING。
animator:相应的动画。
setAnimator方法为每种布局动画设置具体的动画,可以设置ObjectAnimator或者包含属性动画的AnimatorSet。
setStagger 可以设置每个子view动画的时间间隔。

APPEARING和DISAPPEARING 动画

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/ll_container"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:animateLayoutChanges="true"tools:context=".Main8Activity"><Buttonandroid:id="@+id/btnadd"android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="5dp"android:text="添加view"/><Buttonandroid:id="@+id/btndel"android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="5dp"android:text="删除view"/>
</LinearLayout>
public class Main8Activity extends AppCompatActivity {private LinearLayout mContainer;private Button mBtnAdd;private Button mBtnDel;private LayoutTransition layoutTransition;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main8);mContainer = findViewById(R.id.ll_container);layoutTransition = new LayoutTransition();addCustomTransition();mContainer.setLayoutTransition(layoutTransition);mBtnAdd = findViewById(R.id.btnadd);mBtnAdd.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {Button button = new Button(Main8Activity.this);button.setPadding(20,20,20,20);button.setText("tempBtn");LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT);mContainer.addView(button,2,params);}});mBtnDel = findViewById(R.id.btndel);mBtnDel.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {int count = mContainer.getChildCount();if (count >= 3){mContainer.removeViewAt(2 );}}});}private void addCustomTransition() {/*** 移除View时view的DISAPPEARING动画*/ObjectAnimator addAnimator = ObjectAnimator.ofFloat(null, "translationX", 0, 50,0).setDuration(1500);layoutTransition.setAnimator(LayoutTransition.DISAPPEARING, addAnimator);/*** 添加view是view的APPEARING动画*/ObjectAnimator removeAnimator = ObjectAnimator.ofFloat(null, "scaleX", 0.5f, 1).setDuration(1500);layoutTransition.setAnimator(LayoutTransition.APPEARING, removeAnimator);}
}

添加的动画效果为每次添加view时X轴从0.5缩放到1.0,删除view是view向右移动50px后回到原点,然后消失。
效果图:

在这里插入图片描述

CHANGE_APPEARING 和 CHANGE_DISAPPEARING

CHANGE_APPEARING :view被添加(可见)到ViewGroup,会影响其他View,此时其它View会触发的动画。
CHANGE_DISAPPEARING:view被移除(不可见)ViewGroup,会影响其他View,此时其它View会触发的动画。

设置布局动画时需要注意一下几点总结

  • CHANGE_APPEARING和CHANGE_DISAPPEARING布局动画设置必须使用PropertyValuesHolder所构造的动画才会有效果,否则不起作用。
  • PropertyValuesHolder生成动画时,”left”、”top”属性必须有,如果没有则没有动画效果。如果不需要改变这两个值,可以写成写为:
    PropertyValuesHolder left = PropertyValuesHolder.ofInt(“left”,0,0);
    PropertyValuesHolder top = PropertyValuesHolder.ofInt(“top”,0,0);
  • PropertyValuesHolder中所使用的ofInt,ofFloat中的参数值,第一个值和最后一个值必须相同,不然此属性所对应的的动画将被放弃,在此属性值上将不会有效果;同时不能所有的属性值都相同,否则也将无效(不能写成100,100,100)。
    PropertyValuesHolder pvhTop = PropertyValuesHolder.ofInt(“top”, 0, 100,0);
  • 设置动画duration等没有效果
//为了防止动画没有效果,把left,right,top,bottom的设置都加上PropertyValuesHolder changeLeft =PropertyValuesHolder.ofInt("left", 0, 0);
PropertyValuesHolder changeTop =PropertyValuesHolder.ofInt("top", 0, 0);
PropertyValuesHolder changeRight =PropertyValuesHolder.ofInt("right", 0, 0);
PropertyValuesHolder changeBottom =PropertyValuesHolder.ofInt("bottom", 0, 0);/*** 添加view时,其他受影响view动画效果*/
PropertyValuesHolder aniChanApp = PropertyValuesHolder.ofFloat("rotation", 0, 50, 0);
ObjectAnimator changeApp = ObjectAnimator.ofPropertyValuesHolder(this,  changeLeft,changeTop,aniChanApp);layoutTransition.setAnimator(LayoutTransition.CHANGE_APPEARING, changeApp);/*** 删除view时其他受影响view动画效果*/
PropertyValuesHolder aniChangeDis = PropertyValuesHolder.ofFloat("rotation", 0, 50, 0);
ObjectAnimator changeDis = ObjectAnimator.ofPropertyValuesHolder(this,changeLeft,changeTop,aniChangeDis);layoutTransition.setAnimator(LayoutTransition.CHANGE_DISAPPEARING, changeDis);

在这里插入图片描述
相同代码如果仅仅不设置left和top动画,则不会有效果
在这里插入图片描述

这篇关于Android动画之LayoutTransition布局动画的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/964527

相关文章

Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

《Android悬浮窗开发示例((动态权限请求|前台服务和通知|悬浮窗创建)》本文介绍了Android悬浮窗的实现效果,包括动态权限请求、前台服务和通知的使用,悬浮窗权限需要动态申请并引导... 目录一、悬浮窗 动态权限请求1、动态请求权限2、悬浮窗权限说明3、检查动态权限4、申请动态权限5、权限设置完毕后

Android里面的Service种类以及启动方式

《Android里面的Service种类以及启动方式》Android中的Service分为前台服务和后台服务,前台服务需要亮身份牌并显示通知,后台服务则有启动方式选择,包括startService和b... 目录一句话总结:一、Service 的两种类型:1. 前台服务(必须亮身份牌)2. 后台服务(偷偷干

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》:本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,详细内容请阅读本文,希望能对你有所帮助... 过往的实现方法是使用浮动加

Android kotlin语言实现删除文件的解决方案

《Androidkotlin语言实现删除文件的解决方案》:本文主要介绍Androidkotlin语言实现删除文件的解决方案,在项目开发过程中,尤其是需要跨平台协作的项目,那么删除用户指定的文件的... 目录一、前言二、适用环境三、模板内容1.权限申请2.Activity中的模板一、前言在项目开发过程中,尤

最好用的WPF加载动画功能

《最好用的WPF加载动画功能》当开发应用程序时,提供良好的用户体验(UX)是至关重要的,加载动画作为一种有效的沟通工具,它不仅能告知用户系统正在工作,还能够通过视觉上的吸引力来增强整体用户体验,本文给... 目录前言需求分析高级用法综合案例总结最后前言当开发应用程序时,提供良好的用户体验(UX)是至关重要

基于Python实现PDF动画翻页效果的阅读器

《基于Python实现PDF动画翻页效果的阅读器》在这篇博客中,我们将深入分析一个基于wxPython实现的PDF阅读器程序,该程序支持加载PDF文件并显示页面内容,同时支持页面切换动画效果,文中有详... 目录全部代码代码结构初始化 UI 界面加载 PDF 文件显示 PDF 页面页面切换动画运行效果总结主

Android数据库Room的实际使用过程总结

《Android数据库Room的实际使用过程总结》这篇文章主要给大家介绍了关于Android数据库Room的实际使用过程,详细介绍了如何创建实体类、数据访问对象(DAO)和数据库抽象类,需要的朋友可以... 目录前言一、Room的基本使用1.项目配置2.创建实体类(Entity)3.创建数据访问对象(DAO

Android WebView的加载超时处理方案

《AndroidWebView的加载超时处理方案》在Android开发中,WebView是一个常用的组件,用于在应用中嵌入网页,然而,当网络状况不佳或页面加载过慢时,用户可能会遇到加载超时的问题,本... 目录引言一、WebView加载超时的原因二、加载超时处理方案1. 使用Handler和Timer进行超

Qt QWidget实现图片旋转动画

《QtQWidget实现图片旋转动画》这篇文章主要为大家详细介绍了如何使用了Qt和QWidget实现图片旋转动画效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 一、效果展示二、源码分享本例程通过QGraphicsView实现svg格式图片旋转。.hpjavascript