Compose 动画 (一) : animateXxxAsState 实现放大/缩小/渐变等效果

太过爱你忘了你带给我的痛 2023-10-09 15:20 47阅读 0赞

#### 1. 前言 ####

`动画`是`Android Compose`中很重要的一块内容。利用`Compose`可以简洁地定义动画，我们可以轻松快速地通过动画让应用变得生动有趣。  
本文会介绍如何定义一个最简单的Compose动画，从而实现Compose动画。

#### 2 定义一个Box ####

首先，我们先定义一个Box，给它背景设置为`蓝色`

Box(Modifier.size(50.dp).background(Color.Blue)) {
        
    
    }

显示效果如下  
![在这里插入图片描述][f1782cd199914b22addf14fce4bdbbe7.jpeg]  
这样我们就把方块显示出来了，接下来怎么让方块放大呢 ?

#### 3 定义一个Size替换`50.dp` ####

定义一个变量`size`，将50.dp替换为变量`size`。可以看到`size`是用`mutableStateOf`进行包裹的，`mutableStateOf`的返回值是一个`MutableState`，通过它就可以实现值变化后，Compose界面自动改变。

var size by remember {
        
        mutableStateOf(50.dp)
    }
    
    Box(
        Modifier
            .size(size)
            .background(Color.Blue)) {
        
    
    }

#### 4 设置点击事件改变size大小 ####

通过点击事件，改变变量`Size`的值，这样`Compose`会自动改变界面。

var size by remember {
        
        mutableStateOf(50.dp)
    }
    
    Box(
        Modifier
            .size(size)
            .background(Color.Blue)
            .clickable {
        
                size = if (size == 50.dp) 100.dp else 50.dp
            }) {
        
    
    }

我们运行项目，点击后效果如下  
![在这里插入图片描述][ae6ff11724534097b224d58753a0b9b0.gif]

#### 5 实现动画效果 ####

刚才实现的效果是瞬间变大的，我们希望动画是有一个渐变的过程的。  
这就需要使用到`animateDpAsState()`了

我们将

var size by remember {
        
        mutableStateOf(50.dp)
    }

替换为

var big by remember {
        
        mutableStateOf(false)
    }
    val size by animateDpAsState(if (big) 100.dp else 50.dp)

然后，在点击事件的时候，去改变`big`的值

Box(
        Modifier
            .size(size)
            .background(Color.Blue)
            .clickable {
        
                big = !big
            }) {
        
    
    }

运行程序，来看下效果  
![在这里插入图片描述][dafe4c4fb4c44ea0b23a99186fd37d51.gif]

#### 6 更多的animateXxxAsState ####

`Compose`中不光有`animateDpAsState()`，还有

*  `animateValueAsState` : 其他的`animateXxxAsState`内部都是调用的这个
 *  `animateRectAsState` : 参数是传的一个`Rect`对象，`Rect(left,top,right,bottom)`
 *  `animateIntAsState` : 参数传的是`Int`
 *  `animateDpAsState` : 参数传的是`Dp`
 *  `animateFloatAsState` : 参数传的是`Float`
 *  `animateColorAsState` : 参数传的是`Color`
 *  `animateOffsetAsState` : 参数传的是`Offset`，`Offset(x,y)`，`x`和`y`是`Float`类型
 *  `animateIntOffsetAsState` : 参数传的是`IntOffset`，`IntOffset(x,y)`，`x`和`y`是`Int`类型
 *  `animateSizeAsState` : 参数传的是`Size`，`Size(width,height)`，`width`和`height`是`Float`类型
 *  `animateIntSizeAsState` : 参数传的是`IntSize`，`IntSize(width,height)`，`width`和`height`是`Int`类型

#### 7 animateColorAsState ####

我们以`animateColorAsState`为例，来试一下

var big by remember {
        
        mutableStateOf(false)
    }
    val size by animateDpAsState(if (big) 100.dp else 50.dp)
    val color by animateColorAsState(targetValue = if (big) Color.Red else Color.Blue)
    
    Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()) {
        
        Box(
            Modifier
                .size(size)
                .background(color)
                .clickable {
        
                    big = !big
                }) {
        
    
        }
    }

可以看到，使用方式是一样的，效果如下所示  
![在这里插入图片描述][2bd9d8198beb4af1a315d905382407fb.gif]

#### 8 小结 ####

到这儿，我们就已经学会如何使用`animateXXAsState`来实现`Compose`动画了。  
但想必大家还有疑问

*  为什么`animateDpAsState`要用`val` ? 而`mutableStateOf`就用`var` ?
 *  `MutableState`和`State`有什么区别 ?
 *  为什么`animateDpAsState`不需要包remember ?
 *  为什么把`mutableStateOf`替换为`animateDpAsState`，就可以实现动画渐变的效果 ?

这些我们都将在下一篇文章里介绍。

#### 9. Compose 动画系列 ####

Compose 动画系列  
[Compose 动画 (一) : animateXxxAsState 实现放大/缩小/渐变等效果][Compose _ _ _ animateXxxAsState]  
[Compose 动画 (二) : 为什么animateDpAsState要用val ? MutableState和State有什么区别 ?][Compose _ _ _ _animateDpAsState_val _ MutableState_State_]  
[Compose 动画 (三) : AnimatedVisibility 从入门到深入][Compose _ _ _ AnimatedVisibility]  
[Compose 动画 (四) : AnimatedVisibility 各种入场和出场动画效果][Compose _ _ _ AnimatedVisibility 1]  
[Compose 动画 (五) : animateContentSize / animateEnterExit / Crossfade / AnimatedContent][Compose _ _ _ animateContentSize _ animateEnterExit _ Crossfade _ AnimatedContent]  
[Compose 动画 (六) : 使用Transition管理多个动画，实现动画预览][Compose _ _ _ _Transition]  
[Compose 动画 (七) : 高可定制性的动画 Animatable][Compose _ _ _ _ Animatable]  
[Compose 动画 (八) : Compose中的动画差值器 AnimationSpec][Compose _ _ _ Compose_ AnimationSpec]  
快速入门Compose动画 :  
[一个小时入门Compose动画][Compose]

