赤蓝紫

patatap 动效 moon 分析前言刷到一个很 🐂 的网站patatap，好奇它的实现原理，看了下源码，记录一下分析结果。用到的库two.js：二维绘图tween.js：补间引擎核心就是利用 two.js 绘制图形，然后利用 tw

2024-03-18 前端

动画 patatap

利用 MutationObserver 实现 react-fast-marquee 溢出滚动效果前言在公司的项目需求中，需要公告栏内容小于指定宽度时，不能滚动，溢出时才显示滚动效果。然后使用react-fast-marquee时，发现通过

2024-03-01 前端

JavaScript

fluentffmpeg 实现音频的“无损”转换前言使用 ffmpeg 可以实现音频的格式转换，但是参数默认是 ffmpeg 自动设置的。所以会出现问题。比如通过ffmpeg -i x.flac y.mp3将实现格式转换。首先，从大小上

2024-03-01 小技能

ffmpeg Node.js

nodejs 使用 Worker、Web Worker 使用前言之前用 ffmpeg 跟 worker 实现批量合成视频时就有用到 worker 来实现，最近弄一个批量转音频格式又用到了 ffmpeg。然后发现不用 worker 根本行不

2024-02-29 node.js

使用 node-id3 对 mp3 进行标签写入前言使用起来很简单，具体可以查看官方的README。这篇文章主要记录一下使用node-id3对 mp3 进行标签写入，包括图片插入。 $\color{red}{在网上看到，对 mp3 进

2024-02-23 小技能

Node.js

简单探析 canvas-nest流程绘制流程：遍历每一个非鼠标点，绘制点。在遍历到每个点的时候，并且从下一个点（包括鼠标点）开始遍历，判断其他点有没有在当前点的吸附区域内。如果在，需要画线。当前点之前的不需要遍历是因为，当前点是否

2024-02-19 前端

动画

简单探析rellax核心视差公式 1(posY - blockTop + screenY) / (blockHeight + screenY) 如上图所示，视差公式有两个边界值1和0，当值在0到1之间时，代表元素在视口中（可能只是又一

2024-02-18 前端

动画

工作的一些问题记录（一）TypeScripttsconfig.js 配置路径别名12345678910{ "compilerOptions": { "module": "Node16", "moduleResolution":

2023-12-30 前端

git docusaurus

matterjs 实现弹珠台webpack 构建12345678910111213141516171819202122232425<!DOCTYPE html><html lang="en"> <head&g

2023-12-21 前端

动画

i18next、react-i18next实现国际化简单使用i18n.js 1234567891011121314151617181920212223242526272829303132333435363738394041import i1

2023-10-11 前端

i18next 国际化

利用 H5 实现自动选择二倍图、三倍图前言为了更明显地看出效果，三种情况下的图片用不一样的图片来搞。 picture + -webkit-min-device-pixel-ratio用picture标签来提供source和img。并在

2023-10-09 前端

HTML5

创建项目npx create-react-app react-standard-f –template typescript 1. prettier yarn add prettier –dev .prettierrc 123456789

2023-10-03 前端

规范