Compose 动画 (八) : Compose中的动画差值器 AnimationSpec

超、凢脫俗 2023-10-09 16:11 47阅读 0赞

### 1. AnimationSpec是什么 ###

`Android Compose`中的`AnimationSpec`用来自定义动画规格。  
啥意思呢，其实就是类似于`传统View体系`中的差值器`Interpolator`，但是比起差值器，又提供了更多的功能。  
根据其不同的子类，可以来控制动画执行时长、设置动画执行多少时间到动画的某个位置、实现仿弹簧的动画效果、指定动画执行次数等等功能。

val alpha: Float by animateFloatAsState(
        targetValue = if (enabled) 1f else 0.5f,
        animationSpec = tween(durationMillis = 300, easing = FastOutSlowInEasing) //这里的tween就是个AnimationSpec
    )

先来看下`Compose`中所有的`AnimationSpec`

![在这里插入图片描述][09bc9f498af24e2ba9c86128bd225c9c.png]  
看上去很多是不是，但实际上我们只需要记住这几个重点的就行  
![在这里插入图片描述][2794031bc47746a69384621af65a84fe.png]

其中，蓝色背景的是可以直接进行使用的 (实现类)，灰色背景的是接口，`AnimationSpec`也是一个接口。

interface AnimationSpec<T> {
        
        fun <V : AnimationVector> vectorize(
            converter: TwoWayConverter<T, V>
        ): VectorizedAnimationSpec<V>
    }

### 1. SpringSpec ###

`SpringSpec`实现了`AnimationSpec`接口，提供了一些列基于弹簧的物理动画效果。  
很多动画内部`AnimationSpec`使用的默认值都是`spring`，比如`animateXXXAsState`以及`updateTransition`等。  
因为`spring`的动画效果基于物理原理，使动画更真实自然。  
同时，因为`spring`是基于物理规律的，所以无法指定动画执行时长，而是会基于物理规律来确定动画执行时长。

class SpringSpec<T>(
        val dampingRatio: Float = Spring.DampingRatioNoBouncy,
        val stiffness: Float = Spring.StiffnessMedium,
        val visibilityThreshold: T? = null
    ) : FiniteAnimationSpec<T>

`spring`有三个传参，`dampingRatio`、`stiffness`和`visibilityThreshold`，前两个参数主要用来控制弹跳动画的动画效果。

#### 1.1 使用示例 ####

var change by remember {
        
        mutableStateOf(false)
    }
    val offsetX = remember(change) {
        
        if (change) 350.dp else 50.dp
    }
    val offsetXAnim = remember {
        
        Animatable(offsetX, Dp.VectorConverter)
    }
    LaunchedEffect(key1 = change, block = {
        
        offsetXAnim.animateTo(
            offsetX, spring(Spring.DampingRatioMediumBouncy, stiffness = Spring.StiffnessMedium)
        )
    })
    
    Box(modifier = Modifier
        .padding(offsetXAnim.value, 0.dp, 0.dp, 0.dp)
        .size(100.dp)
        .background(Color.Blue)
        .clickable {
         change = !change })

效果如下所示  
![在这里插入图片描述][46718d6a387d4818baf5f7c16659a6ac.gif]

#### 1.2 dampingRatio ####

`dampingRation`表示弹簧的阻尼比。这个值越大，阻尼越大。  
不同的`dampingRatio`有不同的效果，如下图所示  
![在这里插入图片描述][f4aca70d7a29411bb5dd7769e0f4b3d5.gif]

如果不额外指定，默认会使用`DampingRationNoBouncy`，是不带弹簧效果的。

> 需要注意dampingRation不能小于0

#### 1.3 stiffness ####

`stiffness`定义弹簧的刚度值，弹簧有多想变回去，这个值越大，回弹的越快。  
`Compose`为`stiffness`定义的常量如下，默认值是`StiffnessMedium`

const val StiffnessHigh = 10_000f
    const val StiffnessMedium = 1500f
    const val StiffnessMediumLow = 400f
    const val StiffnessLow = 200f
    const val StiffnessVeryLow = 50f

> 需要注意stiffness必须大于0

#### 1.4 visibilityThreshold ####

`visibilityThreshold`用来指定一个阈值，当动画到达这个阈值时，动画会立即停止。

### 2. TweenSpec ###

这里的`Tween`不是老的`View体系`动画中的补间动画，而是和`Interpolator`(差值器)是一个作用的东西。  
`tween`动画必须在规定时间内完成，它不能像`SpringSpec`那样完全基于物理规律进行动画，

class TweenSpec<T>(
        val durationMillis: Int = DefaultDurationMillis,
        val delay: Int = 0,
        val easing: Easing = FastOutSlowInEasing
    )

`tween`有3个参数

