首页 > 作文

Jetpack Compose实现动画效果的方法详解

更新时间:2023-04-05 22:27:14 阅读: 评论:0

概述

compo 为支持动画提供了大量的 api,通过这些 api 我们可以轻松实现动画效果

ps:这些 api 的原理与 flutter 很接近,与原生的 api 相去甚远

你可以提前看看用 compo 实现的一个放大缩小动画,总的来说还是比较流畅:

低级别动画 api

animate*asstate

所能处理属性的种类:float、color、dp、size、bounds、offt、rect、int、intofft 和 intsize

通过 animate*asstate 我们可以实现单一属性的动画效果,我们只需要提供目标值就可以自动从廉洁从业心得体会当前进度动画过渡到目标值

实现放大动画

1.代码

2.实现效果

实现颜色变化动画

1.代码

2.效果

使用 animatable 实现颜色变化效果

animatable 是一个值容器,我们可以通过调用 animateto 实现动画效果。动画执行过程中如果再次开启动画会中断当前动画。

animatable 动画执行过程中值的变化是在协程中执行的,所以 animateto 是一个挂起操作

1.代码

2.效果

使用 updatetransition 实现颜色和圆角动画

使用 updatetransition 可以实现多个动画组合的效果。

例如:我们可以在动画执行过程中同时执行大小和颜色变化效果

本例中我们定义了一个枚举用来控制动画,枚举可以定义多个,分别用来对应动画的多个状态

1.代码

2.效果

rememberinfinitetransition

rememberinfinitetransition 的使用和 updatetransition 基本一样,不同的是 rememberinfinitetransition 的动画一旦开始便会一直反复运行下去,只有被移除动画才能结束

1.代码

2.效果 ​​​​​​​

targetbadanimation

targetbadanimation 可以控制动画的执行时间,还可以延迟一段时间再开启动画。

1.代码

2.效果 ​​​​​​​

自定义动画

animationspec

animationspec 可以自定义动画的行为,效果类似于原生动画中的估值器。

springspec 弹簧效果

1.代码

2.效果 ​​​​​​​

tweenspec 动画时间可控

1.代码

2.效果 ​​​​​​​

framespec

1.代码

2.效果

repeatablespec 实现有限次数的重复动画

执行有限次数动画后自动停止

1.代码

2.效果

代码中设置了重复 5 次,所以反复执行五次后动画结束

infiniterepeatablesp花满楼李玉刚ec 无限次数执行动画

动画会无限次的执行下去,直到视图被移除

1.代码

2.效果

easing

easing 类似于我们原生动画中的差值器

有以下几种选择:

fastoutslowineasinglinearoutslowineasingfastoutlinearineasinglineareasingcubicbeziereasing

这几种实现的效果和 android 机房管理原生实现的动画差值器差距很大,甚至看不出有啥效果,所以代码我就不放了。有清楚原因的读者可以联系我

实现效果:

animationvector

大多数 compo 动画 api 都支持将 float、color、dp 以及其他基本郭富城老婆资料数据类型作为开箱即用的动画值,但有时我们需要为其他数据类型(包括我们的自定义类型)添加动画效果

本例中实现颜色和大小的变换动画

代码中我们定义了一个 animsize 类,类中的第一个参数是颜色数据,第二个参数是尺寸数据。动画执行过程中会同事改变颜色和控件尺寸效果。

1.代码

2.效果

缺点是执行颜色变化过程中有闪烁

高级动画

高级动画一般指封装性较高的动画,使用较为简单,主要有以下三种:

因高级动画效果不明显,gif 很难展现月光色出效果,所以这里不放代码和效果图了

animatedvisibilityanimatecontentsizecrossfade

以上就是jetpack compo实现动画效果的方法详解的详细内容,更多关于jetpack compo动画的资料请关注www.887551.com其它相关文章!

本文发布于:2023-04-05 22:27:13,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/2f433dc157c987f875d91e4699f599c4.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:Jetpack Compose实现动画效果的方法详解.doc

本文 PDF 下载地址:Jetpack Compose实现动画效果的方法详解.pdf

标签:动画   效果   代码   颜色
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图