广西南宁网站建设,萧江网站建设,网站业务需求文档,node.js做的网站情人节用Compose给女神写个爱心动画APP前言涉及知识点实现思路实现过程绘制爱心创建动画效果Preview预览效果完整源码彩蛋前言
前一阵子看电视里的学霸用代码写了个炫酷的爱心#xff0c;网上有很多js和python的源码#xff0c;复制粘贴就能拥有#xff0c;但是Android的好…
情人节用Compose给女神写个爱心动画APP前言涉及知识点实现思路实现过程绘制爱心创建动画效果Preview预览效果完整源码彩蛋前言
前一阵子看电视里的学霸用代码写了个炫酷的爱心网上有很多js和python的源码复制粘贴就能拥有但是Android的好像还没有人写过。今天正好是情人节咱们来用Compose写一个简单的爱心动画告诉女神们咱们程序猿也有自己的浪漫/手动狗头
废话不多说直接看效果 源码在最后
涉及知识点
本篇文章涉及到技术不多也都不深适合各方面技术入门以下列出关键的一些
Jetpack ComposeCompose动画Canvas自由绘制三次贝塞尔曲线
实现思路 爱心是左右对称的所以我们只要能实现半边另外半边就很容易了 半边爱心的曲线不算太复杂但也不简单使用两段三阶贝塞尔曲线相连才可以达到效果取样点可以自己草图上画一下草图可以不用很精确后续可以根据效果再调整参数如下 绘制好一边之后另一边就很简单数据可以直接拿过来用注意x轴符号取反就ok了 用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创建透明度动画的StateFloatval alpha by transition.animateFloat(initialValue 0.3f,targetValue 1f,animationSpec infiniteRepeatable(tween(duration),repeatMode RepeatMode.Reverse))//同理创建跳动大小动画的StateFloatval 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