*  `durationMillis` : 动画执行时间 (`ms`)
 *  `delayMillis` : 延迟多久开始执行
 *  `Easing` : 衰减曲线动画效果，用来配置怎么进行渐变的

#### 2.1 使用示例 ####

var change by remember {
        
        mutableStateOf(false)
    }
    val offsetX = remember(change) {
        
        if (change) 300.dp else 0.dp
    }
    val offsetXAnim = remember {
        
        Animatable(offsetX, Dp.VectorConverter)
    }
    LaunchedEffect(key1 = change, block = {
        
        //offsetXAnim.animateTo(offsetX, TweenSpec(easing = LinearEasing))
        //tween是TweenSpec的简便写法，这两种都是可以用的
        offsetXAnim.animateTo(
            offsetX, tween(durationMillis = 1000, delayMillis = 0, easing = FastOutSlowInEasing)
        )
    })
    
    Box(modifier = Modifier
        .padding(offsetXAnim.value, 0.dp, 0.dp, 0.dp)
        .size(100.dp)
        .background(Color.Blue)
        .clickable {
         change = !change })

效果如下所示

![在这里插入图片描述][1ddf2cce1c58403a947194dd36610782.gif]

#### 2.2 Easing ####

`Compose`中预置的`Easing`有这些

//先加速后减速(默认)，相当于差值器中的FastOutSlowInInterpolator
    //和AccelerateDecelerateInterpolator类似 (区别和FastOutSlowInInterpolator在于曲线幅度稍有不同，下面几个同理)
    val FastOutSlowInEasing: Easing = CubicBezierEasing(0.4f, 0.0f, 0.2f, 1.0f)
    //入场速度快，慢慢减速到0，相当于差值器中的LinearOutSlowInInterpolator，和DecelerateInterpolator类似
    val LinearOutSlowInEasing: Easing = CubicBezierEasing(0.0f, 0.0f, 0.2f, 1.0f)
    //从0慢慢加速到很快，相当于差值器中的FastOutLinearInInterpolator，和AccelerateInterpolator类似
    val FastOutLinearInEasing: Easing = CubicBezierEasing(0.4f, 0.0f, 1.0f, 1.0f)
    //线性
    val LinearEasing: Easing = Easing {
         fraction -> fraction }

##### 2.2.1 示意曲线 #####

![在这里插入图片描述][a494635ba4d649039b6d2406a63c77a5.png_pic_center]

##### 2.2.2 自定义Easing #####

使用`CubicBezierEasing`可以自定义`Easing`，  
使用贝塞尔曲线`API`网站 : [cubic-bezier.com][] ，专门用来展现三阶贝塞尔曲线的效果的，可以查到对应三阶贝塞尔曲线具体的参数，我们传入到`CubicBezierEasing`中就可以自定义`Easing`了。

比如这里

*  `FastOutSlowInEasing`对应的参数是`CubicBezierEasing(0.4f, 0.0f, 0.2f, 1.0f)`
 *  `LinearOutSlowInEasing`对应的参数是`CubicBezierEasing(0.0f, 0.0f, 0.2f, 1.0f)`  
    ![在这里插入图片描述][a5ae29c19d904e18a24bac0f68de5501.png]

### 3. SnapSpec ###

即时生效动画规格，和`anim.snapTo`的效果是一样的

anim.snapTo()
    anim.animateTo(offset,SnapSpec(delayMillis=100/*可以设置延迟*/))
    anim.animateTo(offset,snap(delayMillis=100/*可以设置延迟*/))

#### 3.1 使用示例 ####

var change by remember {
        
        mutableStateOf(false)
    }
    val offsetX = remember(change) {
        
        if (change) 300.dp else 0.dp
    }
    val offsetXAnim = remember {
        
        Animatable(offsetX, Dp.VectorConverter)
    }
    LaunchedEffect(key1 = change, block = {
        
        offsetXAnim.animateTo(
            offsetX, snap(delayMillis = 100)
        )
    })
    
    Box(modifier = Modifier
        .padding(offsetXAnim.value, 0.dp, 0.dp, 0.dp)
        .size(100.dp)
        .background(Color.Blue)
        .clickable {
         change = !change })

效果如下所示  
![在这里插入图片描述][3290d0ac7b994032a22c92491a1f46fa.gif]

### 4. KeyframesSpec ###

关键帧动画规格，相当于可以分段的`tweenSpec`，但是动画的复用性会降低

anim.animateTo(size,keyframes{
        
    	//infix function 中缀函数
    	250.dp at 0 with LinearEasing //作用于 0毫秒-150毫秒
    	500.dp at 150 with FastOutSlowInEasing//作用于150毫秒及之后  //默认是LinearEasing
    	durationMillis = 450 //执行时长
    	delayMillis = 50 //延迟多久执行
    })

> 1.until(100) ----> 1 until 100 // 这也是一个中缀函数

#### 4.1 使用示例 ####

