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

Vue知识点（5）-- 动画

news 来源：原创 2025/8/22 0:43:17

CSS 动画是 Vue3 中实现组件动画效果的高效方式，主要通过 CSS transitions 和 keyframes 动画

CSS Keyframes（关键帧动画）

用来创建复杂的动画序列，可以精确控制动画的各个阶段。

核心语法：

@keyframes animationName {0% { /* 起始状态 */ }50% { /* 中间状态 */ }100% { /* 结束状态 */ }
}.cssClass{animation: name            // 动画名称 (对应 @keyframes 名称)(必需)duration        // 动画持续时间(必需)timing-function // 动画速度曲线delay           // 动画延迟时间iteration-count // 动画播放次数direction       // 动画播放方向fill-mode       // 动画前后如何应用样式play-state;     // 动画运行状态
}

每一个参数都可以单独的修改和使用

  1. animation-name (必需)
    指定要应用的 @keyframes 动画名称
@keyframes example {from { opacity: 0; }to { opacity: 1; }
}.element {animation-name: example;
}
  1. animation-duration (必需)
    定义动画完成一个周期所需时间
.element {animation-duration: 2s; /* 可以是秒(s)或毫秒(ms) */
}
  1. animation-timing-function
    定义动画的速度曲线
    值描述
    ease默认值，慢快慢
    linear匀速
    ease-in慢开始
    ease-out慢结束
    ease-in-out慢开始和结束
    cubic-bezier(n,n,n,n)自定义贝塞尔曲线
    steps(n)分步动画
