【Android】动画

article/2025/8/21 21:38:56

概念

动画实际上就是在指定的时间段内持续的修改某个属性的值,使得该值在指定取值范围之内平滑的过渡
android中的动画分为:View动画、帧动画和属性动画

帧动画

Frame动画是一系列图片按照一定的顺序展示的过程,它的原理是在一定的时间段内切换多张有细微差异的图片从而达到动画的效果
可以定义在xml文件中,代码实现使用到AnimationDrawable对象

xml实现

  • 使用< animation-list>作为根元素,包含一个或多个< item>元素,放在drawable目录下
  • android:onshot如果是true的话,动画只会执行一次,false则一致循环
  • android:drawable指定此帧动画所对应的图片资源
  • android:dutation代表此帧持续的时间,单位是毫秒
<!--在drawable目录下新建-->
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/g1" android:duration="200"/><item android:drawable="@drawable/g2" android:duration="200"/><item android:drawable="@drawable/g3" android:duration="200"/><item android:drawable="@drawable/g4" android:duration="200"/>
</animation-list>
  • 将动画设置给某个view的背景
    <ImageViewandroid:id="@+id/imageView"android:layout_width="wrap_content"android:layout_height="wrap_content"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"android:background="@drawable/frame" />
  • 在代码中启动
        val drawable = imageView.background as AnimationDrawabledrawable.start()

代码实现

        //帧动画使用的是AnimationDrawableval animationDrawable = AnimationDrawable()for (i in 1..11) {val id = resources.getIdentifier("g${i}", "drawable", packageName)val drawable = resources.getDrawable(id)//加入帧动画animationDrawable.addFrame(drawable, 300)}//循环播放animationDrawable.isOneShot = false//设置view的背景imageView.background = animationDrawableanimationDrawable.start()

推荐使用xml方式,因为将动画和代码中隔离,使动画更容易维护
帧动画使用比较简单,但是比较容易引起OOM,所以在使用帧动画时应尽量避免使用过多尺寸较大的图片

补间动画/View动画(Animation)

tween动画是操作某个控件旋转、渐变、移动、缩放的一种转换过程,称为补间动画
view动画的四种变换效果对应Animation的4个子类:TranslateAnimation,ScaleAnimation,RotateAnimation和AlphaAnimation
可以使用xml实现和代码实现,xml文件放在anim目录下,代码实现需要使用到Animation对象
补间动画只能运用在view对象上,功能局限,只能在x轴,y轴进行,不能在z轴上进行

在这里插入图片描述

在这里插入图片描述

alpha

在这里插入图片描述

xml

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"android:duration="2000"android:fromAlpha="0"android:toAlpha="1">
</alpha>
        val alpha = AnimationUtils.loadAnimation(this, R.anim.alpha)alpha.repeatCount = -1//循环播放imageView2.startAnimation(alpha)

代码

        val alpha2 = AlphaAnimation(0f, 1f)alpha2.duration = 1000imageView2.startAnimation(alpha2)

scale

在这里插入图片描述

xml

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"android:duration="2000"android:fromXScale="1"android:fromYScale="1"android:pivotX="50%"android:pivotY="50%"android:toXScale="1.5"android:toYScale="1.5"></scale>
        val scale = AnimationUtils.loadAnimation(this, R.anim.scale)scale.repeatCount = -1imageView3.startAnimation(scale)

