当前位置: 首页 > news >正文

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

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

  • 前言
  • 涉及知识点
  • 实现思路
  • 实现过程
    • 绘制爱心
    • 创建动画效果
    • Preview预览效果
  • 完整源码
  • 彩蛋

前言

前一阵子看电视里的学霸用代码写了个炫酷的爱心,网上有很多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' 

相关文章:

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

情人节用Compose给女神写个爱心动画APP前言涉及知识点实现思路实现过程绘制爱心创建动画效果Preview预览效果完整源码彩蛋前言 前一阵子看电视里的学霸用代码写了个炫酷的爱心&#xff0c;网上有很多js和python的源码&#xff0c;复制粘贴就能拥有&#xff0c;但是Android的好…...

GUI swing和awt

GUI&#xff08;Graphical User Interface&#xff0c;简称 GUI&#xff0c;图形用户界面&#xff09;是指采用图形方式显示的计算机操作用户界面&#xff0c;与早期计算机使用的命令行界面相比&#xff0c;图形界面对于用户来说在视觉上更易于接受。Java GUI主要有两个核心库&…...

速通Spring

尚硅谷2023最新版Spring6课程_bilibili 1 Spring 【强制】Spring是什么&#xff1f; 1) Spring是一款主流的Java EE轻量级开源框架。 轻量级&#xff1a;体积很小&#xff0c;且不需要依赖于其他组件。 2) 狭义的Spring。 Spring Framework。 3) 广义的Spring。 以Spring F…...

【C++】C++入门

一、 C关键字&#xff08;C98&#xff09; C有63个关键字&#xff08;C语言有32个&#xff09;&#xff0c;如下&#xff1a; asmdoifreturntrycontinueautodoubleinlineshorttypedefforbooldynamic_castintsignedtypeidpublicbreakelselongsizeoftypenamethrowcaseenummutabl…...

Linux网络技术学习(五)—— 网络设备初始化(I)

文章目录什么时候进行的设备初始化&#xff1f;设备注册和初始化NIC&#xff08;网卡 Network Interface Card&#xff09;初始化的基本目标设备与内核之间的交互硬件中断中断类型传送节流方式为了改善效率中断共享IRQ处理函数映射的组织irqaction结构体存储方式什么时候进行的…...

[技术选型] ClickHouse和StarRocks的介绍

文章目录1.ClickHouse介绍2.StarRocks介绍1.ClickHouse介绍 ClickHouse是面向联机分析处理&#xff08;OLAP&#xff09;的开源分析引擎。最初由俄罗斯第一搜索引擎Yandex开发&#xff0c;于2016年开源&#xff0c;开发语言为C。由于其优良的查询性能&#xff0c;PB级的数据规…...

算法刷题打卡第90天:表现良好的最长时间段

表现良好的最长时间段 难度&#xff1a;中等 给你一份工作时间表 hours&#xff0c;上面记录着某一位员工每天的工作小时数。 我们认为当员工一天中的工作小时数大于 8 小时的时候&#xff0c;那么这一天就是「劳累的一天」。 所谓「表现良好的时间段」&#xff0c;意味在这…...

Python语言零基础入门教程(十七)

Python 文件I/O 本章只讲述所有基本的 I/O 函数&#xff0c;更多函数请参考Python标准文档。 #### 打印到屏幕 最简单的输出方法是用print语句&#xff0c;你可以给它传递零个或多个用逗号隔开的表达式。此函数把你传递的表达式转换成一个字符串表达式&#xff0c;并将结果写…...

C语言中大小端问题

目录 一、什么是大小端 二、 举个例子 三、大小端演示 四、解释"二"中举例的问题 ​五、怎么判断是大端还是小端 六、一个题目 一、什么是大小端 大端模式&#xff08;大端字节序存储&#xff09;&#xff1a;就是高位字节数据存放在内存的低地址端&#xff…...

vue2+微前端qiankun从搭建到部署的实践(主子应用切换;集成vue3+vite3子应用)

一、最终效果 二、微前端&#xff08;qiankun&#xff09;介绍及为什么选择用微前端&#xff0c;可以看官网 三、目录结构如下 四、具体配置 一、主应用配置 1、主应用技术栈 Vue-cli4搭建项目Vue2Element-Uiqiankun&#xff1b;Vue2Element-Uiqiankun 2、搭建好主项目&…...

怎么代理微信小程序创业?

随着微信的兴起&#xff0c;小程序已经成为了人们生活中不可或缺的一部分。如果你想要创业的话&#xff0c;那么代理微信小程序是一个不错的选择。本文将为大家介绍怎么代理微信小程序创业。 一、什么是微信小程序 微信小程序是一款专为移动设备使用者而设计的应用。它通过扫…...

今天是情人节呐,我利用Python制作了好多表白的东西,快来吧~

今天是情人节那&#xff0c;有没有现在没有对象的宝子&#xff0c;评论里扣个111哈哈 目录 玫瑰 爱心树 丘比特 多彩气球 阿玥的小课堂 一、情人节的由来 二、情人节的来历和意义 玫瑰 局部代码实现如下&#xff1a; # 花瓣1 turtle.left(150) turtle.circle(-90, 70) …...