> 本文为氦客在CSDN上独家发布  
> 地址 : [https://blog.csdn.net/EthanCo/article/details][https_blog.csdn.net_EthanCo_article_details]

[f1782cd199914b22addf14fce4bdbbe7.jpeg]: https://img-blog.csdnimg.cn/f1782cd199914b22addf14fce4bdbbe7.jpeg
[ae6ff11724534097b224d58753a0b9b0.gif]: https://img-blog.csdnimg.cn/ae6ff11724534097b224d58753a0b9b0.gif
[dafe4c4fb4c44ea0b23a99186fd37d51.gif]: https://img-blog.csdnimg.cn/dafe4c4fb4c44ea0b23a99186fd37d51.gif
[2bd9d8198beb4af1a315d905382407fb.gif]: https://img-blog.csdnimg.cn/2bd9d8198beb4af1a315d905382407fb.gif
[Compose _ _ _ animateXxxAsState]: https://blog.csdn.net/EthanCo/article/details/128601647
[Compose _ _ _ _animateDpAsState_val _ MutableState_State_]: https://blog.csdn.net/EthanCo/article/details/128569226
[Compose _ _ _ AnimatedVisibility]: https://blog.csdn.net/EthanCo/article/details/129268245
[Compose _ _ _ AnimatedVisibility 1]: https://blog.csdn.net/EthanCo/article/details/129381503
[Compose _ _ _ animateContentSize _ animateEnterExit _ Crossfade _ AnimatedContent]: https://blog.csdn.net/EthanCo/article/details/129383017
[Compose _ _ _ _Transition]: https://blog.csdn.net/EthanCo/article/details/129398914
[Compose _ _ _ _ Animatable]: https://blog.csdn.net/EthanCo/article/details/129839270
[Compose _ _ _ Compose_ AnimationSpec]: https://blog.csdn.net/EthanCo/article/details/129882487
[Compose]: https://blog.csdn.net/EthanCo/article/details/131038145
[https_blog.csdn.net_EthanCo_article_details]: https://blog.csdn.net/EthanCo/article/details

发表评论取消回复

表情：

评论列表（有 0 条评论，47人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序实现微动画效果｜消失渐变、变大缩小、滑动平移、方向摇晃

微动画，作为一种有效的视觉反馈手段，通过精细的动态效果增强用户界面的互动性和趣味性，实现吸引人的微动画效果，从而提升小程序的用户体验。

╰+哭是因爲堅強的太久メ/ 2024年04月22日 15:24/ 0 赞/ 48 阅读

相关 PHP对图片进行等比例放大、缩小

最近在处理小程序的图片数据，需要对库里数据的图片进行等比例放大缩小，自己也是网上找了一番，最终合成适用于放大、缩小并保存的例子，下面就跟大家分享这段代码： ...

ゝ一世哀愁。/ 2024年04月17日 05:48/ 0 赞/ 70 阅读

相关 Compose 动画 (一) : animateXxxAsState 实现放大/缩小/渐变等效果

1. 前言 `动画`是`Android Compose`中很重要的一块内容。利用`Compose`可以简洁地定义动画，我们可以轻松快速地通过动画让应用变得生动有趣。

太过爱你忘了你带给我的痛/ 2023年10月09日 15:20/ 0 赞/ 48 阅读

相关 Html 页面如何等比例缩小放大

Html 页面如何等比例缩小放大  style="transform:scale(0.8,0.8);" ![在这里插入图片

阳光穿透心脏的1/2处/ 2022年12月17日 07:16/ 0 赞/ 197 阅读

相关 css3 文字渐变动画效果

.css { background-image: -webkit-linear-gradient(left, red, blue 25%, 147B96 5

川长思鸟来/ 2022年12月07日 11:40/ 0 赞/ 265 阅读

相关 CSS动画效果无限循环放大缩小

效果图： ![20210315164413618.gif][] CSS动画效果无限循环放大缩小 <image class="anima" mode="widthF

- 日理万妓/ 2022年11月09日 14:10/ 0 赞/ 423 阅读

相关 html 透明度渐变效果,JS实现的透明度渐变动画效果示例

本文实例讲述了JS实现的透明度渐变动画效果。分享给大家供大家参考，具体如下： www.jb51.net JS透明度变化效果 body\{ margin: 0px; pa

Myth丶恋晨/ 2022年10月06日 10:55/ 0 赞/ 215 阅读

相关 vue 实现元素的放大缩小

使用transform 设置 scale 进行放大缩小，使用 transformOrigin 定位基点，在 data 中定义变了 scal 为 1 // 放大

柔情只为你懂/ 2022年09月04日 07:49/ 0 赞/ 409 阅读

相关 iOS点击button放大后缩小效果

-(void)buttonClick{ button.transform = CGAffineTransformIdentity; [U

r囧r小猫/ 2022年07月12日 13:38/ 0 赞/ 292 阅读

相关自定义ImageView实现图片手势滑动、放大缩小效果

上一节说了通过自定义来加载超大图片，同时实现手指的拖动效果。不过，另一种情况就是，我们希望应用能够加载整张图片，如果图片太大就先压缩，如果小于屏幕就直接显示，同时用户可以拖拽移

深藏阁楼爱情的钟/ 2021年09月22日 05:00/ 0 赞/ 751 阅读