代码

        val scale = ScaleAnimation(1f,//fromX1.5f,//toX1f,//fromY1.5f,//toYScaleAnimation.RELATIVE_TO_SELF,0.5f,ScaleAnimation.RELATIVE_TO_SELF,0.5f)scale.repeatCount = -1scale.duration = 2000imageView3.startAnimation(scale)

translate

在这里插入图片描述

xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"android:duration="2000"android:fromXDelta="0"android:fromYDelta="0"android:toXDelta="100%"android:toYDelta="0"></translate>
        val translate = AnimationUtils.loadAnimation(this, R.anim.translate)translate.repeatCount = -1imageView4.startAnimation(translate)

代码

        val translate = TranslateAnimation(TranslateAnimation.RELATIVE_TO_SELF,0f,TranslateAnimation.RELATIVE_TO_SELF,1f,TranslateAnimation.RELATIVE_TO_SELF,0f,TranslateAnimation.RELATIVE_TO_SELF,0f)translate.repeatCount = -1translate.duration = 2000imageView4.startAnimation(translate)

rotate

在这里插入图片描述

xml

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"android:duration="2000"android:fromDegrees="0"android:pivotX="50%"android:pivotY="50%"android:toDegrees="360"></rotate>
        val rotate = AnimationUtils.loadAnimation(this, R.anim.rotate)rotate.repeatCount = -1imageView5.startAnimation(rotate)

代码

        val rotate = RotateAnimation(0f,360f,RotateAnimation.RELATIVE_TO_SELF,0.5f,RotateAnimation.RELATIVE_TO_SELF,0.5f)rotate.repeatCount = -1rotate.duration = 2000imageView5.startAnimation(rotate)

view动画的特殊使用场景

LayoutAnimation

在这里插入图片描述

  • 定义LayoutAnimation
<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"android:animation="@anim/alpha"android:animationOrder="normal"android:delay="0.5"></layoutAnimation>

在这里插入图片描述在这里插入图片描述

  • 为子元素指定具体入场动画
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"android:duration="300"android:shareInterpolator="true"><alphaandroid:fromAlpha="0"android:toAlpha="1" /><translateandroid:fromXDelta="500"android:toXDelta="0" />
</set>
  • 为ViewGroup指定layoutAnimation属性
    <androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/recyclerview"android:layout_width="0dp"android:layout_height="0dp"android:layoutAnimation="@anim/layout_animation"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toEndOf="@+id/imageView3"app:layout_constraintTop_toBottomOf="@+id/imageView6" />
  • 这样列表中的item就有了出场动画了

在这里插入图片描述

Activity的切换效果

在这里插入图片描述
在这里插入图片描述

属性动画

属性动画可以对任何对象做动画,甚至还可以没有对象
ValueAnimator,ObjectAnimator,AnimatorSet
属性动画通过调用属性的get,set方法来真实的控制一个view的属性值,原理是通过反射,如果该属性没有get,set方法,则会抛出异常。通过不断的修改对象的属性值来实现动画

ValueAnimator

属性动画机制中最核心的类,数值发生器,内部使用一种时间循环的机制来计算值与值之间的动画过渡
负责管理动画的播放次数,播放模式,以及动画的监听
使用ofFloat,ofInt等静态工厂函数构建ValueAnimator

xml

<?xml version="1.0" encoding="utf-8"?>
<animator xmlns:android="http://schemas.android.com/apk/res/android"android:valueFrom="0.0"android:valueTo="1"android:valueType="floatType"></animator>
        val animator: ValueAnimator =AnimatorInflater.loadAnimator(this, R.animator.value) as ValueAnimatoranimator.duration = 5000animator.addUpdateListener {println(it.animatedValue)}animator.start()

代码

    private fun startValueAnimator() {val valueAnimator = ValueAnimator.ofFloat(0f, 1f)valueAnimator.duration = 2000valueAnimator.addUpdateListener {println(it.animatedValue)}valueAnimator.start()}

ObjectAnimator

ValueAnimator功能强大,但是需要做更多的工作来实现动画需求,ValueAnimator只是对值进行了一个平滑的动画过渡
ObjectAnimator继承ValueAnimator,使用ObjectAnimator直接对任意对象的任意属性进行动画操作

在这里插入图片描述

        val a = ObjectAnimator.ofFloat(imageView7, "rotation", 0f, 90f, 180f)a.duration = 5000a.start()
  • 改变view的背景色
        val oa = ObjectAnimator.ofArgb(imageView8,"backgroundColor",0xffff8080.toInt(),0xff8080ff.toInt(),0xff3C3F41.toInt(),0xffFD7037.toInt())oa.duration = 3000//oa.setEvaluator(ArgbEvaluator())oa.repeatCount = ObjectAnimator.INFINITEoa.start()
  • 动画改变view的宽度
    class Wapper(val view: View) {fun setWidth(width: Int) {view.layoutParams.width = widthview.requestLayout()}fun getWidth(): Int {return view.layoutParams.width}}val wapper = Wapper(button2)val oaa = ObjectAnimator.ofInt(wapper, "width", button2.layoutParams.width, 500)oaa.duration = 1000oaa.start()//采用ValueAnimator,监听动画过程,实现属性改变

AnimatorSet

将多个动画组合在一起执行

在这里插入图片描述
在这里插入图片描述

			val animatorSet = AnimatorSet()animatorSet.duration = 5000animatorSet.playTogether(ObjectAnimator.ofFloat(imageView9, "rotationX", 0f, 360f),ObjectAnimator.ofFloat(imageView9, "rotationY", 0f, 180f),ObjectAnimator.ofFloat(imageView9, "rotation", 0f, -90f),ObjectAnimator.ofFloat(imageView9, "translationX", 0f, 90f),ObjectAnimator.ofFloat(imageView9, "translationY", 0f, 90f),ObjectAnimator.ofFloat(imageView9, "scaleX", 1f, 1.5f),ObjectAnimator.ofFloat(imageView9, "scaleY", 1f, 0.5f),ObjectAnimator.ofFloat(imageView9, "alpha", 1f, 0.25f, 1f))animatorSet.start()

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

在实际开发中建议采用代码实现属性动画,因为通过代码来实现比较简单

类型估值器TypeEvaluator

根据当前动画已执行时间占总时间的百分比来计算新的属性值
TypeEvaluator只有一个evaluate方法,该方法的职责就是计算新的属性值
常见的类型估值器有:IntEvaluator,FloatEvaluator,ArgbEvaluator

时间插值器TimeInterpolator

修改动画已执行时间与总时间的百分比,也就是修改fraction参数值
匀速的线性插值LinearInterpolator、加速插值器AccelerateInterpolator、减速插值器DecelerateInterpolator和加速减速插值器AccelerateDecelerateInterpolator等
在动画执行时,会调用TimeInterpolator的getInterpolation函数设置fraction,即修改估值器中的变化率
public float getInterpolation(float input)

使用动画存在的问题

在这里插入图片描述

Activity的过渡动画

android5.x为Activity提供了转场动画
提供了三种transition类型

进入,退出动画

在这里插入图片描述

  • 从A跳转到B,调用startActivity方法
            startActivity(Intent(this, LdMenuActivity::class.java),ActivityOptions.makeSceneTransitionAnimation(this).toBundle())
  • 在B中设置
		window.requestFeature(Window.FEATURE_CONTENT_TRANSITIONS)//进入B的动画window.enterTransition = Slide()//退出B的动画//window.exitTransition = Fade()//window.enterTransition = Explode()

共享元素

在这里插入图片描述

  • 在A的Actvity的布局文件中给共享元素添加属性android:translationName
        <ImageViewandroid:id="@+id/imageView"android:layout_width="100dp"android:layout_height="100dp"android:src="@drawable/ic_tag_faces"android:transitionName="face"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent" />
  • 在B的Activity的布局文件中,给元素增加相同的属性,命名需要一致
       <ImageViewandroid:id="@+id/imageView2"android:layout_width="50dp"android:layout_height="50dp"android:src="@drawable/ic_tag_faces"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintHorizontal_bias="0.1"android:transitionName="face"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"app:layout_constraintVertical_bias="0.39" />
  • 在A中启动activity
            startActivity(Intent(this, LdMenuActivity::class.java),ActivityOptions.makeSceneTransitionAnimation(this,Pair.create<View, String>(binding.imageView, "face"),//多个共享元素Pair.create<View, String>(binding.button4, "btn")).toBundle())

Material Design动画

Ripple

设置波纹背景后,点击后波纹效果

  • 波纹有边界
        <Buttonandroid:id="@+id/button5"android:layout_width="100dp"android:layout_height="100dp"android:background="?attr/selectableItemBackground"android:text="有界波纹"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/button2" />
  • 波纹无边界
        <Buttonandroid:id="@+id/button6"android:layout_width="100dp"android:layout_height="100dp"android:background="?attr/selectableItemBackgroundBorderless"android:text="无界波纹"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toBottomOf="@+id/button5" />
  • 直接创建一个具有Ripple效果的xml文件
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"android:color="@android:color/holo_green_dark"><!--波纹的颜色--><item><shape android:shape="rectangle"><corners android:radius="20dp" /><solid android:color="@android:color/white" /></shape></item></ripple>

Circular Reveal

这个动画效果具体表现为一个View以圆形的形式展开,揭示出来
通过ViewAnimationUtils.createReveal方法创建一个RevealAnimator动画

            val animator = ViewAnimationUtils.createCircularReveal(oval,//viewoval.width / 2,//缩放的xoval.height / 2,//缩放的yoval.width.toFloat() / 2,//圆开始的半径0f//圆结束的半径)animator.interpolator = AccelerateDecelerateInterpolator()animator.duration = 2000animator.start()
            val animator = ViewAnimationUtils.createCircularReveal(it,0,0,0f,Math.hypot(it.width.toDouble(), it.height.toDouble()).toFloat())//animator.interpolator = BounceInterpolator()animator.duration = 2000animator.start()

View state chanegs Animation

在Android5.X中,系统提供了视图状态改变来设置一个视图的状态切换动画

  • 在xml中定义一个StateListAnimator并添加到selector中(这是动画的selector,在animator文件夹中创建)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:state_pressed="true"><set><objectAnimatorandroid:duration="@android:integer/config_shortAnimTime"android:propertyName="rotationX"android:valueTo="360"android:valueType="floatType" /></set></item><item android:state_pressed="false"><objectAnimatorandroid:duration="@android:integer/config_shortAnimTime"android:propertyName="rotationX"android:valueTo="0"android:valueType="floatType" /></item>
</selector>
  • 在view中设置android:stateListAnimator
    <Buttonandroid:id="@+id/button3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:stateListAnimator="@animator/oa"android:text="Button"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintTop_toTopOf="parent" />
  • 同样的,可以在代码中设置
        val oa = AnimatorInflater.loadStateListAnimator(this, R.animator.oa)button3.stateListAnimator = oa

http://chatgpt.dhexx.cn/article/nR13Wp3W.shtml

相关文章

STM32 LWIP SNTP实现毫秒级的时间校准

1、首先配置LWIP支持SNTP 然后在opt.h中增加一个timeout->LWIP_SNTP 防止出现类似 Assertion "sys_timeout: timeout ! NULL, pool MEMP_SYS_TIMEOUT is empty" failed at line 190 in ../Middlewares/Third_Party/LwIP/src/core/timeouts.c 这样的错误。 /*…

NTP/SNTP协议介绍和校时服务器搭建

文|Seraph 本文主要简单介绍用于校时的NTP/SNTP协议 同时&#xff0c;以windows 2008 R2为例&#xff0c;搭建NTP/SNTP服务器 NTP可参考文献RFC1305&#xff0c;SNTP可参考文献RFC1796 1. 应用场景 一般应用&#xff0c;连上公网即可通过NTP/SNTP协议进行校时&#xff0c;例如…

linux sntp 代码,C语言window(linux)平台的SNTP实现

C语言实现window(linux)平台的SNTP&#xff0c;本程序功能主要是实现电脑(或者设备)时间同步。摘录部分代码&#xff1a; unsigned char liVnMode; /* LeapSecond(2bits:0), VersionNumber(3bits: 3), Mode(3bits: Client3, Server4) */ unsigned char stratum; /* 时间层级 (0…

学习日记——ESP8266SNTP

SNTP基本知识 1、定义 SNTP是简单网络时间协议&#xff0c;而NTP网络时间协议就是网络计算机上同步计算时间的协议&#xff0c;具有高度的精确性&#xff0c;实际上也用不到这么高精度的算法。所以就在NTP上简化了以下变成SNTP&#xff0c;SNTP协议主要被用来同步因特网上计算…

WiFi开发|ESP8266模组SDK开发之SNTP协议

ESP8266模组SDK开发之SNTP协议 1. NTP和SNTP NTP 是网络时间协议&#xff08;Network Time Protocol&#xff09;&#xff0c;是用来同步网络设备&#xff08;如计算机、手机&#xff09;的时间的协议 SNTP由NTP改编而来&#xff08;简单网络时间协议&#xff0c;Simple Net…

ESP8266学习笔记(11)——SNTP接口使用

一、SNTP简介 简单网络时间协议&#xff08;Simple Network Time Protocol&#xff09;&#xff0c;由 NTP 改编而来&#xff0c;主要用来同步因特网中的计算机时钟 二、SNTP接口 SNTP 接口位于 ESP8266_NONOS_SDK/include/sntp.h。 三、初始化SNTP 设置三个时间服务器…

ESP32 SNTP配置

SNTP&#xff0c;Simple Network Time Protocol&#xff08;简单网络时间协议&#xff09;&#xff0c;用来同步时钟。 百度百科&#xff1a;SNTP SNTP协议采用客户端/服务器的工作方式&#xff0c;可以采用单播&#xff08;点对点&#xff09;或者广播&#xff08;一点对多点&…

通过sntp同步系统时间

通过sntp同步系统时间 小型物联网设备&#xff0c;很少有接口提供给用户进行数据交互&#xff0c;那么我们设备的系统时间只能够通过获取网络时间后&#xff0c;再更新到本地。那么&#xff0c;就少不了使用sntp协议。 ntp协议&#xff1a;NTP(Network Time Protocol&#xff…

2012系统sntp服务器,如何设置SNTP服务器,实现同步PLC时钟

在过程/生产自动化系统构架和运行时&#xff0c;有时需要实现对时间的精确控制&#xff0c;即系统中所有子系统(包括设备等)的时间必须保持同步。 作为自动化系统组成部分的 以Windows 7操作系统为例&#xff0c;将PC机配置为SNTP服务器端的操作步骤&#xff1a; [注意]操作前前…

ESP32学习笔记(41)——SNTP接口使用

一、SNTP简介 简单网络时间协议&#xff08;Simple Network Time Protocol&#xff09;&#xff0c;由 NTP 改编而来&#xff0c;主要用来同步因特网中的计算机时钟。 SNTP 协议是用来同步本地的时间到 unix 时间戳。通常嵌入式设备上电&#xff0c;连接 AP(access point)&…

物联网专题27:SNTP

什么是SNTP&#xff08;Simple Network Time Protocol&#xff09;&#xff1f;简单时钟控制协议&#xff0c;主要用来同步因特网中的计算机时钟。 SNTP&#xff0c;使用的默认端口号是 UDP123。 ESP8266中&#xff0c;SNTP相关的API&#xff1a; 1 设置SNTP服务器&#xff08…

ESP8266-----SNTP获取网络时间

目录 前言 user_init IP定时的回调函数 初始化SNTP SNTP定时回调函数 前言 介绍了8266如何获取网络时间 user_init 首先将8266设置为sta模式 void ICACHE_FLASH_ATTR user_init(void) {uart_init(115200,115200); // 初始化串口波特率os_delay_us(10000); // 等待串口…

微软 sntp服务器地址,电脑sntp服务器地址

电脑sntp服务器地址 内容精选 换一换 当创建文件系统后&#xff0c;您需要使用云服务器来挂载该文件系统&#xff0c;以实现多个云服务器共享使用文件系统的目的。本章节以Windows 2012版本操作系统为例进行NFS文件系统挂载&#xff0c;其他版本请参考以下主要步骤根据实际界面…

ESP32 SNTP设置

SNTP&#xff0c;Simple Network Time Protocol&#xff08;简单网络时间协议&#xff09;&#xff0c;用来同步时钟。 百度百科&#xff1a;[SNTP](https://baike.baidu.com/item/sntp/4749147?fraladdin) SNTP协议采用客户端/服务器的工作方式&#xff0c;可以采用单播&…

sntp服务器位置,sntp的服务器地址

sntp的服务器地址 内容精选 换一换 介绍常见的安全组配置示例。如下示例中,出方向默认全通,仅介绍入方向规则配置方法。不同安全组内的云耀云服务器内网互通仅允许特定 IP 地址远程连接云耀云服务器SSH远程连接Linux云耀云服务器RDP远程连接Windows云服务器公网ping云耀云服务…

sntp 校时问题

1、背景 由于项目中的数据对时间比较敏感&#xff0c;目前常常出现校时问题&#xff0c;导致时间偏差&#xff0c;出现曲线数据丢失和曲线数据重复等问题。 因此对sntp源码进行深入分析。 要了解SNTP&#xff0c;首先需要了解NTP协议。SNTP是NTP的子集&#xff0c;简化了NTP…

ESP8266_SNTP(Simple Network Time Protocol)

1、SNTP 简单网络时间协议 SNTP协议采用客户端/服务器的工作方式&#xff0c;以UDP方式通信&#xff0c;SNTP服务器通过接收GPS信号或自带的原子钟作为系统的时间基准。 网络中存在很多台SNTP服务器&#xff0c;客户端会选择几台SNTP服务器使用。如果一台SNTP服务器在工作过程…

WIFI学习六(SNTP)

简介 SNPT&#xff08;Simple Network Time Protocal简单网络时间协议&#xff09;用于跨广域网或局域网时间同步的协议&#xff0c;具有较高的精确度&#xff08;几十毫秒&#xff09;。SNTP是NTP协议的简化版 SNTP的工作方式 SNTP协议采用客户端/服务器的工作方式&#xff0…

SNTP简介

要了解SNTP&#xff0c;首先需要了解NTP协议。SNTP是NTP的子集&#xff0c;简化了NTP的许多算法和步骤&#xff0c;得到了效率&#xff0c;但时间的精度不如NTP&#xff0c;可是对于民用时间来说足够了&#xff0c;大概最多差距几秒的样子。 NTP&#xff08;Network Time Proto…

SNTP原理讲解 客户端 C语言实现

1.定义 SNTP(Simple Network Time Protocal简单网络时间协议)&#xff0c;用于跨广域网或局域网同步时间的协议&#xff0c;具有较高的精确度&#xff08;几十毫秒&#xff09; 这里给出SNTP的详细定义和解释&#xff0c;以及基于C语言的SNTP客户端实现代码&#xff1a;SNTP c…