【情人节用Compose给女神写个爱心动画APP】

前言

前一阵子看电视里的学霸用代码写了个炫酷的爱心，网上有很多js和python的源码，复制粘贴就能拥有，但是Android的好像还没有人写过。今天正好是情人节，咱们来用Compose写一个简单的爱心动画，告诉女神们，咱们程序猿也有自己的浪漫（/手动狗头）

废话不多说，直接看效果：
（源码在最后）

涉及知识点

本篇文章涉及到技术不多，也都不深，适合各方面技术入门，以下列出关键的一些：

• Jetpack Compose
• Compose动画
• Canvas自由绘制
• 三次贝塞尔曲线

实现思路

1. 爱心是左右对称的，所以我们只要能实现半边，另外半边就很容易了

2. 半边爱心的曲线不算太复杂，但也不简单，使用两段三阶贝塞尔曲线相连才可以达到效果，取样点可以自己草图上画一下，草图可以不用很精确，后续可以根据效果再调整参数，如下
   

3. 绘制好一边之后，另一边就很简单，数据可以直接拿过来用，注意x轴符号取反就ok了

4. 用Compose的InfiniteTransition实现大小 和 透明度 的无限循环动画

实现过程

绘制爱心

讲解都在代码注释里了，直接看代码吧

@Composable
fun HeartBeat(modifier: Modifier = Modifier.fillMaxSize(),color: Color = Color.Red
) {Canvas(modifier = modifier) {//取canvas当前画布宽高的较小值-30，防止超出边界val minSize = min(size.height, size.width) - 30fval path = Path()//右半边爱心，先移动到中间心窝位置path.moveTo(center.x, center.y - minSize / 3)//相对位置的三阶贝塞尔曲线，从当前点连接下三个取样点path.relativeCubicTo(minSize / 4, -minSize / 4,minSize / 2, 0f,minSize / 2, minSize / 5)//同理，三阶贝塞尔曲线path.relativeCubicTo(0f, minSize / 3,-minSize * 3 / 8, minSize * 3 / 8,-minSize / 2, minSize * 3 / 4)//左半边爱心，同理，回到心窝位置开始，x轴参数取反即可path.moveTo(center.x, center.y - minSize / 3)path.relativeCubicTo(-minSize / 4, -minSize / 4,-minSize / 2, 0f,-minSize / 2, minSize / 5)path.relativeCubicTo(0f, minSize / 3,minSize * 3 / 8, minSize * 3 / 8,minSize / 2, minSize * 3 / 4)drawPath(path, color)}
}

创建动画效果

想要实现心跳的感觉，一个是大小的变化，还有一个就是透明度，由于是无线循环动画，所以使用Compose的InfiniteTransition来实现，不太了解的同学可以后续自行补习一下Compose动画

在HeartBeat方法内，Canvas代码块之上添加如下代码：

@Composable
fun HeartBeat(modifier: Modifier = Modifier.fillMaxSize(),color: Color = Color.Red,duration: Int = 600
) {//创建InfiniteTransitionval transition = rememberInfiniteTransition()//使用animateFloat创建透明度动画的State<Float>val alpha by transition.animateFloat(initialValue = 0.3f,targetValue = 1f,animationSpec = infiniteRepeatable(tween(duration),repeatMode = RepeatMode.Reverse))//同理，创建跳动大小动画的State<Float>val beatSize by transition.animateFloat(initialValue = 150f,targetValue = 50f,animationSpec = infiniteRepeatable(tween(duration),repeatMode = RepeatMode.Reverse))Canvas(modifier = modifier) {//...}
}

再改一下原来的Canvas，使用这两个动画参数

//...
Canvas(modifier = modifier) {val minSize = min(size.height, size.width) - beatSize//...drawPath(path, color, alpha)
}

Preview预览效果

这一步早在开发过程中就应该添加了，用Compose的话说：边看边开发，让你更加自信

@Preview
@Composable
fun HeartBeatPre() {HeartBeat()
}

至此就已经实现了这么一个简单的心跳动画，附上源码：

完整源码

/** Copyright (c) 2023.* @username: LiePy* @file: HeartBeat.kt* @project: ComposeAnimationKit* @model: ComposeAnimationKit.ComposeAnimationKit.main* @date: 2023/2/13 下午9:44*/package com.lie.composeanimationkit.animationimport androidx.compose.animation.core.*
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.tooling.preview.Preview
import kotlin.math.min/*** @desc 爱心跳动* @author LiePy* @date 2023/2/13*/@Composable
fun HeartBeat(modifier: Modifier = Modifier.fillMaxSize(),color: Color = Color.Red,duration: Int = 600
) {val transition = rememberInfiniteTransition()val alpha by transition.animateFloat(initialValue = 0.3f,targetValue = 1f,animationSpec = infiniteRepeatable(tween(duration),repeatMode = RepeatMode.Reverse))val beatSize by transition.animateFloat(initialValue = 150f,targetValue = 50f,animationSpec = infiniteRepeatable(tween(duration),repeatMode = RepeatMode.Reverse))Canvas(modifier = modifier) {//最小边作为正方形val minSize = min(size.height, size.width) - beatSizeval path = Path()//右半边爱心path.moveTo(center.x, center.y - minSize / 3)path.relativeCubicTo(minSize / 4, -minSize / 4,minSize / 2, 0f,minSize / 2, minSize / 5)path.relativeCubicTo(0f, minSize / 3,-minSize * 3 / 8, minSize * 3 / 8,-minSize / 2, minSize * 3 / 4)//左半边爱心path.moveTo(center.x, center.y - minSize / 3)path.relativeCubicTo(-minSize / 4, -minSize / 4,-minSize / 2, 0f,-minSize / 2, minSize / 5)path.relativeCubicTo(0f, minSize / 3,minSize * 3 / 8, minSize * 3 / 8,minSize / 2, minSize * 3 / 4)drawPath(path, color, alpha)}
}@Preview
@Composable
fun HeartBeatPre() {HeartBeat()
}

彩蛋

本动画已收录至我的 git 开源库项目，持续更新中。。。
GitHub: ComposeAnimationKit
Gitee: ComposeAnimationKit

导入使用ComposeAnimationKit，更多好玩的动画等你发现，

implementation 'io.github.LiePy:ComposeAnimationKit:1.1.2'