.element {animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
  1. animation-delay
    定义动画开始前的延迟时间
.element {animation-delay: 1s; /* 1秒后开始动画 */
}
  1. animation-iteration-count
    定义动画播放次数
    值描述
    number具体次数 (如 2, 3.5)
    infinite无限循环
.element {animation-iteration-count: infinite;
}
  1. animation-direction
    定义动画播放方向
    值描述
    normal默认，正向播放
    reverse反向播放
    alternate先正向后反向交替
    alternate-reverse先反向后正向交替
.element {animation-direction: alternate;
}
  1. animation-fill-mode
    定义动画执行前后如何应用样式
    值描述
    none默认，不应用任何样式
    forwards保持最后一帧样式
    backwards应用第一帧样式
    both同时应用 forwards 和 backwards
.element {animation-fill-mode: forwards;
}
  1. animation-play-state
    控制动画的播放状态
    值描述
    running默认，动画运行
    paused动画暂停
.element:hover {animation-play-state: paused;
}

案例实践：

//基于CSS class的动画
<template><div :class="{ shake: disabled }"><button @click="warnDisabled">Click me</button><span v-if="disabled">This feature is disabled!</span></div>
</template><script setup>
import { ref } from 'vue'
const disabled = ref(false)
const warnDisabled = () => {disabled.value = truesetTimeout(() => {disabled.value = false}, 1500)
}
</script><style scoped>
.shake {animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;transform: translate3d(0, 0, 0);
}
@keyframes shake {10%,90% {transform: translate3d(-1px, 0, 0);}20%,80% {transform: translate3d(2px, 0, 0);}30%,50%,70% {transform: translate3d(-4px, 0, 0);}40%,60% {transform: translate3d(4px, 0, 0);}
}
</style>

CSS Transitions（过渡动画）

用于在元素从一种状态转变为另一种状态时添加平滑的过渡效果。

核心语法：

.cssClass{transition: [property]       // 要过渡的CSS属性[duration]       // 过渡持续时间(必需)[timing-function] // 过渡速度曲线[delay];         // 过渡延迟时间
}
  1. transition-property(可选)
    指定应用过渡效果的 CSS 属性名称

常见可过渡属性：
color, background-color
opacity
transform (包括 translate, scale, rotate 等)
width, height
margin, padding
border 相关属性

.element {transition-property: opacity, transform;/* 或者 */transition-property: all; /* 所有可过渡属性 */
}
  1. transition-duration(必需)
    定义过渡效果持续时间
.element {transition-duration: 0.3s; /* 可以是秒(s)或毫秒(ms) */
}
  1. transition-timing-function
    定义过渡效果的速度曲线
    值描述
    ease默认值，慢快慢
    linear匀速
    ease-in慢开始
    ease-out慢结束
    ease-in-out慢开始和结束
    cubic-bezier(n,n,n,n)自定义贝塞尔曲线
    steps(n)分步过渡
.element {transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
  1. transition-delay(可选)
    定义过渡效果开始前的延迟时间
.element {transition-delay: 0.2s; /* 0.2秒后开始过渡 */
}

案例实践：

//状态驱动的动画
<template><div@mousemove="onMousemove":style="{ backgroundColor: `hsl(${x}, 80%, 50%)` }"class="movearea"><p>Move your mouse across this div...</p><p>x: {{ x }}</p></div>
</template><script setup>
import { ref } from 'vue'
const x = ref(0)
const onMousemove = (e) => {x.value = e.clientX
}
</script><style scoped>
.movearea {transition: 0.3s background-color ease;
}
</style>

transform

transform 是 CSS 中用于对元素进行 2D 或 3D 变换的强大属性，它可以改变元素的形状、位置和方向而不影响文档流。

可以组合多个变换函数，空格分隔，从右向左依次执行

transform: rotate(45deg) scale(1.2) translateX(50px);
/* 先平移 → 然后缩放 → 最后旋转 */

2D

  1. 位移（Translate）
transform: translateX(50px);     /* 水平移动 */
transform: translateY(-20px);    /* 垂直移动 */
transform: translate(50px, 20px); /* 同时XY移动 */
  1. 旋转（Rotate）
transform: rotate(45deg);       /* 顺时针旋转45度 */
transform: rotate(-90deg);      /* 逆时针旋转90度 */
  1. 缩放（Scale）
transform: scale(1.5);          /* 均匀放大1.5倍 */
transform: scaleX(0.5);         /* 水平缩小一半 */
transform: scaleY(1.2);         /* 垂直放大1.2倍 */
transform: scale(1.2, 0.8);     /* 水平放大，垂直缩小 */
  1. 倾斜（Skew）
transform: skewX(15deg);        /* 水平倾斜 */
transform: skewY(-10deg);       /* 垂直倾斜 */
transform: skew(15deg, -10deg); /* 同时XY倾斜 */

3D

  1. 3D位移
transform: translateZ(100px);     /* Z轴移动 */
transform: translate3d(50px, 20px, 100px); /* XYZ移动 */
  1. 3D旋转
transform: rotateX(45deg);       /* 绕X轴旋转 */
transform: rotateY(30deg);       /* 绕Y轴旋转 */
transform: rotateZ(15deg);       /* 绕Z轴旋转 */
transform: rotate3d(1, 1, 0, 45deg); /* 自定义轴旋转 */
  1. 3D缩放
transform: scaleZ(1.5);         /* Z轴缩放 */
transform: scale3d(1.2, 1.2, 1.5); /* XYZ缩放 */
  1. 透视（Perspective）
transform: perspective(500px) rotateY(45deg);

指定观察者与 z=0 平面的距离
值越小，透视效果越强（类似广角镜头）
值越大，透视效果越弱（类似长焦镜头）
必须为正数

相关属性

  1. transform-origin
    设置变换的基准点（默认是元素中心）
transform-origin: 50% 50%;     /* 默认值 */
transform-origin: left top;    /* 左上角 */
transform-origin: 20px 30px;   /* 具体坐标 */
transform-origin: bottom right 50px; /* 3D变换时Z轴 */
  1. transform-style
    指定子元素是否保留3D位置
transform-style: flat;         /* 默认，子元素不保留3D位置 */
transform-style: preserve-3d;  /* 子元素保留3D位置 */
  1. perspective
    设置3D变换的视距
perspective: 1000px;          /* 在父元素上设置 */
  1. backface-visibility
    定义元素背面是否可见
backface-visibility: visible;  /* 默认，背面可见 */
backface-visibility: hidden;   /* 背面不可见 */

案例实践：

//3d翻转卡片
<template><div class="flip-container"><div class="flipper"><div class="front">正面</div><div class="back">背面</div></div></div>
</template><style scoped>
.flip-container {perspective: 100px;background: #644a68;
}
.flipper {transition: transform 3s;transform-style: preserve-3d;font-size: 30px;
}
.flip-container:hover .flipper {transform: rotateY(180deg);
}
.front,
.back {backface-visibility: hidden;
}
.back {transform: rotateY(180deg);
}
</style>

相关文章：

Vue知识点（5）-- 动画

CSS 动画是 Vue3 中实现组件动画效果的高效方式&#xff0c;主要通过 CSS transitions 和 keyframes 动画 CSS Keyframes&#xff08;关键帧动画&#xff09; 用来创建复杂的动画序列&#xff0c;可以精确控制动画的各个阶段。 核心语法&#xff1a; keyframes animationNa…...

编程日记 2025/8/22 0:43:17

基于AT89C52单片机的植物浇水与智能空气土壤环境监测报警系统

点击链接获取Keil源码与Project Backups仿真图&#xff1a; https://download.csdn.net/download/qq_64505944/90579535?spm1001.2014.3001.5503 功能介绍&#xff1a; 1、功能&#xff1a;液晶器显示检测到的土壤湿度与空气温度与光照强度&#xff1b;温度和光照大于设置的…...

编程日记 2025/8/22 7:27:55

指针进阶（ 上 ）

内容大纲 一.字符指针 二.指针数组 三.数组指针 四. 数组传参和指针传参 引言 指针是什么呢&#xff1f;指针是用来干什么的呢&#xff1f;指针的大小是多少呢&#xff1f;指针的大小具有什么属性呢&#xff1f; 解答&#xff1a;指针是个变量&#xff0c;用来存放变量地…...

编程日记 2025/8/17 1:57:41

java设计模式-外观模式

外观模式(facade) 基本介绍 1、外观模式也叫过程模式,外观模式为子系统中的一组接口提供一个一致的界面&#xff0c;次模式定义一个高层接口&#xff0c;这个接口是的这一子系统更加容易使用。 2、外观模式通过定义一个一直的接口&#xff0c;用以屏蔽内部子系统的细节&#x…...

编程日记 2025/8/22 10:09:32

selenium元素获取

from selenium import webdriver from selenium.webdriver.common.by import Bydriver webdriver.Chrome()driver.maximize_window()#最大化窗口 #隐式等待 driver.implicitly_wait(10)#打开网页 driver.get("https://www.zhipin.com/beijing/?kacity-sites-101010100&q…...

编程日记 2025/8/22 12:35:35

23种设计模式-行为型模式-访问者

文章目录 简介场景解决完整代码核心实现 总结 简介 访问者是一种行为设计模式&#xff0c;它能把算法跟他所作用的对象隔离开来。 场景 假如你的团队开发了一款能够使用图像里地理信息的应用程序。图像中的每个节点既能代表复杂实体&#xff08;例如一座城市&#xff09;&am…...

编程日记 2025/8/20 21:28:07

springMVC-拦截器详解

拦截器 概述 SpringMVC的处理器拦截器类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理。开发者可以自己定义一些拦截器来实现特定的功能。 过滤器与拦截器的区别&#xff1a;拦截器是AOP思想的具体应用。 过滤器 servlet规范中的一部分&#xff0c;任何ja…...

编程日记 2025/8/22 11:46:41

centos练习docker＜基础＞

这半喇月发生了很多事&#xff0c;很无谓很闹心&#xff0c;今天重拾起自己&#xff0c;做做功课写写字 文章目录 一、准备二、实践2.1 安装docker2.2docker镜像操作2.2.1 下载镜像等基本操作2.2.2 启动容器等基本操作2.2.3 修改页面2.2.4 保存镜像2.2.5 分享社区 总结 一、准…...

编程日记 2025/8/22 11:58:10

GPT-5、o3和o4-mini即将到来

原计划有所变更： 关于我们应有何期待的一些零散想法。 深度研究（Deep Research）确实强大但成本高昂且速度较慢（当前使用o3模型）。即将推出的o4-mini在性能上可能与o3相近，但将突破这些限制，让全球用户——甚至免费用户（尽管会有速率限制）——都能用上世界顶级AI研究助…...

编程日记 2025/8/21 6:01:12

EchoMimic 音频驱动照片生成视频部署测试

环境&#xff1a;Windows 11 NVIDIA RTX 3070 Laptop 16GB 我配置了阿里云的镜像&#xff0c;要实现一样的效果&#xff0c;你也可以在每一行的命令后加 -i https://mirrors.aliyun.com/pypi/simple/ 如&#xff1a; pip install package_name -i https://mirrors.aliyun.…...

编程日记 2025/8/22 5:57:56

React 和 JSX 中，这些符号 (=＞, ＜, ? :)的用法

在 React 和 JSX 中&#xff0c;这些符号 (>, <, ? :) 都是 JavaScript 的语法特性&#xff0c;但它们在 JSX 中有特殊的用法和规则。下面我会详细解释每个符号的用途、语法规则以及在 React/JSX 中的具体应用。 1. 箭头函数 > (Arrow Function) 基本语法&#xff1…...

编程日记 2025/8/21 16:19:43

mindie1.0新特性及调试问题总结

说明 最近在ascend 310P3上使用mindie 1.0部署模型&#xff0c;跟我以前使用的mindie 1.0_rc2比&#xff0c;有很多新的特性和变化&#xff0c;导致部署出现了不少问题。这里罗列下我的发现&#xff0c;希望对其他人有用。 特性1&#xff1a;需要显式配置share_memory 报错信…...

编程日记 2025/8/22 12:33:54

【Axure原型案例】悦购APP产品原型设计

一、项目背景 在时尚潮流蓬勃发展的当下&#xff0c;潮流服装市场潜力巨大。悦购APP作为一款专注于潮流服装的商城APP&#xff0c;旨在为用户提供丰富多样的潮流服装选择&#xff0c;打造便捷、时尚的购物体验。本次使用Axure进行产品原型设计&#xff0c;旨在将产品理念和功能…...

编程日记 2025/8/22 7:11:28

React 列表渲染

你可能经常需要通过 JavaScript 的数组方法 来操作数组中的数据&#xff0c;从而将一个数据集渲染成多个相似的组件。在这篇文章中&#xff0c;你将学会如何在 React 中使用 filter() 筛选需要渲染的组件和使用 map() 把数组转换成组件数组。 1.如何通过 JavaScript 的 map() 方…...

编程日记 2025/8/22 12:33:53

《深度解析LightGBM与MySQL数据集成：高效机器学习的新范式》

在机器学习工程实践中&#xff0c;数据与模型的高效交互一直是制约算法性能发挥的关键瓶颈。LightGBM作为梯度提升决策树框架的杰出代表&#xff0c;其与关系型数据库MySQL的深度集成能力&#xff0c;为数据科学家提供了从原始数据到预测结果的完整解决方案。这种集成不是简单的…...

编程日记 2025/8/21 21:19:37

使用 node.js 和 MongoDB 编写一个简单的增删改接口 demo

文章目录 前言一、环境准备二、项目结构三、环境变量四、连接数据库3.1. connect.js 文件 五、定义数据模型5.1. BannerModel.js 文件 六、实现 server 接口6.1. server.js 文件 七、服务文件7.1. app.js 文件 八、感谢 前言 Mongoose 是一个在 Node.js 环境中操作 MongoDB 数据…...

编程日记 2025/8/22 8:37:40

React-06React中refs属性（字符串refs,回调形式，React.createRef() ）

1.React中refs属性 绑定到render输出的任何组件上&#xff0c;通过this.ref.绑定名直接操作DOM元素或获取子组件的实例。 2.绑定refs实例 2.1 字符串refs(已经过时参考官网API) 字符串(string)的ref存在一定的效率问题 <input refinput1 type"text" placehole…...

编程日记 2025/8/22 12:35:20

如何在 Windows 系统上安装 n8n：两种方法详解

如何在 Windows 系统上安装 n8n&#xff1a;两种方法详解 摘要 本文详细介绍了在 Windows 系统上安装 n8n 的两种方法&#xff1a;直接安装和 Docker 部署。直接安装适合初学者&#xff0c;通过 Node.js 和 npm 快速完成&#xff1b;Docker 部署适合需要更高灵活性和可移植性…...

编程日记 2025/8/21 15:52:58

LETTERS（信息学奥赛一本通-1212）

【题目描述】 给出一个rowcol的大写字母矩阵&#xff0c;一开始的位置为左上角&#xff0c;你可以向上下左右四个方向移动&#xff0c;并且不能移向曾经经过的字母。问最多可以经过几个字母。 【输入】 第一行&#xff0c;输入字母矩阵行数R和列数S&#xff0c;1≤R,S≤20。 接…...

编程日记 2025/8/22 12:35:19

【kind管理脚本-3】脚本函数说明文档 —— 便捷使用 kind 创建、删除、管理集群脚本

下面是一份详细的说明文档&#xff0c;介绍该脚本的功能、用法及各部分的含义&#xff0c;供您参考和使用&#xff1a; Kind 集群管理脚本说明文档 此脚本主要用于管理 Kind&#xff08;Kubernetes IN Docker&#xff09;集群&#xff0c;提供创建、删除、导出 kubeconfig、加…...

编程日记 2025/8/22 12:35:35

【kind管理脚本-1】便捷使用 kind 创建、删除、管理集群脚本

目录结构 . ├── cluster-demo-setting │ ├── 3node-demo.yaml │ └── ingress-cluster-demo.yaml └── kind-tool.sh简单使用 # 进入防止 kind-tool.sh 的目录 $ cd kt-dir/ # 用 alias 给个别名&#xff0c;更便于使用 $ alias kt"./kind-tool.sh"…...

编程日记 2025/8/22 3:01:53

Python-Django+vue仓库管理系统功能说明

❥(^_-) 上千个精美定制模板，各类成品Java、Python、PHP、Android毕设项目，欢迎咨询。 ❥(^_-) 程序开发、技术解答、代码讲解、文档，💖文末获取源码+数据库+文档💖 💖软件下载 | 实战案例 💖文章底部二维码，可以联系获取软件下载链接，及项目演示视频。 本项目…...

编程日记 2025/8/21 20:10:44

蓝桥备赛指南（14）：树的直径与重心

树的直径 什么是树的直径&#xff1f;树的直径是树上最长的一条链&#xff0c;当然这条链并不唯一&#xff0c;所以一棵树可能有多条直径。直径由两个顶点u、v来决定&#xff0c;若由一条直径&#xff08;u,v)&#xff0c;则满足一下性质&#xff1a; 1&#xff09;u、v的度数…...

编程日记 2025/8/22 8:55:24

Java RPC 框架是什么

Java RPC 框架是什么 Java RPC 框架 是用于在分布式系统中实现远程过程调用&#xff08;Remote Procedure Call&#xff0c;RPC&#xff09;的工具集。RPC 是一种通信协议&#xff0c;它允许程序调用位于远程服务器上的函数或方法&#xff0c;就像调用本地函数一样透明。RPC 框…...

编程日记 2025/8/21 11:26:33

MySQL 查询重写怎样把复杂查询变简单，让查询提高一个“速”！

目录 一MySQL 查询重写基础概念 什么是查询重写 为什么需要查询重写 二MySQL 查询重写的工作原理 查询解析阶段 重写规则应用阶段 生成执行计划阶段 查询重写流程图 三MySQL 查询重写的实现方式 使用 MySQL 内置的查询优化器 自定义查询重写插件 查询重写介绍图 四…...

编程日记 2025/8/19 7:15:57

HTML静态网页成品作业(HTML+CSS)——阜阳剪纸介绍设计制作(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有1个页面。 二、作品演示 三、代…...

编程日记 2025/8/21 1:37:45

Docker Swarm集群搭建与管理全攻略

文章目录 一、节点准备二、初始化 manager 节点三、管理 swarm 集群中的 worker 节点1、添加 worker 节点2、查看 worker 节点3、删除 worker 节点 四、管理 swarm 集群服务1、创建服务2、查看服务3、删除服务 五、管理 swarm 节点服务1、节点标签管理2、创建服务3、查看服务4、…...

编程日记 2025/8/22 2:36:20

kafka消费延迟

一、背景 PAAS1220 CRM系统 系统版本: BC Linux For Euler release 21.10 二、故障现象 grafana上kafka指标&#xff1a;指标消费延迟过高 容器内部kafka消费情况&#xff1a;没有消费者进行消费 查看webgate页面&#xff1a;应用性能--信息总览&#xff0c;查看到实例全…...

编程日记 2025/8/21 6:20:13

Java学习笔记（多线程）：ReentrantLock 源码分析

本文是自己的学习笔记&#xff0c;主要参考资料如下 JavaSE文档 1、AQS 概述1.1、锁的原理1.2、任务队列1.2.1、结点的状态变化 1.3、加锁和解锁的简单流程 2、ReentrantLock2.1、加锁源码分析2.1.1、tryAcquire()的具体实现2.1.2、acquirQueued()的具体实现2.1.3、tryLock的具…...

编程日记 2025/8/22 7:52:21

计算机视觉算法实战——实例分割算法深度解析

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​​​ ​​​​​​​​​ ​​ 一、实例分割领域概述 实例分割(Instance Segmentation)是计算机视觉领域中的一个重要任务&#xff0c;它…...

编程日记 2025/8/21 1:38:34

ARM分拣机vs传统PLC：实测数据揭示的4倍效率差

在苏州某新能源汽车零部件仓库&#xff0c;凌晨3点的分拣线上依然灯火通明。8台搭载ARM Cortex-A72处理器的智能分拣机正在以每秒3件的速度处理着形状各异的电池包组件&#xff0c;它们通过MES系统接收订单信息&#xff0c;自主规划最优路径&#xff0c;将不同规格的零部件精准…...

编程日记 2025/8/22 1:29:31

IDEA 中遇到 Git Log 界面不显示问题的解决方案

IntelliJ IDEA 中遇到 Git Log 界面不显示问题的解决方案。以下是根据文章内容整理的解决步骤&#xff1a; (我清理 IDEA 缓存后成功解决&#xff09; 问题描述 在 IntelliJ IDEA 中&#xff0c;Git 的 Log 界面没有任何显示。其他选项和界面工作正常。使用命令行查询 Git 日…...

编程日记 2025/8/21 4:47:21

虚幻引擎UActorComponent的TickComponent详解

文章目录 前言一、TickComponent 的作用二、函数签名与参数三、 使用步骤1.启用 Tick2. 重写 TickComponent 四、实际示例&#xff1a;旋转组件4.1 头文件 URotatingComponent.h4.2 源文件 URotatingComponent.cpp4.3 使用组件 五、注意事项六、常见问题总结 前言 在虚幻引擎&…...

编程日记 2025/8/21 21:48:56

如何迁移 GitHub 仓库到 GitLab？

如何迁移 GitHub 仓库到 GitLab&#xff1f; 一、基础迁移方法&#xff08;保留完整历史&#xff09; 1.‌在 GitLab 创建空仓库 1.登录 GitLab 并新建项目&#xff0c;选择「空白项目」&#xff0c;‌不要初始化 README 或 LICENSE 文件 2.复制新建仓库的 HTTPS/SSH 地址&a…...

编程日记 2025/8/21 16:14:20

深入理解C++面向对象特性之一 多态

欢迎来到干货小仓库&#xff0c;堪比沙漠!!! 从“Hello World”到改变世界&#xff0c;中间隔着千万次再试一次. 1.多态的概念 多态的概念&#xff1a;通俗来说&#xff0c;就是多种形态&#xff0c; 具体点就是去完成某个行为&#xff0c;当不同的对象去完成时会 产生出不同的…...

编程日记 2025/8/20 21:20:24

linux下MMC_TEST的使用

一：打开如下配置，将相关文件编译到内核里： CONFIG_MMC_TEST CONFIG_MMC_DEBUG CONFIG_DEBUG_FS二：将mmc设备和mmc_test驱动进行绑定 2.1查看mmc设备编号 ls /sys/bus/mmc/drivers/mmcblk/mmc0:aaaa2.2将mmc设备与原先驱动进行解绑 echo mmc0:aaaa >...

编程日记 2025/8/21 21:39:41

数字人技术的核心：AI与动作捕捉的双引擎驱动（2/10）

摘要&#xff1a;数字人技术从静态建模迈向动态交互&#xff0c;AI与动作捕捉技术的深度融合推动其智能化发展。尽管面临表情僵硬、动作脱节、交互机械等技术瓶颈&#xff0c;但通过多模态融合技术、轻量化动捕方案等创新&#xff0c;数字人正逐步实现自然交互与情感表达。未来…...

编程日记 2025/8/21 16:05:56

Java Web从入门到精通：全面探索与实战（二）

Java Web从入门到精通&#xff1a;全面探索与实战&#xff08;一&#xff09;-CSDN博客 目录 四、Java Web 开发中的数据库操作&#xff1a;以 MySQL 为例 4.1 MySQL 数据库基础操作 4.2 JDBC 技术深度解析 4.3 数据库连接池的应用​ 五、Java Web 中的会话技术&#xff…...

编程日记 2025/8/22 1:26:08

从个人博客到电商中台：EdgeOne Pages的MCP Server弹性架构×DeepSeek多场景模板实测报告

什么是EdgeOne Pages&#xff1f; EdgeOne Pages 是腾讯云推出的一站式边缘开发与部署平台&#xff0c;基于全球边缘节点网络和 Serverless 架构&#xff0c;为开发者提供从代码托管到全球分发的全流程服务。其核心价值在于将边缘计算能力与现代 Web 开发范式深度融合&#xf…...

编程日记 2025/8/21 8:19:33

【C++】优先级队列+反向迭代器

priority_queue的介绍 通常用堆来实现&#xff0c;能在O(log n)的时间复杂度内插入和提取最高&#xff08;或最低&#xff09;优先级的元素。 优先队列是一种容器适配器&#xff0c;根据严格的弱排序标准&#xff0c;它的第一个元素总是它所包含的元素中最大的(默认情况)。此…...

编程日记 2025/8/19 20:48:34

HOW - 缓存 React 自定义 hook 的所有返回值（包括函数）

目录 场景优化方案示例延伸例子&#xff1a;为什么这很重要&#xff1f;常见的请求 hook 封装优化前优化后优化点一览优化后的 useLoadData使用方式示例&#xff1a;优点回顾 场景 如果你写了一个自定义 Hook&#xff0c;比如 useMyHook()&#xff0c;它暴露出某些值或函数给外…...

编程日记 2025/8/21 5:52:11

AIDD-人工智能药物设计-网络药理学-多组学与网络药理学分析揭示龟龄集治疗少精症的机制

IF6.7|多组学与网络药理学分析揭示龟龄集治疗少精症的机制 2024年10月28日&#xff0c;海军军医大学张卫东教授团队在Phytomedicine&#xff08;IF6.7&#xff09;上发表了题为“Multi-omics and network pharmacology approaches reveal Gui-Ling-Ji alleviates oligoastheno…...

编程日记 2025/8/21 16:36:49

打破单一视角！融合红外和可见光，YOLO算法实现全天候无人机检测

目录 一、摘要 二、系统概述 三、数据集 视频记录 数据集标注 四、数据集分析 五、基于深度学习的无人机探测 基于规则的跟踪方法 六、结论 论文题目&#xff1a;Drone Detection and Tracking with YOLO and a Rule-based Method 论文链接&#xff1a;https://arxiv.…...

编程日记 2025/8/21 10:10:34

Go 语言数据类型

Go 语言数据类型 概述 Go 语言（也称为 Golang）是一种静态强类型、编译型、并发型、具有垃圾回收功能的编程语言。自2009年发布以来，Go 语言因其简洁的语法、高效的执行速度和强大的并发处理能力而广受欢迎。本文将详细介绍 Go 语言中的数据类型，帮助读者更好地理解和掌握…...

编程日记 2025/8/19 21:43:40

＜tauri＞＜rust＞＜GUI＞基于rust和tauri，将tauri程序打包为window系统可安装的安装包（exe、msi）

前言 本文是基于rust和tauri，由于tauri是前、后端结合的GUI框架，既可以直接生成包含前端代码的文件，也可以在已有的前端项目上集成tauri框架，将前端页面化为桌面GUI。 发文平台 CSDN 环境配置 系统：windows 10平台：visual studio code语言：rust、javascript库：taur…...

编程日记 2025/8/21 9:19:34

ragflow开启https访问:ssl证书为pem文件,window如何添加证书

在 Windows 系统中安装 PEM 格式的证书（通常用于 SSL/TLS 或客户端认证）可以通过以下步骤完成： 方法 1：通过证书管理器（MMC）安装 打开证书管理器 按 Win + R，输入 mmc 回车。点击菜单栏的 文件 > 添加/删除管理单元。选择 证书 > 添加，然后选择 计算机账户 或 当…...

编程日记 2025/8/20 20:23:19

自己搭建cesium应用程序

Cesium项目开发基础(1)——Cesium环境搭建_cesium版本怎么看-CSDN博客 看这篇的时候&#xff1a; 所以要用IIS搭建网站。下载一些东西看这篇的这部分&#xff1a;Tomcat IIS 在局域网中搭建网站&#xff08;最全最详细教程&#xff09;_tomcat iis-CSDN博客 然后在IIS里怎么…...

编程日记 2025/8/20 22:32:24

本地项目HTTPS访问问题解决方案

本地项目无法通过 HTTPS 访问的原因通常是默认配置未启用 HTTPS 或缺少有效的 SSL 证书。以下是详细解释和解决方案&#xff1a; 原因分析 默认开发服务器仅支持 HTTP 大多数本地开发工具&#xff08;如 Vite、Webpack、React 等&#xff09;默认启动的是 HTTP 服务器&#xff…...

编程日记 2025/8/21 7:59:58

软考系统架构设计师之物联网与边缘计算笔记

一、物联网与边缘计算的核心概念 1. 物联网&#xff08;IoT&#xff09; 定义&#xff1a;通过传感器、设备等物理对象接入网络&#xff0c;实现数据采集、传输与智能控制&#xff0c;核心在于物联设备互联与数据驱动决策。架构分层&#xff1a; 感知层&#xff1a;传感器、R…...

编程日记 2025/8/21 15:37:40

已知Word内容格式固定，通过宏实现Word转Excel

文章目录 需求描述一、宏是什么&#xff1f;二、使用步骤1.启用开发工具2.VBA基础知识3.单个Word文件转为Excel4.批量将Word文件转为Excel文件 总结 需求描述 现在有多个Word文档&#xff0c;Word文档格式固定&#xff0c;假如Word内容分为单选题和多选题&#xff0c;每个题目…...

编程日记 2025/8/17 19:15:54