2024年最新Compose 动画艺术探索之动画规格_网络动画的规格要求(3)，鸿蒙自定义view面试

最新推荐文章于 2024-07-31 15:35:03 发布

2401_84862298

最新推荐文章于 2024-07-31 15:35:03 发布

阅读量859

点赞数 21

分类专栏：程序员文章标签：鸿蒙面试学习

本文链接：https://blog.csdn.net/2401_84862298/article/details/138877220

版权

程序员专栏收录该内容

105 篇文章 0 订阅

订阅专栏

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化的资料的朋友，可以戳这里获取

dampingRatio = Spring.DampingRatioNoBouncy,
stiffness = Spring.StiffnessVeryLow

)


![请添加图片描述](https://img-blog.csdnimg.cn/4da985c9f10148b2b2a9aedd48dd429b.jpeg)


可以看到点击按钮之后明显有了动画效果，动画时间明显增加。


#### 很低刚度和高阻尼


阻尼默认的是最小的，这里咱们直接试下最大的来看下：

animationSpec = spring(
dampingRatio = Spring.DampingRatioHighBouncy,
stiffness = Spring.StiffnessVeryLow
)


![请添加图片描述](https://img-blog.csdnimg.cn/c5591aef1b9c4439940145c460b10469.jpeg)


可以看到有回弹效果，类似弹簧，但颜色有点看不太清，我改成 `size` 让大家看的更加明显一些：

var isSmall by remember { mutableStateOf(true) }
val size: Dp by animateDpAsState(
targetValue = if (isSmall) 40.dp else 100.dp,
animationSpec = spring(
dampingRatio = Spring.DampingRatioHighBouncy,
stiffness = Spring.StiffnessVeryLow
)
)


OK，改成了 `size` 咱们再来看下效果！


![请添加图片描述](https://img-blog.csdnimg.cn/aae78c81810f404cb736d53d16f71cdd.jpeg)


`size` 就能明显看到弹簧效果了！


### 动画规格——tween


`tween` 是用来创建使用给定的持续时间、延迟和缓和曲线配置的动画规格，先来看下使用方法吧：

var isSmall by remember { mutableStateOf(true) }
val size: Dp by animateDpAsState(
targetValue = if (isSmall) 40.dp else 100.dp,
animationSpec = tween()
)

Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally,
) {
Button(
onClick = { isSmall = !isSmall },
) {
Text(“修改Dp值”)
}
Box(modifier = Modifier.size(size).background(Blue))
}


代码是不是很熟悉，没错，和上一篇文章中的测试代码差不多，只不过这里将动画规格由默认的 `spring` 换为了 `tween` ，来看下运行效果吧！


![请添加图片描述](https://img-blog.csdnimg.cn/b19cea1508d84a7eb27c700f2fdb685e.jpeg)


可以看到 `tween` 默认刚开始运行比较快，快完成时开始减速。下面来看看 `tween` 的代码吧！

fun tween(
durationMillis: Int = DefaultDurationMillis,
delayMillis: Int = 0,
easing: Easing = FastOutSlowInEasing
): TweenSpec = TweenSpec(durationMillis, delayMillis, easing)


可以看到 `tween` 也是一个泛型方法，返回值为 `TweenSpec` ，然后有三个参数，老规矩，来看下这三个参数有啥用！


* **durationMillis**：动画持续时间，默认值为 `DefaultDurationMillis` ，300
* **delayMillis**：动画在启动前等待的时间，以毫秒为单位
* **easing**：用于在开始和结束之间插入的松弛曲线，默认值为 `FastOutSlowInEasing`


前两个参数都很好理解，这里重点来看下第三个参数 `easing` ，它的参数类型为 `Easing` ，那么 `Easing` 是个啥呢？来看看！

fun interface Easing {
fun transform(fraction: Float): Float
}


奥，`Easing` 原来是个接口，是一种调整动画分数的方法，允许过渡元素加速或减速，而不是以恒定的速度移动，`Easing` 中还有一个方法，方法中参数 `fraction` 是一个在0到1.0之间的值，表示动画中的当前点，其中0表示开始，1.0表示结束。


看了下 `Easing` 只有一个实现类 `CubicBezierEasing` ，表示三阶贝塞尔曲线运动，`CubicBezierEasing` 类中的具体实现这里不仅行深究，感兴趣的可以去看下。


`Easing` 中官方给了四种实现，来看下吧！

// 以静止开始和结束的元素使用这个标准缓动。他们快速加速，逐渐减速，以强调过渡的结束。这是最常见的方式。这相当于原生插值器FastOutSlowInInterpolator
val FastOutSlowInEasing: Easing = CubicBezierEasing(0.4f, 0.0f, 0.2f, 1.0f)

// 进入的元素使用减速缓和动画，以峰值速度(元素移动的最快点)开始过渡，并在静止时结束。这相当于原生插值器LinearOutSlowInInterpolator
val LinearOutSlowInEasing: Easing = CubicBezierEasing(0.0f, 0.0f, 0.2f, 1.0f)

// 退出屏幕的元素使用加速缓动，它们从静止开始，以峰值速度结束。这相当于原生中插值器 FastOutLinearInInterpolator
val FastOutLinearInEasing: Easing = CubicBezierEasing(0.4f, 0.0f, 1.0f, 1.0f)

// 线性，匀速
val LinearEasing: Easing = Easing { fraction -> fraction }


可以看到这四种都很好理解，有三种和原生中的一些插值器类似，剩下的一种直接就是线型的。下面就来分别看下吧！


#### LinearEasing


先从线型的 `Easing` 来看下吧，先来修改下代码：

animationSpec = tween(
durationMillis = 2000,
easing = LinearEasing
)


为了看的更加明显将持续时间改为了两秒，然后将 `easing` 设置为了 `LinearEasing` ，运行来看下！


![请添加图片描述](https://img-blog.csdnimg.cn/2b191b1d05954e62939c8b8a9c85ded0.jpeg)


可以看到 `LinearEasing` 匀速的执行整个动画。


#### FastOutLinearInEasing


接下来看下 `FastOutLinearInEasing` ，同样修改下代码：

animationSpec = tween(
durationMillis = 2000,
easing = FastOutLinearInEasing
)


运行看效果！


![请添加图片描述](https://img-blog.csdnimg.cn/689c10c5aa24453f8ed6f9f73f8dc8ff.jpeg)


可以明显看到动画速度由慢到快，速度从零开始慢慢加快，到动画结束时速度达到最快。


#### LinearOutSlowInEasing


下面来看下 `LinearOutSlowInEasing` ，同样修改下代码：

animationSpec = tween(
durationMillis = 2000,
easing = LinearOutSlowInEasing
)


运行看效果！


![请添加图片描述](https://img-blog.csdnimg.cn/f5ba183cedd247a9b1b396701117a826.jpeg)


可以看到动画由快到慢，在做减速运动。


#### FastOutSlowInEasing


最后来看下 `FastOutSlowInEasing` ，同样修改下代码：

animationSpec = tween(
durationMillis = 2000,
easing = FastOutSlowInEasing
)


运行看效果！


![请添加图片描述](https://img-blog.csdnimg.cn/08b3d8e4d52d455da6a8fb1950829b33.jpeg)


可以看到动画快速加速，逐渐减速，这是 `tween` 默认的 `Easing` 。


官方内置的几种 `Easing` 一般来说够用了，但如果项目中有特殊需求的话，大家也可以对 `Easing` 进行自定义。


### 动画规格——snap


`Snap` 用于立即将动画值切换到结束值，先来看下 `snap` 的代码吧：

fun snap(delayMillis: Int = 0) = SnapSpec(delayMillis)


很简单，只有一个参数，而且在上面 `tween` 中还遇到过，就是动画播放的开始时间，也没啥好说的，接着来看 `SnapSpec` 吧！

class SnapSpec(val delay: Int = 0) : DurationBasedAnimationSpec {
override fun vectorize(
converter: TwoWayConverter<T, V>
): VectorizedDurationBasedAnimationSpec = VectorizedSnapSpec(delay)
}


可以看到 `SnapSpec` 继承自 实现了 `DurationBasedAnimationSpec` ，`DurationBasedAnimationSpec` 是基于持续时间的动画规范，那就再来看下 `DurationBasedAnimationSpec` :

interface DurationBasedAnimationSpec : FiniteAnimationSpec {
override fun vectorize(converter: TwoWayConverter<T, V>):
VectorizedDurationBasedAnimationSpec
}


嗯，`DurationBasedAnimationSpec` 也是个接口，继承自有限动画规格。其实上面所说的 `tweenSpec` 也实现了的是 `DurationBasedAnimationSpec` 接口，实现 `DurationBasedAnimationSpec` 接口的还有 `KeyframesSpec` ，这个下面会说，这里咱们先看 `snap` 。


下面写个测试代码来看看效果！

val size: Dp by animateDpAsState(
targetValue = if (isSmall) 40.dp else 100.dp,
animationSpec = snap(delayMillis = 500)
)


还用刚才的测试代码吧，修改下动画规格，这里将延迟动画设置为了 500，运行看下效果！


![请添加图片描述](https://img-blog.csdnimg.cn/c30c12e8ece147ab8ceab165c48f40cd.jpeg)


可以看到点击按钮后停顿了下，这就是我们刚设置的 500，然后开始后动画直接结束，没有动画过程。


### 动画规格——keyframes


`keyframes` 基于动画持续时间中不同时间戳定义的值（即不同的关键帧）来制作动画。每个关键帧都可以使用 `KeyframesSpecConfig.at`来进行定义。老规矩，先来看下 `keyframes` 函数：

fun keyframes(
init: KeyframesSpec.KeyframesSpecConfig.() -> Unit
): KeyframesSpec {
return KeyframesSpec(KeyframesSpec.KeyframesSpecConfig().apply(init))
}


同样的，`keyframes` 也只有一个参数，但这个参数没有见过，是 `KeyframesSpec` 中的一个内部类，来看下吧：

class KeyframesSpecConfig {
// 动画持续时间，默认为300
var durationMillis: Int = DefaultDurationMillis

// 动画播放延迟时间，默认为0
var delayMillis: Int = 0

// 关键帧
internal val keyframes = mutableMapOf<Int, KeyframeEntity>()

// 添加一个关键帧
infix fun T.at(/@IntRange(from = 0)/ timeStamp: Int): KeyframeEntity {
return KeyframeEntity(this).also {
keyframes[timeStamp] = it
}
}

// 为刚提供的时间戳开始的时间间隔添加 Easing
infix fun KeyframeEntity.with(easing: Easing) {
this.easing = easing
}
}


`KeyframesSpecConfig` 是一个泛型类，类中只有三个参数和两个方法，注释写在了代码中。但这块还需要说下 `kotlin` 的一个关键字 `infix` ，`infix` 是中缀表达式，有几个前提条件：


* 必须是**成员函数或扩展函数**
* 必须**只有一个参数**
* 参数**不可能是可变参数或默认参数**


可以看到 `at` 和 `with` 方法都符合要求，下面咱们来看看如何使用吧！

animationSpec = keyframes {
durationMillis = 375
50.dp at 0 with LinearOutSlowInEasing
52.dp at 35 with FastOutLinearInEasing
55.dp at 75 // ms
100.dp at 225 // ms
}


同样还是使用刚才的测试，修改下动画规格，可以看到 `kotlin` 的 `infix` 的骚操作，写起来很好用，插入了四个关键帧，并定义了下动画时间，下面运行来看下效果吧！


![请添加图片描述](https://img-blog.csdnimg.cn/104aa3da75de4481a838a780b2edbfee.jpeg)


可以看到动画确实是按照咱们定义的关键帧来执行的，没毛病！如果有需要的话大家可以在每一个关键帧上添加 `Easing` ，当然不加也可以！


### 动画规格——repeatable


`repeatable` 用来构建可重复的动画，先来看下调用函数吧：

fun repeatable(
iterations: Int,
animation: DurationBasedAnimationSpec,
repeatMode: RepeatMode = RepeatMode.Restart,
initialStartOffset: StartOffset = StartOffset(0)
): RepeatableSpec =
RepeatableSpec(iterations, animation, repeatMode, initialStartOffset)


可以看到 `repeatable` 有四个参数，来分别看下：


* **iterations**：重复次数，理论上来说应该大于一，其实等于也可以，但没必要
* **animation**：将被重复的动画规格，注意这里的动画规格是 `DurationBasedAnimationSpec` ，也就是说可以使用 `KeyframesSpec` 、`SnapSpec` 和 `TweenSpec`
* **repeatMode**：指定动画播放模式
* **initialStartOffset**：动画开始的偏移




**深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**

![](https://img-blog.csdnimg.cn/direct/743b668910224b259a5ffe804fa6d0db.png)
![img](https://img-blog.csdnimg.cn/img_convert/b271077b827bde517d9130bec8dbf59b.png)
![img](https://img-blog.csdnimg.cn/img_convert/2fbe51dc6deb8052480a3b27008fa097.png)

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618636735)**

知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**

![](https://img-blog.csdnimg.cn/direct/743b668910224b259a5ffe804fa6d0db.png)
[外链图片转存中...(img-dQSotCKm-1715705333539)]
[外链图片转存中...(img-pWwp7sw0-1715705333540)]

**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上鸿蒙开发知识点，真正体系化！**

**由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新**

**[需要这份系统化的资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618636735)**

2401_84862298

关注

21
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
2024年最新Compose 动画艺术探索之动画规格_网络动画的规格要求(3)，鸿蒙自定义view面试

/ 以静止开始和结束的元素使用这个标准缓动。这相当于原生插值器FastOutSlowInInterpolator。// 进入的元素使用减速缓和动画，以峰值速度(元素移动的最快点)开始过渡，并在静止时结束。// 退出屏幕的元素使用加速缓动，它们从静止开始，以峰值速度结束。这相当于原生中插值器 FastOutLinearInInterpolator。// 为刚提供的时间戳开始的时间间隔添加 Easing。// 动画持续时间，默认为300。// 动画播放延迟时间，默认为0。// 添加一个关键帧。
复制链接

扫一扫