var change by remember {
        
        mutableStateOf(false)
    }
    val offsetX = remember(change) {
        
        if (change) 300.dp else 0.dp
    }
    val offsetXAnim = remember {
        
        Animatable(offsetX, Dp.VectorConverter)
    }
    LaunchedEffect(key1 = change, block = {
        
        offsetXAnim.animateTo(offsetX, keyframes {
        
            80.dp at 250 with FastOutSlowInEasing //0至150毫秒
            durationMillis = 1000 //动画持续多久
            delayMillis = 50 //延迟多久执行
        })
    })
    
    Box(modifier = Modifier
        .padding(offsetXAnim.value, 0.dp, 0.dp, 0.dp)
        .size(100.dp)
        .background(Color.Blue)
        .clickable {
         change = !change })

显示效果

![在这里插入图片描述][6efc5bbd07454b048e6c2e37161b220a.gif]

### 5. RepeatableSpec ###

循环动画规格，`SpringSpec`不能放进`RepeatableSpec`里面，必须是`DurationBasedAnimationSpec`的子类，`SpringSpec`属于物理弹簧效果，真实环境下肯定是无法持续循环的。

fun <T> repeatable(
        iterations: Int, //重复次数
        animation: DurationBasedAnimationSpec<T>, 
        repeatMode: RepeatMode = RepeatMode.Restart, //重复模式 : 重新开始 / 翻转
        initialStartOffset: StartOffset = StartOffset(0) //初始偏移(时间偏移)
    )

#### 5.1 使用示例 ####

var change by remember {
        
        mutableStateOf(false)
    }
    val offsetX = remember(change) {
        
        if (change) 300.dp else 0.dp
    }
    val offsetXAnim = remember {
        
        Animatable(offsetX, Dp.VectorConverter)
    }
    LaunchedEffect(key1 = change, block = {
        
        RepeatMode.Restart
        offsetXAnim.animateTo(offsetX, repeatable(3,tween(),RepeatMode.Reverse))
    })
    
    Box(modifier = Modifier
        .padding(offsetXAnim.value, 0.dp, 0.dp, 0.dp)
        .size(100.dp)
        .background(Color.Blue)
        .clickable {
         change = !change })

效果如下所示

![在这里插入图片描述][f3236c17c24e482e8f7b5b34803b4421.gif]

### 6. InfiniteRepeatableSpec ###

`InfiniteRepeatableSpec`是无限动画规格，会无限执行。  
和`RepeatableSpec`本质上没有区别，只有一个区别，无限和有限。

anim.animateTo(size, infiniteRepeatable(tween(),RepeatMode.Reverse))

效果如下所示

![在这里插入图片描述][fde750a36177401a9d526cef5eaea669.gif]

### 7. 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]

> 本文为氦客在CSDN上独家发布  
> 地址 : [https://blog.csdn.net/EthanCo/article/details/129882487][Compose _ _ _ Compose_ AnimationSpec]

[09bc9f498af24e2ba9c86128bd225c9c.png]: https://img-blog.csdnimg.cn/09bc9f498af24e2ba9c86128bd225c9c.png
[2794031bc47746a69384621af65a84fe.png]: https://img-blog.csdnimg.cn/2794031bc47746a69384621af65a84fe.png
[46718d6a387d4818baf5f7c16659a6ac.gif]: https://img-blog.csdnimg.cn/46718d6a387d4818baf5f7c16659a6ac.gif
[f4aca70d7a29411bb5dd7769e0f4b3d5.gif]: https://img-blog.csdnimg.cn/f4aca70d7a29411bb5dd7769e0f4b3d5.gif
[1ddf2cce1c58403a947194dd36610782.gif]: https://img-blog.csdnimg.cn/1ddf2cce1c58403a947194dd36610782.gif
[a494635ba4d649039b6d2406a63c77a5.png_pic_center]: https://img-blog.csdnimg.cn/a494635ba4d649039b6d2406a63c77a5.png#pic_center
[cubic-bezier.com]: https://cubic-bezier.com/
[a5ae29c19d904e18a24bac0f68de5501.png]: https://img-blog.csdnimg.cn/a5ae29c19d904e18a24bac0f68de5501.png
[3290d0ac7b994032a22c92491a1f46fa.gif]: https://img-blog.csdnimg.cn/3290d0ac7b994032a22c92491a1f46fa.gif
[6efc5bbd07454b048e6c2e37161b220a.gif]: https://img-blog.csdnimg.cn/6efc5bbd07454b048e6c2e37161b220a.gif
[f3236c17c24e482e8f7b5b34803b4421.gif]: https://img-blog.csdnimg.cn/f3236c17c24e482e8f7b5b34803b4421.gif
[fde750a36177401a9d526cef5eaea669.gif]: https://img-blog.csdnimg.cn/fde750a36177401a9d526cef5eaea669.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