【Linux】-- 进程信号(处理、内核)

上篇&#xff1a;【Linux】-- 进程信号&#xff08;认识、应用&#xff09;_川入的博客-CSDN博客 目录 信号其他相关常见概念 pending handler block 信号处理的过程 sigset_t sigset_t使用 系统接口 sigpending sigprocmask 捕捉方法 sigaction struct sigactio …...

C/【静态通讯录】

&#x1f331;博客主页&#xff1a;大寄一场. &#x1f331;系列专栏&#xff1a;C语言学习笔记 &#x1f618;博客制作不易欢迎各位&#x1f44d;点赞⭐收藏➕关注 前言 往期回顾&#xff1a; C/扫雷 C/N子棋 通讯录作为通讯录地址的书本&#xff0c;当今的通讯录可以涵盖多项…...

万卷书 - 让孩子对自己负责 [The Self-Driven Child]

让孩子对自己负责 The Self-Driven Child - 让你的孩子更加科学合理的掌控自己的生活 简介 《The Self-Driven Child》(2018)解释了我们对孩子的习惯性控制欲,它导致了孩子压力过大、难以合作,以及主观能动性差。本书不提倡这种做法,而是认为我们应该帮助孩子自己做出合适…...

Postman中cookie的操作

在接口测试中&#xff0c;某些接口的调用&#xff0c;需要带入已有Cookie&#xff0c;比如有些接口需要登陆后才能访问。 Postman接口请求使用Cookie有如下两种方式&#xff1a; 1、直接在头域中添加Cookie头域&#xff0c;适用于已经知道请求所用Cookie数据的情况。 2、使用…...

torch.grid_sample

参考&#xff1a; 双线性插值的理论Pytorch grid_sample解析PyTorch中grid_sample的使用方法pytorch中的grid_sample()使用 查阅官方文档&#xff0c;TORCH.NN.FUNCTIONAL.GRID_SAMPLE grid_sample的函数签名如下所示&#xff0c;torch.nn.functional.grid_sample(input, gr…...

前端基于 Docker 的 SSR 持续开发集成环境实践

项目收益 整体开发效率提升20%。加快首屏渲染速度&#xff0c;减少白屏时间&#xff0c;弱网环境下页面打开速度提升40%。 权衡 在选择使用SSR之前&#xff0c;需要考虑以下事项&#xff01; SSR需要可以运行Node.js的服务器&#xff0c;学习成本相对较高。对于服务器而言&a…...

ARM交叉编译入门及交叉编译第三方库常见问题解析

1. 交叉编译是什么&#xff1f; 交叉编译简单说来&#xff0c;就是编译成果物的地儿不是你运行这个成果物的地儿。最常见的场景&#xff0c;就是我们要编译一个 ARM版本 的可执行程序&#xff0c;但我们编译这个 ARM版本 可执行程序的地方&#xff0c;是在一个 x86_x64 的平台…...

Ruby Web Service 应用 - SOAP4R

什么是 SOAP&#xff1f; 简单对象访问协议(SOAP,全写为Simple Object Access Protocol)是交换数据的一种协议规范。 SOAP 是一种简单的基于 XML 的协议&#xff0c;它使应用程序通过 HTTP 来交换信息。 简单对象访问协议是交换数据的一种协议规范&#xff0c;是一种轻量的、…...

ES6从入门到精通:前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素&#xff0c;返回一个新的数组。 特点&#xff1a; 不修改原数组&#xff1a;slice 不会改变原数组&#xff0c;而是返回一个新的数组。提取数组的部分&#xff1a;slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...

GraphQL 实战篇:Apollo Client 配置与缓存

GraphQL 实战篇&#xff1a;Apollo Client 配置与缓存 上一篇&#xff1a;GraphQL 入门篇&#xff1a;基础查询语法 依旧和上一篇的笔记一样&#xff0c;主实操&#xff0c;没啥过多的细节讲解&#xff0c;代码具体在&#xff1a; https://github.com/GoldenaArcher/graphql…...

Linux安全加固:从攻防视角构建系统免疫

Linux安全加固:从攻防视角构建系统免疫 构建坚不可摧的数字堡垒 引言:攻防对抗的新纪元 在日益复杂的网络威胁环境中,Linux系统安全已从被动防御转向主动免疫。2023年全球网络安全报告显示,高级持续性威胁(APT)攻击同比增长65%,平均入侵停留时间缩短至48小时。本章将从…...

JDK 17 序列化是怎么回事

如何序列化&#xff1f;其实很简单&#xff0c;就是根据每个类型&#xff0c;用工厂类调用。逐个完成。 没什么漂亮的代码&#xff0c;只有有效、稳定的代码。 代码中调用toJson toJson 代码 mapper.writeValueAsString ObjectMapper DefaultSerializerProvider 一堆实…...