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

概述

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

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

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

低级别动画 api

animate*asstate

所能处理属性的种类：float、color、dp、size、bounds、offset、rect、int、intoffset 和 intsize

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

实现放大动画

1.代码

2.实现效果

实现颜色变化动画

1.代码

2.效果

使用 animatable 实现颜色变化效果

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

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

1.代码

2.效果

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

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

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

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

1.代码

2.效果

rememberinfinitetransition

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

1.代码

2.效果 ​​​​​​​

targetbasedanimation

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

1.代码

2.效果 ​​​​​​​

自定义动画

animationspec

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

springspec 弹簧效果

1.代码

2.效果 ​​​​​​​

tweenspec 动画时间可控

1.代码

2.效果 ​​​​​​​

framespec

1.代码

2.效果

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

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

1.代码

2.效果

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

infiniterepeatablespec 无限次数执行动画

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

1.代码

2.效果

easing

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

有以下几种选择：

• fastoutslowineasing
• linearoutslowineasing
• fastoutlinearineasing
• lineareasing
• cubicbeziereasing

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

实现效果：

animationvector

大多数 compose 动画 api 都支持将 float、color、dp 以及其他基本数据类型作为开箱即用的动画值，但有时我们需要为其他数据类型（包括我们的自定义类型）添加动画效果

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

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

1.代码

2.效果

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

高级动画

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

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

1. animatedvisibility
2. animatecontentsize
3. crossfade

以上就是jetpack compose实现动画效果的方法详解的详细内容，更多关于jetpack compose动画的资料请关注其它相关文章！