❌

阅读视图

发现新文章，点击刷新页面。

写给年轻程序员的几点小建议

✇掘金 前端
程序员大卫

本人快 40 岁了。第一份工作是做网站编辑，那时候开始接触 jQuery，后来转做前端，一直做到现在。说实话，我对写程序谈不上特别热爱，所以技术水平一般。

年轻的时候如果做得不开心，就会直接裸辞。不过每次裸辞的那段时间，我都会拼命学习，这对我的成长帮助其实很大。

下面给年轻人几点个人建议，供参考：

  • 不要被网上“35 岁就失业”的说法吓到。很多人是在贩卖焦虑。我都快 40 了还能拿到 offer，只是这些 offer 薪资不到 30K。
  • 基础真的很重要。我靠着基础吃香了十几年，在公司里也解决过不少疑难问题。就算现在有 AI，你也要有能力判断它写得对不对，还要知道如何向 AI 提问。
  • 适不适合做程序员，其实几年之后就能看出来：你能不能当上 Leader，或者至少能不能独当一面。如果你觉得自己确实不太适合，可以趁早考虑转行，或者下班后发展一些副业。大千世界，行行出状元，能赚钱的行业很多，不必只盯着程序员这一条路。
  • 如果你觉得自己资质一般，但又真的喜欢写程序，那也没关系。《刻意练习》里提到，一个人能不能成为行业顶尖，关键在于后天练习的方式，而不是天赋本身。
  • 程序员做到后面，最大的挑战其实是身体机能，而不是技术。一定要多锻炼身体。在还没有小孩之前，尽量把自己的技术水平拉到一个相对高的位置。结婚有家庭之后，学习时间会明显减少，而且年龄增长、抗压能力下降，而程序员本身又是高度用脑的职业。如果你的技术储备够高，就能在一定程度上缓冲项目压力，让自己工作更从容。
  • React、Vue、Angular 等框架都可以尝试做做项目。不同框架背后的设计思路，对思维成长很有帮助。前端很多理念本身就借鉴了后端的逻辑，多接触不同体系，会让你看问题更立体。
  • 可以在 GitHub 上做一些开源小项目。素材从哪里来？其实就来自你在公司做过的项目。把其中一块通用能力抽出来，沉淀成一个独立组件或工具库，再整理发布到 GitHub。与此同时，多写一些技术文章进行总结和输出。等到找工作时，简历里可以写上类似“全网阅读量几万+”这样的成果展示，这些都会成为你的加分项，让你在竞争中更有优势。
  • 35 岁以上，竞争力通常体现在两个方向：要么技术水平足够强，能够解决复杂问题；要么具备一定的管理能力，能够带团队。有人说那我以前就带过一两个徒弟，怎么办，那你得学会包装，哈哈。
  • 35岁以上，面试对技术广度要求更高，所以不要太深入挖掘某一项技术了。
  • 打工人比较麻烦的事就是简历太 "花"。频繁跳槽，在一个公司没干几个月就走，或者长期待业太久。如果岗位需要背调，简历造假会很麻烦，虽然有些小公司或外包公司不做背调。所以这方面自己要想想办法，你懂得。
  • 另外要认清一个现实：单纯打工，很难真正发财。这件事越早想明白越好。多读一些关于认知、资产配置的书，弄清楚什么是资产，什么是消费。哪怕这些认知在你有生之年未必能带来巨大财富，也可以传递给下一代，让他们少走弯路。

以上只是个人经历和感受，不一定适用于所有人，但希望能给年轻的你一些参考。

字节全家桶 Seed 2.0 + TRAE 玩转 Skill

✇阮一峰的网络日志
阮一峰

一、引言

国产大模型之中，字节是一个异类。

不像其他大模型轰轰烈烈、争夺眼球，它更低调，不引人注目。

但是，它做的事情反倒最多，大模型、Agent、开发工具、云服务都有独立品牌，遍地开花，一个都不缺，都在高速推进。

Seed 是字节的大模型团队，底下有好几条产品线，最近热得发烫的视频模型 Seedance 2.0 就是他们的产品。

今天，我就用字节的全家桶 ---- 刚刚发布的 Seed 2.0 模型和开发工具 TRAE ---- 写一篇 Skill 教程。

大家会看到，它们组合起来既强大，又简单好用，（个人用户）还免费。这也是我想写的原因，让大家知道有这个方案。

只要十分钟，读完这篇教程，你还会明白 Skill 是什么，怎么用，以及为什么一定要用它。

二、Seed 2.0 简介

先介绍 Seed 2.0，它是 Seed 家族的基座模型。

所谓"基座模型"（foundation model），就是一种通用大模型，可用来构建其他各种下游模型。最大的两个特征有两个：一个是规模大，另一个是泛化能力强，这样才方便构建别的模型。

大家熟知的豆包，就是基于 Seed 模型，它也被称为"豆包大模型"。这次 Seed 2.0 包含 Pro、Lite、Mini 三款通用模型，以及专为开发者定制的 Seed 2.0 Code 模型。

由于各种用途都必须支持，Seed 2.0 的通用性特别突出，比以前版本都要强。

1、支持多模态，各种类型的数据都能处理：文字、图表、视觉空间、运动、视频等等。

2、具备各种 Agent 能力，方便跟企业工具对接：搜索、函数调用、工具调用、多轮指令、上下文管理等。

3、有推理和代码能力。

正因为最后一点，所以我们可以拿它来编程，尤其是生成前端代码。跟字节发布的 AI 编程工具 TRAE 配合使用，效果很好，特别方便全栈开发，个人用户还免费。

三、TRAE 的准备工作

下载安装 TRAE 以后，它有两种模式，左上角可以切换：IDE 模型和 SOLO 模型。

选择 IDE 就可以了，SOLO 是 AI 任务的编排器，除非多个任务一起跑，否则用不到。

然后，按下快捷键 Ctrl + U（或者 Command + U），唤出对话框，用来跟 AI 对话。

我们要构建 Web 应用，左上角就选 @Builder 开发模式。右下角的模型就选 Seed-2.0-Code。

可以看到，TRAE 自带的国产开源编程模型很全，都是免费使用。

准备工作这样就差不多了。

四、编程测试

我选了一个有点难度的任务，让 Seed 2.0 生成。

ASCII 图形是使用字符画出来的图形，比如下图。

我打算生成一个 Web 应用，用户在网页上输入 ASCII 图形，自动转成 Excalidraw 风格的手绘图形。

提示词如下：

"生成一个 Web 应用，可以将 ASCII 图形转为 Excalidraw 风格的图片，并提供下载。"

模型就开始思考，将这个任务分解为四步。

五、生成结果

等到 Seed 2.0 代码生成完毕，TRAE 就会起一个本地服务 localhost:8080，同时打开了预览窗口。

生成的结果还挺有意思，上部的 ASCII 输入框提供了四个示例：Box、Tree、Flowchart、Smiley。下面是 Tree 的样子。

然后是 Excalidraw 参数的控制面板：线宽、粗糙度、弯曲度、字体大小。

点击 Convert（转换）按钮，马上得到手绘风格的线条图。

整个页面就是下面的样子。

六、Skill 简介

这个页面的设计，感觉不是很美观，还可以改进。我打算为 Seed 2.0 加入专门的前端设计技能，使其能够做出更美观的页面。

所谓 Skill（技能），就是一段专门用途的提示词，用来注入上下文。

有时候，提示词很长，每次都输入，就很麻烦。我们可以把反复用到的部分提取出来，保存在一个文件里面，方便重复使用。这种提取出来的提示词，往往是关于如何完成一种任务的详细描述，所以就称为"技能文件"。

格式上，它就是一个 Markdown 文本文件，有一个 YAML 头，包含 name 字段和 description 字段。

name 字段是 Skill 的名称，可以通过这个名称调用该技能；description 字段则是技能的简要描述，模型通过这段描述判断何时自动调用该技能。

有些技能比较复杂，除了描述文件以外，还有专门的脚本文件、资源文件、模板文件等等，相当于一个代码库。

这些文件里面，SKILL.md 是入口文件，模型根据它的描述，了解何时何处调用其他各个文件。

这个库发到网上，就可以与其他人共享。如果你觉得 AI 模型处理任务时，需要用到某种技能，就可以寻找别人已经写好的 Skill 加载到模型。

七、前端设计技能

下面，我使用 Anthropic 公司共享出来的前端设计技能，重构一下前面的页面。它只有单独一个 Markdown 文件，可以下载下来。

打开 TRAE 的"设置/规则和技能"页面。

点击技能部分的"+ 创建"按钮，打开创建技能的窗口。

你可以在这个窗口填写 SKill 内容，也可以上传现成的 Skill 文件。我选择上传，完成后，就可以看到列表里已经有 frontend-design 技能了。

然后，我就用下面的提示词，唤起这个技能来重构页面。

"使用 frontend-design 技能，重构这个页面，让其变得更美观易用，更有专业感。"

下面就是模型给出的文字描述和重构结果。

页面确实感觉变得高大上了！

八、Vercel deploy 技能

最后，再看一个技能的例子。

代码生成以后，都是在本地机器上运行，能不能发布到网上，分享给更多的人呢？

回答是只要使用 Vercel 公司的 deploy 技能，就能一个命令将生成结果发布到 Vercel 的机器上。

在 Vercel 官方技能的 GitHub 仓库里，下载 Vercel-deploy 技能的 zip 文件。

然后，把这个 zip 文件拖到 TRAE 的技能窗口里面，就会自动加载了。

输入提示词："将生成的网站发布到 Vercel"。

模型就会执行 vercel-deploy 技能，将网站发布到 Vercel，最后给出两个链接，一个是预览链接，另一个是发布到你个人账户的链接。

大家现在可以访问这个链接，看看网站的实际效果了。

九、总结

如果你读到这里，应该会同意我的观点，Seed 2.0 的编程能力相当不错，跟自家的编程工具 TRAE 搭配起来，好用又免费。

Skill 则是强大的能力扩展机制，让模型变得无所不能，一定要学会使用。

（完）

文档信息

  • 版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）
  • 发表日期： 2026年2月14日

React 闭包陷阱深度解析：从词法作用域到快照渲染

✇掘金 前端
NEXT06

在 React 函数式组件的开发过程中，开发者常会遭遇一种“幽灵般”的状态异常：页面 UI 已经正确响应并更新了最新的状态值，但在 setInterval 定时器、useEffect 异步回调或原生事件监听器中，打印出的变量却始终停滞在初始值。

这种现象通常被误认为是 React 的 Bug，但其本质是 JavaScript 语言核心机制——词法作用域（Lexical Scoping）与 React 函数式组件渲染特性发生冲突的产物。在社区中，这被称为“闭包陷阱”（Stale Closure）或“过期的闭包”。

本文将摒弃表象，从内存模型与执行上下文的角度，剖析这一问题的成因及标准解决方案。

核心原理：陷阱是如何形成的

要理解闭包陷阱，必须首先理解两个核心的前置概念：JavaScript 的词法作用域与 React 的快照渲染。

1. JavaScript 的词法作用域 (Lexical Scoping)

JavaScript 中的函数在定义时，其作用域链就已经确定了。闭包是指函数可以访问其定义时所在作用域中的变量。关键在于：闭包捕获的是函数创建那一刻的变量引用。如果该变量在后续没有发生引用地址的变更（如 const 声明的原始类型），闭包内访问的永远是创建时的那个值。

2. React 的快照渲染 (Rendering Snapshots)

React 函数组件的每一次渲染（Render），本质上都是一次独立的函数调用。

  • Render 1：React 调用 Component 函数，创建了一组全新的局部变量（包括 props 和 state）。
  • Render 2：React 再次调用 Component 函数，创建了另一组全新的局部变量。

虽然两次渲染中的变量名相同（例如都叫 count），但在内存中它们是完全不同、互不干扰的独立副本。每次渲染都像是一张“快照”，固定了当时的数据状态。

3. 致命结合：持久化闭包与过期快照

当我们将 useEffect 的依赖数组设置为空 [] 时，意味着该 Effect 只在组件挂载（Mount）时执行一次。

  1. Mount (Render 1) ：count 初始化为 0。useEffect 执行，创建一个定时器回调函数。该回调函数通过闭包捕获了 Render 1 作用域中的 count (0)。
  2. Update (Render 2) ：状态更新，count 变为 1。React 再次调用组件函数，产生了一个新的 count 变量 (1)。
  3. Conflict：由于依赖数组为空，useEffect 没有重新运行。内存中运行的依然是 Render 1 时创建的那个回调函数。该函数依然持有 Render 1 作用域的引用，因此它看到的永远是 count: 0。

代码实战与剖析

以下是一个经典的闭包陷阱反面教材。请注意代码注释中的内存快照分析。

JavaScript

import { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // 闭包陷阱发生地
    const timer = setInterval(() => {
      // 这里的箭头函数在 Render 1 时被定义
      // 根据词法作用域，它捕获了 Render 1 上下文中的 count 常量
      // Render 1 的 count 值为 0
      console.log('Current Count:', count); 
    }, 1000);

    return () => clearInterval(timer);
  }, []); // 依赖数组为空，导致 effect 不会随组件更新而重建

  return (
    <div>
      <p>UI Count: {count}</p>
      {/* 点击按钮触发重渲染 (Render 2, 3...) */}
      <button onClick={() => setCount(count + 1)}>Add</button>
    </div>
  );
}

内存行为分析：

  • Render 1: count (内存地址 A) = 0。setInterval 创建闭包，引用地址 A。
  • User Click: 触发更新。
  • Render 2: count (内存地址 B) = 1。组件函数重新执行，创建了新变量。
  • Result: 此时 UI 渲染使用的是地址 B 的数据，但后台运行的定时器依然死死抓住地址 A 不放。

解决方案：逃离陷阱的三个层级

针对不同场景，我们有三种标准的架构方案来解决此问题。

方案一：规范依赖 (The Standard Way)

遵循 React Hooks 的设计规范，诚实地将所有外部依赖填入依赖数组。

JavaScript

useEffect(() => {
  const timer = setInterval(() => {
    console.log('Current Count:', count);
  }, 1000);

  return () => clearInterval(timer);
}, [count]); //  将 count 加入依赖
  • 原理：每当 count 变化，React 会先执行清除函数（clearInterval），然后重新运行 Effect。这将创建一个新的定时器回调，新回调捕获的是当前最新渲染作用域中的 count。
  • 代价：定时器会被频繁销毁和重建。如果计时精度要求极高，这种重置可能会导致时间偏差。

方案二：函数式更新 (The Functional Way)

如果逻辑仅仅是基于旧状态更新新状态，而不需要在副作用中读取状态值，可以使用 setState 的函数式更新。

JavaScript

useEffect(() => {
  const timer = setInterval(() => {
    //  这里的 c 是 React 内部传入的最新 state，不依赖闭包中的 count
    setCount(prevCount => prevCount + 1);
  }, 1000);

  return () => clearInterval(timer);
}, []); // 依赖依然为空，但逻辑正确
  • 原理：React 允许将回调函数传递给 setter。执行时，React 内部会将最新的 State 注入该回调。这种方式绕过了当前闭包作用域的限制，直接操作 React 的状态队列。

方案三：Ref 引用 (The Ref Way)

如果必须在 useEffect 中读取最新状态，且不希望重启定时器，useRef 是最佳逃生舱。

JavaScript

const [count, setCount] = useState(0);
const countRef = useRef(count);

// 同步 Ref：每次渲染都更新 ref.current
useEffect(() => {
  countRef.current = count;
}, [count]);

useEffect(() => {
  const timer = setInterval(() => {
    //  访问 ref.current。
    // ref 对象在组件生命周期内引用地址不变，但其 current 属性是可变的。
    // 闭包捕获的是 ref 对象的引用，因此总能读到最新的 current 值。
    console.log('Current Count:', countRef.current);
  }, 1000);

  return () => clearInterval(timer);
}, []); // 依赖为空，且定时器不会重启
  • 原理：useRef 创建了一个可变的容器。闭包虽然被锁死在首次渲染，但它锁死的是这个“容器”的引用。容器内部的内容（current）是随渲染实时更新的，从而实现了“穿透”闭包读取最新数据。

总结

React 闭包陷阱的本质，是持久化的闭包引用了过期的快照变量。

这并非框架设计的缺陷，而是函数式编程模型与 JavaScript 语言特性的必然交汇点。作为架构师，在处理此类问题时应遵循以下建议：

  1. 诚实对待依赖数组：绝大多数闭包问题源于试图欺骗 React，省略依赖项。ESLint 的 react-hooks/exhaustive-deps 规则应当被严格遵守。
  2. 理解引用的本质：清楚区分什么是不可变的快照（State/Props），什么是可变的容器（Ref）。在跨渲染周期的副作用中共享数据，Ref 是唯一的桥梁。

useMemo 与 useCallback 的原理与最佳实践

✇掘金 前端
NEXT06

在 React 的组件化架构中，性能优化往往不是一项大刀阔斧的重构工程，而是体现在对每一次渲染周期的精准控制上。作为一名拥有多年实战经验的前端架构师，我见证了无数应用因为忽视了 React 的渲染机制，导致随着业务迭代，页面交互变得愈发迟缓。

本文将深入探讨 React Hooks 中的两个关键性能优化工具：useMemo 和 useCallback。我们将透过现象看本质，理解它们如何解决“全量渲染”的痛点，并剖析实际开发中容易忽视的闭包陷阱。

引言：React 的渲染痛点与“摩天大楼”困境

想象一下，你正在建造一座摩天大楼（你的 React 应用）。每当大楼里的某一个房间（组件）需要重新装修（更新状态）时，整个大楼的施工队都要停下来，把整栋楼从地基到顶层重新刷一遍油漆。这听起来极度荒谬且低效，但在 React 默认的渲染行为中，这往往就是现实。

React 的核心机制是“响应式”的：当父组件的状态发生变化触发更新时，React 会默认递归地重新渲染该组件下的所有子组件。这种“全量渲染”策略保证了 UI 与数据的高度一致性，但在复杂应用中，它带来了不可忽视的性能开销：

  1. 昂贵的计算重复执行：与视图无关的复杂逻辑被反复计算。
  2. DOM Diff 工作量激增：虽然 Virtual DOM 很快，但构建和对比庞大的组件树依然消耗主线程资源。

性能优化的核心理念在于**“惰性”与“稳定”**：只在必要时进行计算，只在依赖变化时触发重绘。

第一部分：useMemo —— 计算结果的缓存（值维度的优化）

核心定义

useMemo 可以被视为 React 中的 computed 计算属性。它的本质是“记忆化”（Memoization）：在组件渲染期间，缓存昂贵计算的返回值。只有当依赖项发生变化时，才会重新执行计算函数的逻辑。

场景与反例解析

让我们看一个典型的性能瓶颈场景。假设我们有一个包含大量数据的列表，需要根据关键词过滤，同时组件内还有一个与列表无关的计数器 count。

未优化的代码（性能痛点）

JavaScript

import { useState } from 'react';

// 模拟昂贵的计算函数
function slowSum(n) {
  console.log('执行昂贵计算...');
  let sum = 0;
  // 模拟千万级循环，阻塞主线程
  for(let i = 0; i < n * 10000000; i++) {
    sum += i;
  }
  return sum;
}

export default function App() {
  const [count, setCount] = useState(0);
  const [keyword, setKeyword] = useState('');
  const [num, setNum] = useState(10);
  const list = ['apple', 'banana', 'orange', 'pear']; // 假设这是个大数组

  // 痛点 1：每次 App 渲染（如点击 count+1），filter 都会重新执行
  // 即使 keyword 根本没变
  const filterList = list.filter(item => {
    console.log('列表过滤执行');
    return item.includes(keyword);
  });
  
  // 痛点 2：每次 App 渲染，slowSum 都会重新运行
  // 导致点击 count 按钮时页面出现明显卡顿
  const result = slowSum(num);

  return (
    <div>
      <p>计算结果: {result}</p>
      {/* 输入框更新 keyword */}
      <input value={keyword} onChange={e => setKeyword(e.target.value)} />
      
      {/* 仅仅是更新计数器，却触发了上面的重计算 */}
      <button onClick={() => setCount(count + 1)}>Count + 1 ({count})</button>
      
      <ul>
        {filterList.map(item => <li key={item}>{item}</li>)}
      </ul>
    </div>
  );
}

在上述代码中，仅仅是为了更新 UI 上的 count 数字，主线程却被迫去执行千万次的循环和数组过滤，这是极大的资源浪费。

优化后的代码

利用 useMemo，我们可以将计算逻辑包裹起来，使其具备“惰性”。

JavaScript

import { useState, useMemo } from 'react';

// ... slowSum 函数保持不变

export default function App() {
  // ... 状态定义保持不变

  // 优化 1：依赖为 [keyword]，只有关键词变化时才重算列表
  const filterList = useMemo(() => {
    console.log('列表过滤执行');
    return list.filter(item => item.includes(keyword));
  }, [keyword]);
  
  // 优化 2：依赖为 [num]，点击 count 不会触发此处的昂贵计算
  const result = useMemo(() => {
    return slowSum(num);
  }, [num]);

  return (
    // ... JSX 保持不变
  );
}

底层解析

useMemo 利用了 React Fiber 节点的内部存储（memoizedState）。在渲染过程中，React 会取出上次存储的 [value, deps]，并将当前的 deps 与上次的进行浅比较（Shallow Compare）。

  • 如果依赖项完全一致，直接返回存储的 value，跳过函数执行。
  • 如果依赖项发生变化，执行函数，更新缓存。

第二部分：useCallback —— 函数引用的稳定（引用维度的优化）

核心定义

useCallback 用于缓存“函数实例本身”。它的作用不是为了减少函数创建的开销（JS 创建函数的开销极小），而是为了保持函数引用地址的稳定性，从而避免下游子组件因为 props 变化而进行无效重渲染。

痛点：引用一致性问题

在 JavaScript 中，函数是引用类型，且 函数 === 对象。
在 React 函数组件中，每次重新渲染（Re-render）都会重新执行组件函数体。这意味着，定义在组件内部的函数（如事件回调）每次都会被重新创建，生成一个新的内存地址。

比喻：咖啡店点单

为了理解这个概念，我们可以通过“咖啡店点单”来比喻：

  • 未优化的情况：你每次去咖啡店点单，都派一个替身去。虽然替身说的台词一模一样（“一杯拿铁，加燕麦奶”），但对于店员（子组件）来说，每次来的都是一个陌生人。店员必须重新确认身份、重新建立订单记录。这就是子组件因为函数引用变化而被迫重绘。
  • 使用 useCallback：你本人亲自去点单。店员一看：“还是你啊，老样子？”于是直接复用之前的订单记录，省去了沟通成本。这就是引用稳定带来的性能收益。

实战演示：父子组件的协作

失效的优化（反面教材）

JavaScript

import { useState, memo } from 'react';

// 子组件使用了 memo，理论上 Props 不变就不应该重绘
const Child = memo(({ handleClick }) => {
  console.log('子组件发生渲染'); // 目标：不希望看到这行日志
  return <button onClick={handleClick}>点击子组件</button>;
});

export default function App() {
  const [count, setCount] = useState(0);

  // 问题所在：
  // 每次 App 渲染（点击 count+1），handleClick 都会被重新定义
  // 生成一个新的函数引用地址 (fn1 !== fn2)
  const handleClick = () => {
    console.log('子组件被点击');
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>父组件 Count + 1</button>
      
      {/* 
        虽然 Child 加了 memo，但 props.handleClick 每次都变了
        导致 Child 认为 props 已更新，强制重绘
      */}
      <Child handleClick={handleClick} />
    </div>
  );
}

正确的优化

我们需要使用 useCallback 锁定函数的引用，并配合 React.memo 使用。

JavaScript

import { useState, useCallback, memo } from 'react';

const Child = memo(({ handleClick }) => {
  console.log('子组件发生渲染'); 
  return <button onClick={handleClick}>点击子组件</button>;
});

export default function App() {
  const [count, setCount] = useState(0);

  // 优化：依赖项为空数组 []，表示该函数引用永远不会改变
  // 无论 App 渲染多少次，handleClick 始终指向同一个内存地址
  const handleClick = useCallback(() => {
    console.log('子组件被点击');
  }, []); 

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>父组件 Count + 1</button>
      
      {/* 
        现在：
        1. handleClick 引用没变
        2. Child 组件检测到 props 未变
        3. 跳过渲染 -> 性能提升
      */}
      <Child handleClick={handleClick} />
    </div>
  );
}

关键结论

useCallback 必须配合 React.memo 使用。
如果在没有 React.memo 包裹的子组件上使用 useCallback，不仅无法带来性能提升，反而因为增加了额外的 Hooks 调用和依赖数组对比，导致性能变为负优化。

第三部分：避坑指南 —— 闭包陷阱与依赖项管理

在使用 Hooks 进行优化时，开发者常遇到“数据不更新”的诡异现象，这通常被称为“陈旧闭包”（Stale Closures）。

闭包陷阱的概念

Hooks 中的函数会捕获其定义时的作用域状态。如果依赖项数组没有正确声明，Memoized 的函数就会像一个“时间胶囊”，永远封存了旧的变量值，无法感知外部状态的更新。

典型场景与解决方案

场景：定时器或事件监听

假设我们希望在 useEffect 或 useCallback 中打印最新的 count。

JavaScript

// 错误示范
useEffect(() => {
  const timer = setInterval(() => {
    // 陷阱：这里的 count 永远是初始值 0
    // 因为依赖数组为空，闭包只在第一次渲染时创建，捕获了当时的 count
    console.log('Current count:', count); 
  }, 1000);
  return () => clearInterval(timer);
}, []); // ❌ 依赖项缺失

解决方案

  1. 诚实地填写依赖项（不推荐用于定时器）：
    将 [count] 加入依赖。但这会导致定时器在每次 count 变化时被清除并重新设定，违背了初衷。

  2. 函数式更新（推荐）：
    如果只是为了设置状态，使用 setState 的回调形式。

    JavaScript

    //  不需要依赖 count 也能实现累加
setCount(prevCount => prevCount + 1);

  3. 使用 useRef 逃生舱（推荐用于读取值）：
    useRef 返回的 ref 对象在组件整个生命周期内保持引用不变，且 current 属性是可变的。

    codeJavaScript

    const countRef = useRef(count);

// 每次渲染更新 ref.current
useEffect(() => {
  countRef.current = count;
});

useEffect(() => {
  const timer = setInterval(() => {
    //  总是读取到最新的值，且不需要重建定时器
    console.log('Current count:', countRef.current);
  }, 1000);
  return () => clearInterval(timer);
}, []); // 依赖保持为空

总结：三兄弟的协作与克制

在 React 性能优化的工具箱中，我们必须清晰区分这“三兄弟”的职责：

  1. useMemo：缓存值。用于节省 CPU 密集型计算的开销。
  2. useCallback：缓存函数。用于维持引用稳定性，防止下游组件无效渲染。
  3. React.memo：缓存组件。用于拦截 Props 对比，作为重绘的最后一道防线。

架构师的建议：保持克制

性能优化并非免费午餐。useMemo 和 useCallback 本身也有内存占用和依赖对比的计算开销。

请遵循以下原则：

  • 不要预先优化：不要默认给所有函数套上 useCallback。
  • 不要优化轻量逻辑：对于简单的 a + b 或原生 DOM 事件（如 
    ），原生 JS 的执行速度远快于 Hooks 的开销。
  • 先定位，后治理：使用 React DevTools Profiler 找出真正耗时的组件，再针对性地使用上述工具进行“外科手术式”的优化。

掌握了这些原理与最佳实践，你便不再是盲目地编写 Hooks，而是能够像架构师一样，精准控制应用的每一次渲染脉搏。

我用豆包大模型2.0手搓了macOS，Seedance 2.0后字节再送春节AI大礼

✇爱范儿
莫崇宇

这两天，朋友圈几乎被 Seedance 2.0 的视频刷屏了，感觉人人都能当导演。不过，就在大家都在看热闹、讨论 AI 怎么颠覆好莱坞的时候，豆包大模型 2.0 的全家桶，刚刚正式发布了。

这也是豆包大模型自 2024 年 5 月正式发布以来首次跨代升级。

说实话，作为把 AI 当生产力工具的老韭菜，我最关心的其实就两点：能不能干活？能不能便宜点？对此，这次豆包大模型 2.0 版本的更新，给出的答案很朴实：读懂图表文档、看懂长视频、写出能用的代码，并且把价格打下来。

而且，这次不仅仅是一个单体模型的升级，而是一整套「组合拳」。

豆包大模型 2.0 系列包含 Pro、Lite、Mini 三款通用 Agent 模型和 Code 模型，灵活适配各类业务场景，其中现在打开豆包 App、电脑客户端或网页版，点击「专家模式」，即可第一时间体验全新升级的豆包大模型 2.0 Pro：

  • 豆包 2.0 Pro：堆料狂魔，专攻深度推理和长链路任务，官方说法是全面对标 GPT-5.2 和 Gemini 3 Pro，
  • 2.0 Lite：主打一个「既要又要」，性能和成本的平衡大师，综合能力已经反超了上一代的主力豆包 1.8。
  • 2.0 Mini：低时延、高并发，专门给那些对成本极度敏感的场景准备的。
  • Code 版（Doubao-Seed-2.0-Code）：程序员特供，建议配合 IDE 工具 TRAE 食用，疗效更佳。

比人类还懂视频，豆包大模型 2.0 的多模态理解有多强?

如果说文本模型是 AI 的大脑，那么多模态理解就是它的眼睛。

官方技术报告显示，豆包大模型 2.0 系列在 VLMsAreBiased、OmniDocBench 等基准上均取得了业界最高分。

数据很枯燥，我们找来了一张网友恶搞的「整活」图片——一瓶号称 「20 合一的男士洗发水」。瓶身上密密麻麻地堆砌着各种类型的产品。

扔给豆包 2.0 Pro 后，即便文字被截断，它依然通过上下文清晰识别。而且，它没有傻乎乎地介绍产品，而是明确指出这是一种「整活」。

这对应了官方数据中提到的 ChartQAPro 和 OmniDocBench 1.5 的顶尖水准——它不仅在看，而且在理解信息的层级关系。

这种「理解力」放在工作场景里就是生产力。

大量的真实用户查询涉及复杂的图片——截图、图表、扫描文档。我试着把一份关于豆包大模型 2.0 自身的技术文档扔给它，要求进行解析。结果没想到，它不仅提取了关键信息，还搭配脑图和 PPT 生成，形成了一整套比较完整的框架。

甚至在视频理解上，它也展现出了「追剧党」的潜质。技术报告中提到，豆包大模型 2.0 在 EgoTempo 基准上超过了人类分数。

真的比人强？我们扔给它一张《何以笙箫默》的剧照，问：「从这张照片中，可以看出男人是南方人还是北方人？」

这是一个典型的「视觉 + 知识 + 推理」的混合考题。豆包大模型 2.0 的反应非常快，不仅认出这是电视剧《何以笙箫默》及演员钟汉良，也结合原著设定给出了一份深入且清晰的分析报告。

甚至在长视频理解上，它在 TVBench 和 MotionBench 上的高分也体现在了实测中：它能从一段长视频里精准分析动作节奏。对于需要处理监控流、体育赛事分析的行业来说，这含金量要高得多。

科研级大脑遇上生活小白

在逻辑推理方面，基准测试结果显示，豆包 2.0 Pro 在 SuperGPQA（研究生级问答）上分数超过了 GPT-5.2，在 IMO（国际数学奥林匹克）测试中更是获得了金牌成绩。

无论是「孙悟空既然学了长生术，为何 342 岁还是阳寿已尽？」，还是「两把武器，一把攻击 1～5，一把 2～4，从数据角度，哪把更厉害？」这些问题，显然都不会难倒豆包。

不过，就是这样一个能解奥数题的「学霸」，却在一道 50 米洗车常识题「我想去洗车，洗车店距离我家 50 米，你说我应该开车过去还是走过去？」依旧回答错误。

正常人想的是，开车去，不然洗啥？豆包 2.0 Pro：陷入了深度的「过度推理」。它开始分析距离成本、步行健康收益、车辆启动损耗……最后一本正经地建议我走过去。

这也是当前大模型普遍存在的问题，即便它们拥有科研级的推理能力，但依然缺乏基于物理世界的常识性直觉，只能说是任重而道远。

能帮你早下班的 AI 才是好 AI

这次更新最大的野心，其实在于 Agent（智能体）。Seed 团队发现了一个痛点：模型能做题，但干不了长链路的（比如写一个完整的 APP，或者设计一个实验）。

为了解决这个问题，豆包大模型 2.0 重点强化了指令遵循和长程任务。在 HealthBench 上拿到第一名，在 FrontierSci 上表现强劲。

体现在实测中，就是它真的能当「科研助理」用了。把一个生物学难题——「高尔基体蛋白分析」扔给它时，它没有泛泛而谈。它不仅给出了总体路线，甚至把基因工程、小鼠模型构建、多组学分析串成了一条完整流程。

至于编程方面，为了验证豆包大模型 2.0 的「含码量」，我们直接打开了字节自家的 IDE —— TRAE，调用了专门针对编程优化的 Doubao-Seed-2.0-Code。

比如让它使用 p5js 创建令人惊叹的多色交互式动画，效果相当不错。代码一次跑通，屏幕上涌动的色彩不仅流畅，而且交互逻辑完全符合预期。

接着，我们要求它用纯代码手搓一个 macOS 的桌面系统。Dock 栏的动效、窗口的层级、顶部的菜单栏，完成度较高，不过审美还有待提高，整体表现中规中矩。

正如豆包大模型团队在其模型卡中所说：

需要注意的是，Seed2.0 系列与国际前沿的大语言模型仍存在差距。Seed 已明确提升模型应对现实世界复杂性的能力方向，并为此在相关方面投入大量精力，对 Seed 模型系列进行优化。

但这一切在价格面前都不重要了。因为豆包大模型 2.0 在提升性能的同时，Token 定价降低了约一个数量级。

这是一个非常现实的商业逻辑。当推理成本更具性价比，很多诸如全量的文档分析、实时的视频流监控的场景，突然就变得可行了。

图片

结合那份长长的基准测试报告，我最大的感受是两个字：务实。它并不完美，但对于打工人来说，一个能帮你读懂图表、能写出扎实代码、且价格划算的 AI，或许会实用得多。

毕竟，能帮我们早点下班的 AI，才是好 AI。

附 79 页 Model Card：
https://lf3-static.bytednsdoc.com/obj/eden-cn/lapzild-tss/ljhwZthlaukjlkulzlp/seed2/0214/Seed2.0%20Model%20Card.pdf

#欢迎关注爱范儿官方微信公众号：爱范儿（微信号：ifanr），更多精彩内容第一时间为您奉上。

爱范儿 | 原文链接 · 查看评论 · 新浪微博


适配Swift 6 Sendable：用AALock优雅解决线程安全与不可变引用难题

✇掘金 iOS
Aaron_Feng

Swift 6 带来的 Sendable 协议是并发安全领域的重要升级，它强制要求跨线程传递的类型具备明确的线程安全语义。但在实际开发中，我们常会陷入一个两难境地：既要满足 Sendable 对不可变引用（let）的要求，又要保证非线程安全对象的并发访问安全。本文将介绍我封装的 AALock 工具库，它既能完美适配 Swift 6 Sendable 检查，又能以极简的方式实现线程安全，让你的代码在 Swift 6 并发模型下既合规又优雅。

本组件的设计思路参考了 iOS 18 原生 mutex 锁的设计理念，通过封装适配层实现了低版本 iOS 系统的兼容使用，既保留了原生高性能特性，又解决了不同系统版本下线程安全锁的适配问题。

一、Swift 6 Sendable 的核心痛点

1. Sendable 对“不可变”的强约束

Sendable 协议的核心要求之一是：符合 Sendable 的类型，其属性应优先使用 let（不可变）修饰。如果类型中存在 var 修饰的引用类型属性（比如 var dict: [String: Any]），编译器会直接判定该类型不满足 Sendable，导致无法安全地跨 actor/线程传递。

但现实场景中，我们不可能所有数据都做成不可变——业务逻辑必然需要修改数组、字典、自定义对象等，直接用 let 修饰非线程安全对象，又会带来并发访问的线程安全问题。

2. 传统解决方案的弊端

为了兼顾 Sendable 和线程安全，传统做法通常有两种，但都有明显缺陷：

  • 方案1：用 var 修饰属性 + 手动加锁。直接违反 Sendable 对不可变引用的要求，编译器报错，无法通过检查；
  • 方案2：封装成不可变容器 + 拷贝修改。每次修改都生成新对象，性能开销大，且代码冗余，违背“最小修改成本”原则。

二、AALock 的核心设计思路

AALock 的核心目标是：让非线程安全对象通过 let 修饰仍能安全修改，同时满足 Sendable 检查。其设计围绕两个核心封装展开：

1. 核心思想：“不可变容器 + 内部可变 + 自动加锁”

  • 用 let 修饰 AALock 包装后的对象（满足 Sendable 对不可变引用的要求）；
  • 容器内部维护需要修改的非线程安全对象，通过锁（不公平锁/读写锁）保证修改的线程安全；
  • 对外暴露极简的闭包式 API，自动处理加锁/解锁，避免手动操作的漏解锁风险。

2. 核心组件

组件 适用场景 核心优势
AAUnfairLock 通用互斥场景 基于系统 os_unfair_lock，性能优于 NSLock，无递归重入
AARWLock 读多写少场景 读写分离，读操作并发执行，写操作互斥，性能远超普通互斥锁
AALockedValue 通用线程安全封装 基于 AAUnfairLock，包装任意类型，闭包式操作，自动加解锁
AARWLockedValue 读多写少的高性能场景 基于 AARWLock，读写锁分离，最大化读操作并发性能

三、AALock 如何适配 Sendable？

1. 关键特性：let 修饰仍可安全修改

通过 AALockedValue/AARWLockedValue 包装后，我们可以用 let 修饰属性（满足 Sendable），同时通过闭包修改内部数据（线程安全）：

// 符合 Sendable 的自定义类型
struct SafeData: Sendable {
    // let 修饰，满足 Sendable 不可变要求
    let lockedDict = AALockedValue(value: [String: String]())
    let rwLockedArray = AARWLockedValue(value: [Int]())
}

// 跨线程传递（满足 Sendable 检查）
let safeData = SafeData()
DispatchQueue.global().async {
    // 写操作：自动加锁，线程安全
    safeData.lockedDict.withLock { dict in
        dict["key"] = "value"
    }
    
    // 读操作：自动加锁，线程安全
    let value = safeData.lockedDict.withLock { dict in
        dict["key"]
    }
    print("读取值：\(value ?? "nil")")
}

2. 底层适配 Sendable 协议

AALock 核心组件均遵循 Sendable 协议，确保包装后的对象可安全跨线程传递：

// AALockedValue 核心定义（简化版）
public final class AALockedValue<Value>: @unchecked Sendable {
    private let lock: AAUnfairLock
    private var _value: Value
    
    public init(value: Value, lock: AAUnfairLock = AAUnfairLock()) {
        self._value = value
        self.lock = lock
    }
    
    // 闭包式操作，自动加解锁
    public func withLock<T>(_ body: (inout Value) -> T) -> T {
        lock.lock {
            body(&_value)
        }
    }
    
    // 便捷取值（自动加锁）
    public var value: Value {
        withLock { $0 }
    }
}

关键设计点：

  • 用 final class 避免继承带来的线程安全风险；
  • 内部 _value 用 var 修饰（仅内部可变），对外暴露 let 容器；
  • 所有操作通过闭包封装，确保锁的范围精准，避免手动解锁遗漏；
  • 遵循 Sendable 协议，可直接跨 actor/线程传递。

四、AALock 核心用法示例

1. 基础用法：普通互斥锁（AAUnfairLock）

let lock = AAUnfairLock()
var dict = [String: String]()

// 闭包式加解锁（推荐）
lock.lock {
    dict["name"] = "AALock"
    dict["version"] = "1.0.0"
}

// 手动加解锁（兼容场景）
lock.lock()
let name = dict["name"]
lock.unlock()

2. 高性能场景：读写锁（AARWLock）

读多写少场景下，读写锁性能远超普通互斥锁：

let rwLock = AARWLock()
let rwLockedArray = AARWLockedValue(value: [Int]())

// 写锁：互斥操作，修改数据
rwLockedArray.withWriteLock { array in
    array.append(contentsOf: [1,2,3,4,5])
}

// 读锁：并发读取，性能最优
DispatchQueue.concurrentPerform(iterations: 10) { _ in
    let count = rwLockedArray.withReadLock { array in
        array.count
    }
    print("数组长度：\(count)")
}

3. 完整 Sendable 适配示例

// 自定义 Sendable 类型
class BusinessManager: Sendable {
    // let 修饰，满足 Sendable
    private let userCache = AALockedValue(value: [String: User]())
    private let statisticData = AARWLockedValue(value: [String: Int]())
    
    // 新增用户（写操作）
    func addUser(_ user: User, id: String) {
        userCache.withLock { cache in
            cache[id] = user
        }
    }
    
    // 获取用户（读操作）
    func getUser(id: String) -> User? {
        userCache.withLock { cache in
            cache[id]
        }
    }
    
    // 统计数据（读多写少）
    func incrementStatistic(key: String) {
        statisticData.withWriteLock { data in
            data[key, default: 0] += 1
        }
    }
    
    func getStatistic(key: String) -> Int {
        statisticData.withReadLock { data in
            data[key] ?? 0
        }
    }
}

// 跨 Actor 传递（Swift 6 并发模型）
actor UserActor {
    func handleManager(_ manager: BusinessManager) {
        let count = manager.getStatistic(key: "login")
        print("登录次数：\(count)")
    }
}

// 调用示例
let manager = BusinessManager()
let actor = UserActor()
Task {
    await actor.handleManager(manager) // 无 Sendable 警告
}

五、AALock 的核心优势

1. 完美适配 Swift 6 Sendable

  • 用 let 修饰包装后的对象，满足 Sendable 对不可变引用的要求；
  • 所有核心组件遵循 Sendable，无编译器警告，直接通过 Swift 6 严格检查。

2. 极致的性能

  • 基于 os_unfair_lock 实现 AAUnfairLock，性能远超 NSLock/pthread_mutex_t；
  • 读写锁 AARWLock 针对读多写少场景做优化，读操作并发执行，性能提升数倍。

3. 极简的 API 设计

  • 闭包式加解锁，避免手动 lock()/unlock() 导致的漏解锁、死锁问题；
  • 支持任意类型的包装（基础类型、集合、自定义对象），无侵入式修改。

4. 零学习成本

  • API 语义清晰（withLock/withReadLock/withWriteLock），一看就会；
  • 无需修改原有业务逻辑，仅需包装非线程安全对象即可。

六、总结与推广

Swift 6 的 Sendable 协议是未来并发编程的标配，而线程安全是跨线程开发的基础要求。AALock 既解决了 Sendable 对不可变引用的强约束，又通过极简的 API 实现了线程安全，让开发者无需在“合规”和“易用”之间妥协。

适用场景

  • Swift 6 项目中需要满足 Sendable 检查的跨线程类型；
  • 读多写少的高性能并发场景（如缓存、统计数据）；
  • 任意需要线程安全的非线程安全对象（数组、字典、自定义 struct/class）。

接入建议

  1. 将 AALock 集成到项目中（支持 CocoaPods/Carthage/Swift Package Manager）；
  2. 将原有 var 修饰的非线程安全属性，替换为 let 修饰的 AALockedValue/AARWLockedValue；
  3. 通过 withLock/withReadLock/withWriteLock 操作内部数据，无需手动加锁。

AALock 让 Swift 6 并发编程更简单、更安全、更合规，如果你也在适配 Swift 6 Sendable，或者需要优雅解决线程安全问题，不妨试试这个封装——它会成为你 Swift 6 并发开发的“瑞士军刀”。

项目地址：GitHub - AALock
欢迎 Star、Fork、PR，一起完善 Swift 6 并发安全生态！

BFS 模拟 + 优化（Python/Java/C++/C/Go/JS/Rust）

✇LeetCode 每日一题题解
endlesscheng

类似 102. 二叉树的层序遍历，用一个 BFS 模拟香槟溢出流程：第一层溢出的香槟流到第二层，第二层溢出的香槟流到第三层，依此类推。

具体地：

  • 处理第一层到第二层，从 $(0,0)$ 溢出的香槟流到 $(1,0)$ 和 $(1,1)$。设溢出的香槟量为 $x$，那么 $(1,0)$ 和 $(1,1)$ 的香槟量都增加 $\dfrac{x}{2}$。
  • 处理第二层到第三层，从 $(1,0)$ 溢出的香槟流到 $(2,0)$ 和 $(2,1)$，从 $(1,1)$ 溢出的香槟流到 $(2,1)$ 和 $(2,2)$。
  • 依此类推。一般地，从 $(i,j)$ 溢出的香槟流到 $(i+1,j)$ 和 $(i+1,j+1)$。设溢出的香槟量为 $x$，那么下一层的 $j$ 和 $j+1$ 的香槟量都增加 $\dfrac{x}{2}$。用一个数组保存下一层每个玻璃杯的香槟量。

优化前

###py

class Solution:
    def champagneTower(self, poured: int, queryRow: int, queryGlass: int) -> float:
        cur = [float(poured)]
        for i in range(1, queryRow + 1):
            nxt = [0.0] * (i + 1)
            for j, x in enumerate(cur):
                if x > 1:  # 溢出到下一层
                    nxt[j] += (x - 1) / 2
                    nxt[j + 1] += (x - 1) / 2
            cur = nxt
        return min(cur[queryGlass], 1.0)  # 如果溢出，容量是 1

###java

class Solution {
    public double champagneTower(int poured, int queryRow, int queryGlass) {
        double[] cur = new double[]{(double) poured};
        for (int i = 1; i <= queryRow; i++) {
            double[] nxt = new double[i + 1];
            for (int j = 0; j < cur.length; j++) {
                double x = cur[j] - 1;
                if (x > 0) { // 溢出到下一层
                    nxt[j] += x / 2;
                    nxt[j + 1] += x / 2;
                }
            }
            cur = nxt;
        }
        return Math.min(cur[queryGlass], 1); // 如果溢出，容量是 1
    }
}

###cpp

class Solution {
public:
    double champagneTower(int poured, int queryRow, int queryGlass) {
        vector<double> cur = {1.0 * poured};
        for (int i = 1; i <= queryRow; i++) {
            vector<double> nxt(i + 1);
            for (int j = 0; j < cur.size(); j++) {
                double x = cur[j] - 1;
                if (x > 0) { // 溢出到下一层
                    nxt[j] += x / 2;
                    nxt[j + 1] += x / 2;
                }
            }
            cur = move(nxt);
        }
        return min(cur[queryGlass], 1.0); // 如果溢出，容量是 1
    }
};

###c

#define MIN(a, b) ((b) < (a) ? (b) : (a))

double champagneTower(int poured, int queryRow, int queryGlass) {
    double* cur = malloc(sizeof(double));
    cur[0] = poured;
    int curSize = 1;

    for (int i = 1; i <= queryRow; i++) {
        double* nxt = calloc(i + 1, sizeof(double));
        for (int j = 0; j < curSize; j++) {
            double x = cur[j] - 1;
            if (x > 0) { // 溢出到下一层
                nxt[j] += x / 2;
                nxt[j + 1] += x / 2;
            }
        }
        free(cur);
        cur = nxt;
        curSize = i + 1;
    }

    double ans = MIN(cur[queryGlass], 1); // 如果溢出，容量是 1
    free(cur);
    return ans;
}

###go

func champagneTower(poured, queryRow, queryGlass int) float64 {
cur := []float64{float64(poured)}
for i := 1; i <= queryRow; i++ {
nxt := make([]float64, i+1)
for j, x := range cur {
if x > 1 { // 溢出到下一层
nxt[j] += (x - 1) / 2
nxt[j+1] += (x - 1) / 2
}
}
cur = nxt
}
return min(cur[queryGlass], 1) // 如果溢出，容量是 1
}

###js

var champagneTower = function(poured, queryRow, queryGlass) {
    let cur = [poured];
    for (let i = 1; i <= queryRow; i++) {
        const nxt = Array(i + 1).fill(0);
        for (let j = 0; j < cur.length; j++) {
            const x = cur[j] - 1;
            if (x > 0) { // 溢出到下一层
                nxt[j] += x / 2;
                nxt[j + 1] += x / 2;
            }
        }
        cur = nxt;
    }
    return Math.min(cur[queryGlass], 1); // 如果溢出，容量是 1
};

###rust

impl Solution {
    pub fn champagne_tower(poured: i32, query_row: i32, query_glass: i32) -> f64 {
        let mut cur = vec![poured as f64];
        for i in 1..=query_row as usize {
            let mut nxt = vec![0.0; i + 1];
            for (j, x) in cur.into_iter().enumerate() {
                if x > 1.0 { // 溢出到下一层
                    nxt[j] += (x - 1.0) / 2.0;
                    nxt[j + 1] += (x - 1.0) / 2.0;
                }
            }
            cur = nxt;
        }
        cur[query_glass as usize].min(1.0) // 如果溢出，容量是 1
    }
}

优化

无需使用两个数组，可以像 0-1 背包那样，在同一个数组上修改。

###py

class Solution:
    def champagneTower(self, poured: int, queryRow: int, queryGlass: int) -> float:
        f = [0.0] * (queryRow + 1)
        f[0] = float(poured)
        for i in range(queryRow):
            for j in range(i, -1, -1):
                x = f[j] - 1
                if x > 0:
                    f[j + 1] += x / 2
                    f[j] = x / 2
                else:
                    f[j] = 0.0
        return min(f[queryGlass], 1.0)  # 如果溢出，容量是 1

###java

class Solution {
    public double champagneTower(int poured, int queryRow, int queryGlass) {
        double[] f = new double[queryRow + 1];
        f[0] = poured;
        for (int i = 0; i < queryRow; i++) {
            for (int j = i; j >= 0; j--) {
                double x = f[j] - 1;
                if (x > 0) {
                    f[j + 1] += x / 2;
                    f[j] = x / 2;
                } else {
                    f[j] = 0;
                }
            }
        }
        return Math.min(f[queryGlass], 1); // 如果溢出，容量是 1
    }
}

###cpp

class Solution {
public:
    double champagneTower(int poured, int queryRow, int queryGlass) {
        vector<double> f(queryRow + 1);
        f[0] = poured;
        for (int i = 0; i < queryRow; i++) {
            for (int j = i; j >= 0; j--) {
                double x = f[j] - 1;
                if (x > 0) {
                    f[j + 1] += x / 2;
                    f[j] = x / 2;
                } else {
                    f[j] = 0;
                }
            }
        }
        return min(f[queryGlass], 1.0); // 如果溢出，容量是 1
    }
};

###c

#define MIN(a, b) ((b) < (a) ? (b) : (a))

double champagneTower(int poured, int queryRow, int queryGlass) {
    double* f = calloc(queryRow + 1, sizeof(double));
    f[0] = poured;

    for (int i = 0; i < queryRow; i++) {
        for (int j = i; j >= 0; j--) {
            double x = f[j] - 1;
            if (x > 0) {
                f[j + 1] += x / 2;
                f[j] = x / 2;
            } else {
                f[j] = 0;
            }
        }
    }

    double ans = MIN(f[queryGlass], 1); // 如果溢出，容量是 1
    free(f);
    return ans;
}

###go

func champagneTower(poured, queryRow, queryGlass int) float64 {
f := make([]float64, queryRow+1)
f[0] = float64(poured)
for i := range queryRow {
for j := i; j >= 0; j-- {
x := f[j] - 1
if x > 0 {
f[j+1] += x / 2
f[j] = x / 2
} else {
f[j] = 0
}
}
}
return min(f[queryGlass], 1) // 如果溢出，容量是 1
}

###js

var champagneTower = function(poured, queryRow, queryGlass) {
    const f = Array(queryRow + 1).fill(0);
    f[0] = poured;
    for (let i = 0; i < queryRow; i++) {
        for (let j = i; j >= 0; j--) {
            const x = f[j] - 1;
            if (x > 0) {
                f[j + 1] += x / 2;
                f[j] = x / 2;
            } else {
                f[j] = 0;
            }
        }
    }
    return Math.min(f[queryGlass], 1); // 如果溢出，容量是 1
};

###rust

impl Solution {
    pub fn champagne_tower(poured: i32, query_row: i32, query_glass: i32) -> f64 {
        let query_row = query_row as usize;
        let mut f = vec![0.0; query_row + 1];
        f[0] = poured as f64;
        for i in 0..query_row {
            for j in (0..=i).rev() {
                let x = f[j] - 1.0;
                if x > 0.0 {
                    f[j + 1] += x / 2.0;
                    f[j] = x / 2.0;
                } else {
                    f[j] = 0.0;
                }
            }
        }
        f[query_glass as usize].min(1.0) // 如果溢出，容量是 1
    }
}

复杂度分析

  • 时间复杂度：$\mathcal{O}(\textit{queryRow}^2)$。
  • 空间复杂度：$\mathcal{O}(\textit{queryRow})$。

相似题目

118. 杨辉三角

分类题单

如何科学刷题？

  1. 滑动窗口与双指针（定长/不定长/单序列/双序列/三指针/分组循环）
  2. 二分算法（二分答案/最小化最大值/最大化最小值/第K小）
  3. 单调栈（基础/矩形面积/贡献法/最小字典序）
  4. 网格图（DFS/BFS/综合应用）
  5. 位运算（基础/性质/拆位/试填/恒等式/思维）
  6. 图论算法（DFS/BFS/拓扑排序/基环树/最短路/最小生成树/网络流）
  7. 动态规划（入门/背包/划分/状态机/区间/状压/数位/数据结构优化/树形/博弈/概率期望）
  8. 常用数据结构（前缀和/差分/栈/队列/堆/字典树/并查集/树状数组/线段树）
  9. 数学算法（数论/组合/概率期望/博弈/计算几何/随机算法）
  10. 贪心与思维（基本贪心策略/反悔/区间/字典序/数学/思维/脑筋急转弯/构造）
  11. 链表、树与回溯（前后指针/快慢指针/DFS/BFS/直径/LCA）
  12. 字符串（KMP/Z函数/Manacher/字符串哈希/AC自动机/后缀数组/子序列自动机）

我的题解精选（已分类）

欢迎关注 B站@灵茶山艾府

每日一题-香槟塔🟡

✇LeetCode 每日一题题解

我们把玻璃杯摆成金字塔的形状，其中 第一层 有 1 个玻璃杯， 第二层 有 2 个，依次类推到第 100 层，每个玻璃杯将盛有香槟。

从顶层的第一个玻璃杯开始倾倒一些香槟，当顶层的杯子满了，任何溢出的香槟都会立刻等流量的流向左右两侧的玻璃杯。当左右两边的杯子也满了，就会等流量的流向它们左右两边的杯子，依次类推。（当最底层的玻璃杯满了，香槟会流到地板上）

例如，在倾倒一杯香槟后，最顶层的玻璃杯满了。倾倒了两杯香槟后，第二层的两个玻璃杯各自盛放一半的香槟。在倒三杯香槟后，第二层的香槟满了 - 此时总共有三个满的玻璃杯。在倒第四杯后，第三层中间的玻璃杯盛放了一半的香槟，他两边的玻璃杯各自盛放了四分之一的香槟，如下图所示。

现在当倾倒了非负整数杯香槟后，返回第 i 行 j 个玻璃杯所盛放的香槟占玻璃杯容积的比例（ i 和 j 都从0开始）。

 

示例 1:
输入: poured(倾倒香槟总杯数) = 1, query_glass(杯子的位置数) = 1, query_row(行数) = 1
输出: 0.00000
解释: 我们在顶层（下标是（0，0））倒了一杯香槟后，没有溢出，因此所有在顶层以下的玻璃杯都是空的。

示例 2:
输入: poured(倾倒香槟总杯数) = 2, query_glass(杯子的位置数) = 1, query_row(行数) = 1
输出: 0.50000
解释: 我们在顶层（下标是（0，0）倒了两杯香槟后，有一杯量的香槟将从顶层溢出，位于（1，0）的玻璃杯和（1，1）的玻璃杯平分了这一杯香槟，所以每个玻璃杯有一半的香槟。

示例 3:

输入: poured = 100000009, query_row = 33, query_glass = 17
输出: 1.00000

 

提示:

  • 0 <= poured <= 109
  • 0 <= query_glass <= query_row < 100

【爪哇缪斯】图解LeetCode

✇LeetCode 每日一题题解
muse-77

解题思路

1> 采用二维dp[][]计算

我们创建一个二维数组dp[i][j]，其中，i表示行号，j表示酒杯编号。

根据题目描述，我们可以知道，针对于第row行第column列（dp[row][column]）的这个酒杯，有机会能够注入到它的“上层”酒杯只会是dp[row-1][column-1]和dp[row-1][column]，那么这里是“有机会”，因为只有这两个酒杯都满了（减1）的情况下，才会注入到dp[row][column]这个酒杯中，所以，我们可以得到状态转移方程为：

dp[row][column] = Math.max(dp[row-1][column-1]-1, 0)/2 + Math.max(dp[row-1][column]-1, 0)/2。

那么我们从第一行开始计算，逐一可以计算出每一行中每一个酒杯的容量，那么题目的结果就显而易见了。具体操作，如下图所示：

image.png

2> 采用一维dp[]计算

由于题目只需要获取第query_row行的第query_glass编号的酒杯容量，那么我们其实只需要关注第query_row行的酒杯容量即可，所以，用一维数组dp[]来保存最新计算的那个行中每个酒杯的容量。

计算方式与上面的解法相似，此处就不赘述了。

代码实现

1> 采用二维dp[][]计算

###java

class Solution {
    public double champagneTower(int poured, int query_row, int query_glass) {
        double[][] dp = new double[query_row + 2][query_row + 2];
        dp[1][1] = poured; // 为了方式越界，下标（0,0）的酒杯我们存放在dp[1][1]的位置上
        for (int row = 2; row <= query_row + 1; row++) {
            for (int column = 1; column <= row; column++) {
                dp[row][column] = Math.max(dp[row - 1][column - 1] - 1, 0) / 2 + Math.max(dp[row - 1][column] - 1, 0) / 2;
            }
        }
        return Math.min(dp[query_row + 1][query_glass + 1], 1);
    }
}

image.png

2> 采用一维dp[]计算

###java

class Solution {
    public double champagneTower(int poured, int query_row, int query_glass) {
        double[] dp = new double[query_glass + 2]; // 第i层中每个glass的容量
        dp[0] = poured; // 第0层的第0个编号酒杯倾倒香槟容量
        int row = 0;
        while (row < query_row) { // 获取第query_row行，只需要遍历到第query_row减1行即可。
            for (int glass = Math.min(row, query_glass); glass >= 0; glass--) { 
                double overflow = Math.max(dp[glass] - 1, 0) / 2.0;
                dp[glass] = overflow; // 覆盖掉旧值
                dp[glass + 1] += overflow; // 由于是倒序遍历，所以对于dp[glass + 1]要执行“+=”操作
            }
            row++; // 计算下一行
        }
        return Math.min(dp[query_glass], 1); // 如果倾倒香槟容量大于1，则只返回1.
    }
}

image.png

今天的文章内容就这些了：

写作不易，笔者几个小时甚至数天完成的一篇文章，只愿换来您几秒钟的 点赞 & 分享 。

更多技术干货，欢迎大家关注公众号“爪哇缪斯” ~ \(^o^)/ ~ 「干货分享，每天更新」

【宫水三叶】简单线性 DP 运用题

✇LeetCode 每日一题题解
AC_OIer

线性 DP

为了方便，我们令 poured 为 k，query_row 和 query_glass 分别为 $n$ 和 $m$。

定义 $f[i][j]$ 为第 $i$ 行第 $j$ 列杯子所经过的水的流量（而不是最终剩余的水量）。

起始我们有 $f[0][0] = k$，最终答案为 $\min(f[n][m], 1)$。

不失一般性考虑 $f[i][j]$ 能够更新哪些状态：显然当 $f[i][j]$ 不足 $1$ 的时候，不会有水从杯子里溢出，即 $f[i][j]$ 将不能更新其他状态；当 $f[i][j]$ 大于 $1$ 时，将会有 $f[i][j] - 1$ 的水会等量留到下一行的杯子里，所流向的杯子分别是「第 $i + 1$ 行第 $j$ 列的杯子」和「第 $i + 1$ 行第 $j + 1$ 列的杯子」，增加流量均为 $\frac{f[i][j] - 1}{2}$，即有 $f[i + 1][j] += \frac{f[i][j] - 1}{2}$ 和 $f[i + 1][j + 1] += \frac{f[i][j] - 1}{2}$。

代码：

###Java

class Solution {
    public double champagneTower(int k, int n, int m) {
        double[][] f = new double[n + 10][n + 10];
        f[0][0] = k;
        for (int i = 0; i <= n; i++) {
            for (int j = 0; j <= i; j++) {
                if (f[i][j] <= 1) continue;
                f[i + 1][j] += (f[i][j] - 1) / 2;
                f[i + 1][j + 1] += (f[i][j] - 1) / 2;
            }
        }
        return Math.min(f[n][m], 1);
    }
}

###TypeScript

function champagneTower(k: number, n: number, m: number): number {
    const f = new Array<Array<number>>()
    for (let i = 0; i < n + 10; i++) f.push(new Array<number>(n + 10).fill(0))
    f[0][0] = k
    for (let i = 0; i <= n; i++) {
        for (let j = 0; j <= i; j++) {
            if (f[i][j] <= 1) continue
            f[i + 1][j] += (f[i][j] - 1) / 2
            f[i + 1][j + 1] += (f[i][j] - 1) / 2
        }
    }
    return Math.min(f[n][m], 1)
}

###Python3

class Solution:
    def champagneTower(self, k: int, n: int, m: int) -> float:
        f = [[0] * (n + 10) for _ in range(n + 10)]
        f[0][0] = k
        for i in range(n + 1):
            for j in range(i + 1):
                if f[i][j] <= 1:
                    continue
                f[i + 1][j] += (f[i][j] - 1) / 2
                f[i + 1][j + 1] += (f[i][j] - 1) / 2
        return min(f[n][m], 1)
  • 时间复杂度：$O(n^2)$
  • 空间复杂度：$O(n^2)$

最后

如果有帮助到你，请给题解点个赞和收藏，让更多的人看到 ~ ("▔□▔)/

也欢迎你 关注我，提供写「证明」&「思路」的高质量题解。

所有题解已经加入 刷题指南，欢迎 star 哦 ~

广州市医疗保障局发布关于征集定点零售药店药品“阴阳价格”等违规问题线索的公告

✇36氪
广州市医疗保障局发布关于征集定点零售药店药品“阴阳价格”等违规问题线索的公告，公告指出，定点零售药店对参保人和非参保人实行“阴阳价格”（即同一药品对参保人销售价格高于对非参保人销售价格）属于违法违规使用医保基金的行为，医保部门鼓励广大群众积极提供有关问题线索，参与定点零售药店“阴阳价格”治理。

html翻页时钟 效果

✇掘金 前端
大时光 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Flip Clock</title>
  <style>
    body {
      background: #111;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      font-family: 'Courier New', monospace;
      color: white;
    }

    .clock {
      display: flex;
      gap: 20px;
    }

    .card-container {
      width: 80px;
      height: 120px;
      position: relative;
      perspective: 500px;
      background: #2c292c;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    }

    /* 中间分割线 */
    .card-container::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      height: 4px;
      background: #120f12;
      z-index: 10;
    }

    .card-item {
      position: absolute;
      width: 100%;
      height: 50%;
      left: 0;
      overflow: hidden;
      background: #2c292c;
      color: white;
      text-align: center;
      font-size: 64px;
      font-weight: bold;
      backface-visibility: hidden;
      transition: transform 0.4s ease-in-out;
    }

    /* 下层数字：初始对折（背面朝上） */
    .card1 { /* 下层上半 */
      top: 0;
      line-height: 120px; /* 整体高度对齐 */
    }
    .card2 { /* 下层下半 */
      top: 50%;
      line-height: 0;
      transform-origin: center top;
      transform: rotateX(180deg);
      z-index: 2;
    }

    /* 上层数字：当前显示 */
    .card3 { /* 上层上半 */
      top: 0;
      line-height: 120px;
      transform-origin: center bottom;
      z-index: 3;
    }
    .card4 { /* 上层下半 */
      top: 50%;
      line-height: 0;
      z-index: 1;
    }

    /* 翻页动画触发 */
    .flip .card2 {
      transform: rotateX(0deg);
    }
    .flip .card3 {
      transform: rotateX(-180deg);
    }

    /* 冒号分隔符 */
    .colon {
      font-size: 64px;
      display: flex;
      align-items: center;
      color: #aaa;
    }
  </style>
</head>
<body>
  <div class="clock">
    <div class="card-container flip" id="hour" data-number="00">
      <div class="card1 card-item">00</div>
      <div class="card2 card-item">00</div>
      <div class="card3 card-item">00</div>
      <div class="card4 card-item">00</div>
    </div>

    <div class="colon">:</div>

    <div class="card-container flip" id="minute" data-number="00">
      <div class="card1 card-item">00</div>
      <div class="card2 card-item">00</div>
      <div class="card3 card-item">00</div>
      <div class="card4 card-item">00</div>
    </div>

    <div class="colon">:</div>

    <div class="card-container flip" id="second" data-number="00">
      <div class="card1 card-item">00</div>
      <div class="card2 card-item">00</div>
      <div class="card3 card-item">00</div>
      <div class="card4 card-item">00</div>
    </div>
  </div>

  <script>
    function setHTML(dom, nextValue) {
      const curValue = dom.dataset.number;
      if (nextValue === curValue) return;

      // 更新 DOM 结构：下层为新值，上层为旧值
      dom.innerHTML = `
        <div class="card1 card-item">${nextValue}</div>
        <div class="card2 card-item">${nextValue}</div>
        <div class="card3 card-item">${curValue}</div>
        <div class="card4 card-item">${curValue}</div>
      `;

      // 触发重绘以重启动画
      dom.classList.remove('flip');
      void dom.offsetWidth; // 强制重排
      dom.classList.add('flip');

      dom.dataset.number = nextValue;
    }

    function updateClock() {
      const now = new Date();
      const h = String(now.getHours()).padStart(2, '0');
      const m = String(now.getMinutes()).padStart(2, '0');
      const s = String(now.getSeconds()).padStart(2, '0');

      setHTML(document.getElementById('hour'), h);
      setHTML(document.getElementById('minute'), m);
      setHTML(document.getElementById('second'), s);
    }

    // 初始化
    updateClock();
// setTimeout(updateClock,1000)

    setInterval(updateClock, 1000);
  </script>
</body>
</html>

在这里插入图片描述 这个翻页时钟（Flip Clock）通过 CSS 3D 变换 + 动画类切换 + DOM 内容动态更新 的方式，模拟了类似机械翻页牌的效果。下面从结构、样式和逻辑三方面详细分析其实现原理：

🔧 一、HTML 结构设计

每个时间单位（小时、分钟、秒）由一个 .card-container 容器表示，内部包含 4 个 .card-item 元素：

<div class="card-container" id="second">
  <div class="card1">00</div> <!-- 下层上半 -->
  <div class="card2">00</div> <!-- 下层下半（初始翻转180°）-->
  <div class="card3">00</div> <!-- 上层上半（当前显示）-->
  <div class="card4">00</div> <!-- 上层下半 -->
</div>

四个卡片的作用：

  • .card3 和 .card4：组成当前显示的数字（上半+下半），正常显示。
  • .card1 和 .card2：组成即将翻出的新数字，但初始时 .card2 被 rotateX(180deg) 翻转到背面（不可见）。
  • 中间有一条 ::before 伪元素作为“折痕”，增强翻页视觉效果。

🎨 二、CSS 样式与 3D 翻转原理

关键 CSS 技术点：

1. 3D 空间设置 

.card-container {
  perspective: 500px; /* 创建 3D 视角 */
}
  • perspective 让子元素的 3D 变换有景深感。

2. 上下两半的定位与旋转轴 

.card2 {
  transform-origin: center top;
  transform: rotateX(180deg); /* 初始翻到背面 */
}
.card3 {
  transform-origin: center bottom;
}
  • .card2 绕顶部边缘旋转 180°，藏在下方背面。
  • .card3 绕底部边缘旋转，用于向上翻折。

3. 翻页动画（通过 .flip 类触发） 

.flip .card2 {
  transform: rotateX(0deg); /* 展开新数字下半部分 */
}
.flip .card3 {
  transform: rotateX(-180deg); /* 当前数字上半部分向上翻折隐藏 */
}
  • 动画持续 0.4s，使用 ease-in-out 缓动。
  • .card1 和 .card4 始终保持静态，作为背景支撑。

✅ 视觉效果：

  • 上半部分（.card3）向上翻走（像书页翻开）
  • 下半部分（.card2）从背面转正，露出新数字
  • 中间的“折痕”让翻页更真实

⚙️ 三、JavaScript 动态更新逻辑

核心函数：setHTML(dom, nextValue)

步骤分解：

  1. 对比新旧值：如果相同，不更新（避免无谓动画）。
  2. 重写整个容器的 HTML：
    • 下层（新值）：.card1 和 .card2 显示 nextValue
    • 上层（旧值）：.card3 和 .card4 显示 curValue
  3. 触发动画： 
    dom.classList.remove('flip');
void dom.offsetWidth; // 强制浏览器重排（关键！）
dom.classList.add('flip');
    • 先移除 .flip，再强制重排（flush styles），再加回 .flip，确保动画重新触发。
  4. 更新 data-number 保存当前值。

时间更新：

  • 每秒调用 updateClock()，获取当前时分秒（两位数格式）。
  • 分别调用 setHTML 更新三个容器。

🌟 四、为什么能实现“翻页”错觉？

元素 初始状态 翻页后状态 视觉作用
.card3 显示旧数字上半 向上翻转 180° 隐藏 模拟“翻走”的上半页
.card2 旧数字下半（翻转180°藏起） 转正显示新数字下半 模拟“翻出”的下半页
.card1 / .card4 静态背景 不变 提供视觉连续性

💡 关键技巧：

  • 利用 两个完整数字（新+旧）叠加，通过控制上下半部分的旋转，制造“翻页”而非“淡入淡出”。
  • 强制重排（offsetWidth） 是确保 CSS 动画每次都能重新触发的经典 hack。

✅ 总结

这个 Flip Clock 的精妙之处在于：

  1. 结构设计：4 个卡片分工明确，上下层分离。
  2. CSS 3D：利用 rotateX + transform-origin 实现真实翻页。
  3. JS 控制：动态替换内容 + 巧妙触发动画。
  4. 性能优化：仅在值变化时更新，避免无效渲染。

这是一种典型的 “用 2D DOM 模拟 3D 物理效果” 的前端动画范例，既高效又视觉惊艳。

js 封装 动画效果

✇掘金 前端
大时光 
/**
 * 通用动画函数
 * @param {Object} options 配置对象
 * @param {number} [options.duration] 动画持续时间 (毫秒)，如果提供则优先使用
 * @param {number} [options.speed] 动画速度 (单位/毫秒)，当未提供 duration 时生效
 * @param {number} options.from 起始值，默认为 0
 * @param {number} options.to 结束值
 * @param {Function} [options.callback] 每一帧的回调函数，接收 (currentValue, progress) 作为参数
 * @param {Function} [options.onComplete] 动画结束时的回调函数
 * @param {Function} [legacyCallback] 兼容旧调用的第二个参数作为回调
 * @returns {Function} 取消动画的函数
 */
let animateMoveFn = ({ duration, speed, from, to, callback, onComplete }) => {
 
    // --- 参数类型校验开始 ---
    
    // 校验 from
    if (from === undefined || from === null) {
        console.error(`animateMoveFn: "from" 必须是数字且必填。当前值: ${from}。动画将不执行。`);
        return () => { }; // 返回空的取消函数
    }
    if (typeof from !== 'number' || isNaN(from)) {
        console.warn(`animateMoveFn: "from" 必须是数字。当前值: ${from}。已重置为 0。`);
        return () => { }; // 返回空的取消函数
    }

    // 校验 to
    if (to === undefined || to === null) {
        console.error(`animateMoveFn: "to" 必须是数字且必填。当前值: ${to}。动画将不执行。`);
        return () => { }; // 返回空的取消函数
    }
    if (typeof to !== 'number' || isNaN(to)) {
        console.warn(`animateMoveFn: "to" 必须是数字。当前值: ${to}。已重置为 0。`);
        return () => { }; // 返回空的取消函数
    }

    // 校验 duration
    if (duration !== undefined && duration !== null) {
        if (typeof duration !== 'number' || isNaN(duration) || duration < 0) {
            console.warn(`animateMoveFn: "duration" 必须是非负数字。当前值: ${duration}。将忽略此参数。`);
            duration = undefined;
        }
    }

    // 校验 speed
    if (speed !== undefined && speed !== null) {
        if (typeof speed !== 'number' || isNaN(speed) || speed <= 0) {
            console.warn(`animateMoveFn: "speed" 必须是正数字。当前值: ${speed}。将忽略此参数。`);
            speed = undefined;
        }
    }

    // 校验 callback
    if (callback !== undefined && typeof callback !== 'function') {
        console.warn(`animateMoveFn: "callback" 必须是函数。当前类型: ${typeof callback}。`);
        callback = null;
    }

    // 校验 onComplete
    if (onComplete !== undefined && typeof onComplete !== 'function') {
        console.warn(`animateMoveFn: "onComplete" 必须是函数。当前类型: ${typeof onComplete}。`);
        onComplete = null;
    }

    // --- 参数类型校验结束 ---

    // 记录动画开始的时间戳
    let startTime = Date.now();

    // 存储当前的 requestAnimationFrame ID，用于取消动画
    let reqId = null;

    // 动画是否已取消的标志
    let isCancelled = false;

    // 核心动画循环函数
    let moveFn = () => {
        
        // 如果动画已取消，直接退出
        if (isCancelled) return;

        // 计算从开始到现在经过的时间
        let elapsed = Date.now() - startTime;

        // 当前动画进度 (0 到 1 之间)
        let progress = 0;

        if (duration && duration > 0) {
            // 模式 1: 基于持续时间 (Duration-based)
            progress = elapsed / duration;
        } else if (speed && speed > 0) {
            // 模式 2: 基于速度 (Speed-based)
            // 计算总距离
            let totalDistance = Math.abs(to - from);
            if (totalDistance === 0) {
                progress = 1;
            } else {
                // 已移动距离 = 速度 * 时间
                let coveredDistance = speed * elapsed;
                progress = coveredDistance / totalDistance;
            }
        } else {
            // 既无 duration 也无 speed，或者值无效，默认直接完成
            progress = 1;
        }

        // 确保进度不超过 1
        if (progress > 1) progress = 1;

        // 计算当前值：起始值 + (总变化量 * 进度)
        // 使用线性插值 (Linear Interpolation)
        let currentValue = from + (to - from) * progress;

        // 执行回调，将当前值和进度传递出去
        if (callback) {
            callback(currentValue, progress);
        }

        // 检查动画是否结束
        if (progress < 1) {
            // 动画未结束，请求下一帧
            reqId = requestAnimationFrame(moveFn);
        } else {
            // 动画结束
            onComplete(currentValue, progress);
        }
    };

    // 启动动画
    reqId = requestAnimationFrame(moveFn);

    // 返回一个取消函数，外部调用它可以立即停止动画
    return () => {
        isCancelled = true;
        if (reqId) {
            cancelAnimationFrame(reqId);
        }
    };
};

// 兼容旧的命名（如果项目中有其他地方用到）
window.animateMoeveFn = animateMoveFn;
window.animateMoveFn = animateMoveFn;


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation Test</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
        }
        .box {
            width: 50px;
            height: 50px;
            background-color: #e74c3c;
            position: relative;
            margin-bottom: 30px;
            border-radius: 4px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 12px;
        }
        .controls {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 10px;
            margin-bottom: 20px;
        }
        button {
            padding: 10px 15px;
            cursor: pointer;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 14px;
            transition: background 0.2s;
        }
        button:hover {
            background-color: #2980b9;
        }
        button.cancel {
            background-color: #e67e22;
        }
        button.cancel:hover {
            background-color: #d35400;
        }
        #output {
            padding: 15px;
            border: 1px solid #ddd;
            background: #f8f9fa;
            max-height: 300px;
            overflow-y: auto;
            font-family: 'Consolas', monospace;
            font-size: 13px;
            border-radius: 4px;
        }
        .log-entry {
            margin-bottom: 4px;
            border-bottom: 1px solid #eee;
            padding-bottom: 2px;
        }
        .log-time {
            color: #888;
            margin-right: 8px;
        }
        .log-success { color: #27ae60; font-weight: bold; }
        .log-warn { color: #e67e22; }
        .log-error { color: #c0392b; }
    </style>
</head>
<body>

    <h1>Animation Test for ani.js</h1>

    <div class="box" id="testBox">0</div>

    <div class="controls">
        <button id="btnDuration">1. 时长模式 (Duration)</button>
        <button id="btnSpeed">2. 速度模式 (Speed)</button>
        <button id="btnReverse">3. 反向动画 (Reverse)</button>
        <button id="btnOnComplete">4. 完整回调 (onComplete)</button>
        <button id="btnPriority">5. 优先级 (Duration > Speed)</button>
        <button id="btnError">6. 错误参数测试 (Check Console)</button>
        <button id="btnCancel" class="cancel">7. 中途取消 (Cancel)</button>
        <button id="btnClearLog" style="background:#95a5a6">清除日志</button>
    </div>

    <div id="output">日志准备就绪...</div>

    <script src="./js/ani.js"></script>
    <script>
        const box = document.getElementById('testBox');
        const output = document.getElementById('output');
        let currentCancelFn = null;

        function log(msg, type = 'normal') {
            const div = document.createElement('div');
            div.className = 'log-entry';
            
            const timeSpan = document.createElement('span');
            timeSpan.className = 'log-time';
            timeSpan.textContent = `[${new Date().toLocaleTimeString()}]`;
            
            const msgSpan = document.createElement('span');
            msgSpan.textContent = msg;
            
            if (type === 'success') msgSpan.className = 'log-success';
            if (type === 'warn') msgSpan.className = 'log-warn';
            if (type === 'error') msgSpan.className = 'log-error';

            div.appendChild(timeSpan);
            div.appendChild(msgSpan);
            output.prepend(div);
        }

        function reset(startVal = 0) {
            if (currentCancelFn) {
                currentCancelFn();
                currentCancelFn = null;
                log('上一个动画已终止', 'warn');
            }
            box.style.left = startVal + 'px';
            box.textContent = Math.round(startVal);
        }

        // 1. 基础时长模式
        document.getElementById('btnDuration').onclick = () => {
            reset(0);
            log('测试1: 基于 Duration (0 -> 500px, 1000ms)');
            
            currentCancelFn = animateMoveFn({
                duration: 1000,
                from: 0,
                to: 500,
                callback: (val) => {
                    box.style.left = val + 'px';
                    box.textContent = Math.round(val);
                },
                onComplete: (val) => {
                    log(`动画结束: 到达 ${val}px`, 'success');
                }
            });
        };

        // 2. 速度模式
        document.getElementById('btnSpeed').onclick = () => {
            reset(0);
            log('测试2: 基于 Speed (0 -> 500px, speed: 0.5px/ms)');
            log('预期耗时: 500 / 0.5 = 1000ms');

            currentCancelFn = animateMoveFn({
                speed: 0.5, // 0.5px per ms = 500px per second
                from: 0,
                to: 500,
                callback: (val) => {
                    box.style.left = val + 'px';
                    box.textContent = Math.round(val);
                },
                onComplete: (val) => {
                    log(`动画结束: 到达 ${val}px`, 'success');
                }
            });
        };

        // 3. 反向动画
        document.getElementById('btnReverse').onclick = () => {
            reset(500);
            log('测试3: 反向动画 (500 -> 0px, speed: 1px/ms)');
            
            currentCancelFn = animateMoveFn({
                speed: 1, // 1000px/s, fast!
                from: 500,
                to: 0,
                callback: (val) => {
                    box.style.left = val + 'px';
                    box.textContent = Math.round(val);
                },
                onComplete: () => log('反向动画结束', 'success')
            });
        };

        // 4. onComplete 测试
        document.getElementById('btnOnComplete').onclick = () => {
            reset(0);
            log('测试4: 测试 onComplete 回调');
            
            currentCancelFn = animateMoveFn({
                duration: 500,
                from: 0,
                to: 200,
                callback: (val) => {
                    box.style.left = val + 'px';
                    box.textContent = Math.round(val);
                },
                onComplete: (val, progress) => {
                    log(`onComplete 触发! Val: ${val}, Progress: ${progress}`, 'success');
                    box.style.backgroundColor = '#2ecc71'; // 变绿
                    setTimeout(() => box.style.backgroundColor = '#e74c3c', 500); // 变回红
                }
            });
        };

        // 5. 优先级测试
        document.getElementById('btnPriority').onclick = () => {
            reset(0);
            log('测试5: 优先级测试 (传入 duration=2000 和 speed=10)');
            log('预期: 应该使用 duration (2秒)，忽略极快的 speed');

            currentCancelFn = animateMoveFn({
                duration: 2000,
                speed: 10, // 如果生效只要 50ms，如果不生效要 2000ms
                from: 0,
                to: 500,
                callback: (val) => {
                    box.style.left = val + 'px';
                    box.textContent = Math.round(val);
                },
                onComplete: () => log('动画结束 (检查耗时是否接近 2秒)', 'success')
            });
        };

        // 6. 错误参数测试
        document.getElementById('btnError').onclick = () => {
            reset(0);
            log('测试6: 错误参数 (请查看浏览器控制台 Console)', 'warn');
            
            // Case A: 缺少 to
            log('Case A: 缺少 "to" 参数 -> 应该报错不执行');
            animateMoveFn({ duration: 1000, from: 0 });

            // Case B: 错误的 duration
            // setTimeout(() => {
            //     log('Case B: duration 为字符串 -> 应该警告并忽略');
            //     animateMoveFn({ 
            //         duration: "invalid", 
            //         speed: 1, // 备用方案
            //         from: 0, 
            //         to: 100,
            //         callback: (v) => box.style.left = v + 'px'
            //     });
            // }, 500);
        };

        // 7. 取消测试
        document.getElementById('btnCancel').onclick = () => {
            reset(0);
            log('测试7: 启动并在 500ms 后取消');

            currentCancelFn = animateMoveFn({
                duration: 2000,
                from: 0,
                to: 800,
                callback: (val) => {
                    box.style.left = val + 'px';
                    box.textContent = Math.round(val);
                },
                onComplete: () => log('ERROR: 动画不应该完成!', 'error')
            });

            setTimeout(() => {
                if (currentCancelFn) {
                    currentCancelFn();
                    currentCancelFn = null;
                    log('已调用 cancel()', 'warn');
                }
            }, 500);
        };

        document.getElementById('btnClearLog').onclick = () => {
            output.innerHTML = '';
            log('日志已清空');
        };

    </script>
</body>
</html>

在这里插入图片描述

ani.js 动画库实现原理解析教程

本教程将带你深入了解 ani.js 的实现原理。这是一个轻量级的通用动画函数，旨在通过精确的时间控制来实现平滑的数值过渡效果。它不仅支持传统的时长模式 (Duration)，还创新地引入了速度模式 (Speed)，非常适合用于 UI 交互、游戏开发或任何需要动态数值变化的场景。

1. 核心设计理念

ani.js 的核心思想是基于时间 (Time-based) 而非基于帧数 (Frame-based)。

  • 基于帧数：每一帧增加固定的数值。如果设备卡顿，掉帧会导致动画变慢，总时长不可控。
  • 基于时间：根据当前时间与开始时间的差值 (elapsed) 来计算当前应处的位置。无论帧率如何波动，动画总是在预定的时间到达终点，保证了动画的流畅性和同步性。

2. 函数签名与参数设计

函数采用单一对象参数 options 的设计模式，这使得参数扩展变得非常灵活，同时保持了调用的清晰度。

let animateMoveFn = ({ 
    duration,   // 动画持续时间 (毫秒)
    speed,      // 动画速度 (单位/毫秒)
    from = 0,   // 起始值 (默认为 0)
    to,         // 结束值 (必填)
    callback,   // 每帧回调：(currentValue, progress) => {}
    onComplete  // 结束回调：(finalValue, progress) => {}
}) => { ... }

亮点分析：

  • 双模式驱动：
    1. 时长优先：如果你提供了 duration，动画将严格在指定时间内完成。
    2. 速度优先：如果你未提供 duration 但提供了 speed，函数会自动根据 Math.abs(to - from) 计算所需时间。
  • 健壮性校验：函数内部对所有参数进行了严格的类型检查（如 typeof, isNaN），确保无效参数不会导致运行时错误，并提供友好的控制台警告。

3. 核心实现深度解析

3.1 动画循环 (The Loop)

动画引擎的心脏是 requestAnimationFrame。它比 setInterval 更高效，因为它会跟随浏览器的刷新率（通常是 60Hz），并在后台标签页暂停执行以节省电量。

let startTime = Date.now();
let moveFn = () => {
    // 1. 计算流逝的时间
    let elapsed = Date.now() - startTime;
    
    // 2. 计算进度 (0.0 ~ 1.0)
    // ... (核心算法见下文)

    // 3. 更新数值并绘制
    // ...

    // 4. 决定下一帧
    if (progress < 1) {
        reqId = requestAnimationFrame(moveFn);
    } else {
        // 动画结束
    }
};

3.2 进度计算策略 (The Math)

这是 ani.js 最精彩的部分。它根据输入模式动态决定进度计算方式：

模式 A：时长模式 (Duration Mode) 最常见的模式。进度等于“已过去的时间”除以“总时长”。

progress = elapsed / duration;

模式 B：速度模式 (Speed Mode) 当距离不确定，但希望保持恒定速度时使用（例如：无论滑块拖动多远，回弹速度一致）。

let totalDistance = Math.abs(to - from);
let coveredDistance = speed * elapsed; // 速度 * 时间 = 路程
progress = coveredDistance / totalDistance;

3.3 线性插值 (Linear Interpolation / Lerp)

一旦算出 progress (0 到 1 之间的浮点数)，我们就可以计算当前的数值：

// 公式：当前值 = 起始值 + (总变化量 * 进度)
let currentValue = from + (to - from) * progress;

这个公式非常强大：

  • 当 progress = 0 时，结果为 from。
  • 当 progress = 1 时，结果为 to。
  • 当 progress = 0.5 时，结果正好在中间。
  • 支持反向：即使 to < from，公式依然成立（因为 to - from 会是负数）。

3.4 生命周期管理与取消机制

为了让动画可控，函数返回了一个闭包函数 (Closure)，用于取消动画。

return () => {
    isCancelled = true; // 标志位：阻止后续帧执行
    if (reqId) cancelAnimationFrame(reqId); // 清除浏览器队列中的请求
};

这种设计允许外部代码随时打断动画（例如用户再次触发了新的动画），防止多个动画冲突。

4. 最佳实践与使用示例

场景一：基础位移 (1秒内移动到 500px)

const cancel = animateMoveFn({
    duration: 1000,
    from: 0,
    to: 500,
    callback: (val) => element.style.left = val + 'px'
});

场景二：恒定速度回弹 (无论多远，速度都是 2px/ms)

const cancel = animateMoveFn({
    speed: 2, // 2000px/s，非常快
    from: currentPosition, // 动态获取当前位置
    to: 0,
    callback: (val) => element.style.left = val + 'px'
});

场景三：防止动画冲突 (Anti-conflict)

在启动新动画前，务必取消旧动画。

let currentAnim = null;

function startNewAnim() {
    if (currentAnim) currentAnim(); // 停止旧的
    
    currentAnim = animateMoveFn({
        to: 100,
        // ...
        onComplete: () => currentAnim = null // 结束后清理引用
    });
}

5. 总结

ani.js 是一个教科书式的现代 JavaScript 动画实现。它展示了如何通过：

  1. 参数解构与默认值 来提升 API 易用性。
  2. 防御性编程 来处理无效输入。
  3. 时间轴插值算法 来保证动画平滑度。
  4. 闭包与高阶函数 来管理状态和副作用。

掌握了这个函数的实现，你就掌握了前端动画引擎的基石。

前字节高管创业教育类出海项目，用Agent做“终身学习搭子”，红杉投了

✇36氪

文｜富充

编辑｜苏建勋

2024年11月，李可佳、吴俊东、张栖铭决定一起创业，做一款“帮助用户终身学习”的AI Agent。新公司被命名为Ouraca ，是“Our Academy”的缩写。

三位合伙人都是互联网教育领域的“老兵”：

创始人兼CEO李可佳，曾任极课大数据创始人，该项目被字节跳动收购后，他入职字节智慧教育业务担任CEO；

联创吴俊东，哈佛肯尼迪学院硕士，好未来教育投资人，曾为李可佳极课大数据的投资人；

联创张栖铭，曾任字节教育中台负责人，推出过数个日活千万、月活过亿的产品。

Ouraca 公司正式创建于2025年3月，产品还未发布，就已经获得700万美元种子轮融资。股东名单中包括红杉中国、初心资本、Etna Capital等VC机构。

有趣的是，上述投资方在决定出手Ouraca时的决策速度，都非常快。李可佳回忆起，决定创业的当晚，将想法说给初心资本创始人田江川，几分钟后就收到田江川回复“那我投你”；红杉中国的投资速度也近乎如此。

“Etna Capita的投资决策几乎是在24小时内完成的，”投资人Haina Xu回忆当时的情况：“ ChatGPT的使用场景里，教育类别长期排前五，可以说教育是大语言模型带来最大改变的行业之一。人们期待全能AI Tutor很多年了，Ouraca恰好是我们看到的第一个在探索‘AI时代终身学习产品’的团队。”

2025年9月，Ouraca上线第一款应用“Aibrary”，它用名为Idea Twin的独特“AI生成播客”功能引导和陪伴用户学习。目前，Aibrary和Ouraca旗下的新产品仍在持续快速迭代。

用AI做会提问的“学习搭子”

李可佳对AI教育产品，有一套自己的判断：因为大模型可以快速生产大量内容，所以痛点并不是内容不够多，而是如何通过帮助用户向AI提出好的问题，收获高质量的答案。

在Aibrary，用户可以主动向Aibrary提问自己想要学习的话题。如果用户不知道该问什么，Aibrary会每天向用户推送3个与生活相关的话题，比如最近的一个，是关于“积少成多的小习惯“。

每个话题里，Aibrary嵌入了自己的见解，并且推荐了值得一读的阅读清单，也向人们提供书籍讲解。

但Aibrary并非又一款“X分钟给你讲本书”的APP，而是把知识变成用户感兴趣的对话，再用播客的形式说出来。

具体而言，播客分为“主持人”和“嘉宾”两个角色。用户可以选择苏格拉底、爱因斯坦等带有不同发问逻辑的主持人；而回答的“嘉宾”则是用户自己的“数字分身”（Idea Twin），这是Agent在学习用户的身份和资料之后，形成的“嘴替”一般的存在。

吴俊东举了一个最近的例子：“前段时间，关于‘人工智能是否会取代大量岗位’的讨论很热。我有一位做青年领导力的朋友向Aibrary提问该如何看待此事，Aibrary向这位朋友推荐了《未来简史》，并生成了一期播客。”

“播客中的‘嘉宾’是Agent‘扮演’的这位朋友，博客中不仅讨论了技术趋势，还结合他当前的创业方向，分析哪些能力会被替代、哪些能力会放大。最终，‘嘉宾’给出的不是抽象判断，而是基于他的背景形成的应对策略。这本书其实很多人都看过，但是Aibrary会针对每个不同人，以及同一个人的不同心境都有完全不一样的解读。”吴俊东说。

Idea Twin的灵感来自NotebookLM，那个能把论文、财报变成双人对话播客的产品。

2024年，李可佳在体验过NotebookLM后就意识到，AI产品的胜负手不仅在于“模型更强”，而在“交互形式”——声音这种模态，会让知识交付出现新的可用性。

但李可佳觉得，NotebookLM的体验还差临门一脚：它像一个万能工具，只是用户得自己找材料、自己提问、自己规划路径。而很多数人并不知道要问什么。

Aibrary的播客，正是填补了这个Gap：先替用户进行高质量提问，再把知识答出来。

△Aibrary提供的功能包括书籍推荐、书籍讲解生成、Idea Twin播客等，图片：采访人提供

找准“持续学习”用户，解决“大量小问题”

关于如何做好用户体验、提升用增和留存，李可佳总结出Aibrary的Know-how：做好大量小问题。

最基础的一步，是要输出值得信赖的内容：书用哪个版本做数据源更可靠、网络上围绕一本书的海量观点怎么清洗……这意味着大量数据收集、标注类的工程化任务要做细致。

此外，要让用户觉得Agent“懂自己”，这来自AI对用户信息和用户行为的学习。

Aibrary使用者在注册时，会填入描述年龄、职业、目标、困惑。这是AI了解用户的基础，此后会随着交互和对话变多，学习越来越多的用户信息。

但一款好产品的基础，离不开对目标用户需求的精准把控。

李可佳和吴俊东都认为，前AI时代的教育产品，还是在追求“更少老师教更多学生”的极致效率。“但AI越强，那些能被规范化培养的技能就过期越快，比如律师助理、基础编程、客服。”李可佳说。

因此，新一代教育产品要挖掘有持续学习目标的用户，并非为了考试和培训而学习的使用者。

为了找准用户人群，Aibrary成立之前就做了大量调研。主创团队先在身边或LinkedIn等求职、社交平台发放问卷，整理用户需求，并且逐步确立三类核心人群：Busy Professionals（繁忙的职场中坚力量）、刚毕业或还在读书的年轻人、以及宝爸宝妈——后者往往脱离职场，但又不想被时代甩下，因此使用碎片时间学习。

Aibrary团队还会一对一大量访谈早期用户。

这些用户中既有得过癌症的全职妈妈，希望在这里找到解决日常生活瓶颈的方法；也有管理着40个员工的仓储公司老板，想要学习怎么和女朋友相处；甚至是在酒店工作、想转行做医药的移民，这位用户还因为自己英语不太好，拼写总是出错而道歉。

这也让Aibrary团队更加确定：“持续学习”在北美并不是一项“精英意愿”；在这里，更普遍的人群希望获得“持续成长的确定感”。这也是团队把首站市场设置为美国的原因。

李可佳和吴俊东很认可Insta360创始人刘靖康的思路：先从与自己相似的一小群人出发，抓住一个足够具体的需求把它做到极致，产品哪怕起步小众，也有可能在扎稳核心人群后逐步外扩。

选择书籍作为切口，核心原因是主创团队本身都很喜欢阅读。两位成长经历几乎全然不同的创始人，都认可书籍是普世的智慧来源。

吴俊东从江西小城长大，学生时代最主要的“扩展视野”方式就是读书；李可佳家里有一个巨大的书柜，也从小酷爱阅读。

二人回忆起，刚刚在硅谷创业起步时，日常娱乐并不多，晚上散步常常不约而同走进街角的小书店，随手翻几页。

对他们来说，在容易过时的技能和不断追逐最新前沿的信息之间，书中的科学、哲学、艺术、美等等知识可以穿越周期，让人的内心变得丰盈。

为了触达目标客户，Aibrary团队的市场开拓同时分为“空军”和“陆军”。

空军是LinkedIn、YouTube，Aibrary把创业故事做成播客发布在这些平台，坦诚地讨论踩过的坑，和用户形成共鸣；陆军是美国本土读书会、高校的落地合作。

“我在字节和互联网创业时，积累了不少中国C端产品的推广经验，这些放到美国依然是有效的。”李可佳说，“直播、社群、投流等等打法，中国团队上手更快。”

△团队在硅谷创业初期经常去的Mountain View老牌书店Books Inc.，图片：采访人提供

持续学习新范式：从人到Agent

有趣之处在于，Ouraca终身学习的用户，不一定是人类，也可能是Agent。Ouraca旗下新产品BotLearn的出现，就是这条路的进一步探索。

Clawdbot（现已更名为“OpenClaw”）爆火之后，Ouraca团队快速推出了BotLearn——一个“Agent的持续学习社群”，团队称之为“Bot大学”

用户可以通过将代码复制给自己OpenClaw的Agent，把Agent“送到”BotLearn学习。

△BotLearn页面，图片：网页截图

在这里，Agent间会互相分享。比如某个Agent学会了高效抓取某垂类信息的方法，它可以把这套方法发布到社区，其他Agent在这里学习、复用、再补充心得。

项目上线一天内就吸引了近500个Agents“入学”。登录BotLearn，还可以查看Agent们发布的“学习心得”。

尽管产品形态仍在早期，Etna投资人Penny Deng却认为这是一枚对的种子：

“Agent在2026年会大爆发，产生很多我们想象不到的变化。以前以人为主体设计的产品，可能需要以Agent为主体重新设计一遍。

OpenClaw发布后，Ouraca是反应最快的团队之一——他们立刻以Agent为主体设计了BotLearn。Agents之间互相交换技能、互相学习，再反哺给人类。这种网络效应在传统教育产品里从未出现过。”

△Agent在BotLearn发布的学习心得，图片：网页截图

深圳证监局责令深圳市启富证券投资顾问有限公司改正

✇36氪
深圳市启富证券投资顾问有限公司因未依法备案即开展业务、营销过程中存在误导性宣传、合规管理不到位、投资者适当性管理不到位等问题，被深圳证监局采取责令改正的监管措施。公司需在30日内提交书面整改报告。

中国创新药对外授权年交易额突破千亿美元，4年增长近10倍

✇36氪
中国生物制药公司参与的新药对外许可授权交易在2025年再次创下历史新高，并突破了千亿美元大关。根据数据提供商Pharmcube的最新数据，2025年，中国企业签署了1377亿美元总规模的对外许可交易，较2021年增长了近10倍，交易数量达到186项。包括诺华、阿斯利康和GSK在内的全球制药巨头去年与中国企业签署了多项重大协议。美国银行证券亚太区并购主管汤姆·巴沙（Tom Barsha）预测，这些授权交易的总价值有望在未来18至24个月内再次翻番。“全球制药公司正高度关注在中国寻找下一代创新药物研发管线，并正在考虑各种交易结构。”巴沙表示。

gsap 配置解读 --7

✇掘金 前端
大时光

什么是registerEffect

 <div class="card">
      <h1>案例 41：registerEffect 自定义效果</h1>
      <p>封装常用动画为可复用效果。</p>
      <div class="row">
        <div class="box" id="boxA"></div>
        <div class="box" id="boxB"></div>
        <div class="box" id="boxC"></div>
      </div>
      <button id="play">播放效果</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/gsap.min.js"></script>
    <script>
      const playButton = document.querySelector("#play");

      // 注册自定义效果
      gsap.registerEffect({
        name: "popIn",
        effect: (targets, config) => {
          return gsap.fromTo(
            targets,
            { scale: 0.6, opacity: 0 },
            {
              scale: 1,
              opacity: 1,
              duration: config.duration,
              stagger: config.stagger,
              ease: config.ease
            }
          );
        },
        defaults: { duration: 0.6, stagger: 0.08, ease: "back.out(1.6)" },
        extendTimeline: true
      });

      playButton.addEventListener("click", () => {
        gsap.effects.popIn(".box");
      });
    </script>

gsap.registerEffect() 是 GSAP（GreenSock Animation Platform） 提供的一个强大功能，用于将常用的动画逻辑封装成可复用、可配置的“自定义效果”（custom effect），就像创建自己的动画“函数库”一样。

📌 简单定义：

registerEffect 允许你定义一个命名动画模板（如 "popIn"），之后通过 gsap.effects.effectName(targets, config) 一行代码即可在任意地方调用它，实现代码复用、语义化和团队协作标准化。

✅ 核心作用：

1. 封装复杂动画逻辑

把重复的 fromTo、timeline 等逻辑打包成一个“黑盒”。

2. 支持参数配置

通过 config 对象传入自定义参数（如 duration、stagger）。

3. 提供默认值

通过 defaults 设置常用参数的默认值，调用时可省略。

4. 无缝集成 GSAP 生态
  • 可用于 Timeline
  • 支持 stagger
  • 返回动画实例（可 play/pause/reverse）

🔧 在你的代码中：

gsap.registerEffect({
  name: "popIn", // 效果名称
  effect: (targets, config) => {
    return gsap.fromTo(
      targets,
      { scale: 0.6, opacity: 0 },
      {
        scale: 1,
        opacity: 1,
        duration: config.duration,
        stagger: config.stagger,
        ease: config.ease
      }
    );
  },
  defaults: { 
    duration: 0.6, 
    stagger: 0.08, 
    ease: "back.out(1.6)" 
  },
  extendTimeline: true // 允许在 Timeline 中直接使用 .popIn()
});

然后调用：

gsap.effects.popIn(".box"); // 所有 .box 元素执行 popIn 动画

效果：

  • 三个盒子依次从小且透明放大到正常尺寸；
  • 带有弹性回弹（back.out 缓动）；
  • 每个盒子延迟 0.08s 启动（stagger）。

🌟 优势 vs 普通函数封装：

普通函数 registerEffect
需手动管理返回值 ✅ 自动注册到 gsap.effects 命名空间
无法在 Timeline 中直接使用 ✅ 开启 extendTimeline: true 后可用 tl.popIn(...)
参数处理需自己写 ✅ 自动合并 config 与 defaults
团队协作需文档说明 ✅ 效果名称即文档（gsap.effects.popIn 语义清晰）

⚙️ 参数详解：

字段 说明
name 效果名称（字符串），注册后可通过 gsap.effects[name] 调用
effect(targets, config) 动画工厂函数： - targets: DOM 元素或选择器 - config: 用户传入的配置对象
defaults 默认配置（会被 config 覆盖）
extendTimeline 若为 true，可在 Timeline 实例上直接调用该效果： timeline.popIn(".box")

🛠️ 更多使用方式：

1. 传入自定义参数 
gsap.effects.popIn(".item", {
  duration: 1,
  stagger: 0.2,
  ease: "elastic.out(1, 0.5)"
});
2. 在 Timeline 中使用（需 extendTimeline: true） 
const tl = gsap.timeline();
tl.popIn(".box", { duration: 0.5 });
3. 返回 Timeline 实现复杂效果 
effect: (targets) => {
  const tl = gsap.timeline();
  tl.from(targets, { x: -100, opacity: 0 })
    .to(targets, { rotation: 360 }, "<");
  return tl;
}

🎨 典型应用场景：

  • UI 组件库：统一按钮点击、卡片入场、提示弹出等动效
  • 设计系统：确保全站动画风格一致
  • 游戏开发：角色受伤、道具拾取等特效复用
  • 快速原型：设计师给效果命名，开发者一键实现

⚠️ 注意事项：

  • 效果名称全局唯一，避免冲突；
  • targets 可以是单个元素、数组或 CSS 选择器字符串；
  • 免费功能：registerEffect 是 GSAP 核心 API，无需额外插件或会员；
  • 如果效果内部使用了 ScrollTrigger 等插件，需确保已注册。

📚 官方文档：

👉 greensock.com/docs/v3/GSA…

✅ 总结：

gsap.registerEffect() 是 GSAP 的“动画组件化”方案——它将零散的动画代码提炼为可命名、可配置、可复用的效果模块，大幅提升开发效率与代码可维护性，是构建大型交互动效项目的最佳实践。

什么是ScrollTrigger

<header>
      <h1>案例 42：ScrollTrigger Pin 固定</h1>
      <p>滚动时固定元素并配合进度动画。</p>
    </header>
    <div class="spacer"></div>
    <section>
      <div class="panel">
        <div class="pin" id="pin">我被固定了</div>
      </div>
    </section>
    <section>
      <div class="panel">继续往下滚动</div>
    </section>
    <div class="spacer"></div>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/gsap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/ScrollTrigger.min.js"></script>
    <script>
      // 注册 ScrollTrigger 插件
      gsap.registerPlugin(ScrollTrigger);

      // pin + scrub 绑定滚动进度
      gsap.to("#pin", {
        scale: 0.8,
        rotation: 10,
        scrollTrigger: {
          trigger: "#pin",
          start: "top center",
          end: "+=400",
          scrub: true,
          pin: true
        }
      });
    </script>

ScrollTrigger 是 GSAP（GreenSock Animation Platform） 中最强大、最受欢迎的插件之一，它能将滚动行为（用户上下滑动页面）与GSAP 动画无缝结合，实现如“视差滚动”、“进度条动画”、“元素固定（Pin）”、“滚动触发动画”等高级交互动效。

📌 简单定义：

ScrollTrigger 让你把任何 GSAP 动画“绑定”到页面滚动位置上——当用户滚动到某个区域时，动画自动播放、暂停、反向或跟随滚动进度实时更新。

它本质上是一个滚动驱动的动画控制器。

✅ 核心能力：

1. 触发动画（Toggle）
  • 当元素进入/离开视口时，播放/暂停动画。
scrollTrigger: {
  trigger: ".section",
  start: "top center", // 当 .section 顶部到达视口中心时触发
  toggleActions: "play none none reverse"
}
2. 滚动进度驱动（Scrub）
  • 动画进度完全跟随滚动位置，形成“拖拽式”效果。
scrollTrigger: {
  scrub: true // 滚动多少，动画就播放到多少
}
3. 固定元素（Pin） ← 你的案例重点
  • 在滚动过程中将元素“钉”在视口某处，直到滚动结束。
scrollTrigger: {
  pin: true,       // 固定 trigger 元素
  // 或 pin: "#otherElement" 固定其他元素
  end: "+=400"     // 固定持续 400px 的滚动距离
}
4. 标记与指示器（Markers）
  • 开发时显示调试线（start/end 位置），方便调整。
scrollTrigger: {
  markers: true // 显示绿色（start）和红色（end）标记线
}

gsap.to("#pin", {
  scale: 0.8,
  rotation: 10,
  scrollTrigger: {
    trigger: "#pin",      // 监听 #pin 元素的滚动位置
    start: "top center",  // 当 #pin 顶部到达视口中心时开始
    end: "+=400",         // 滚动再往下 400px 后结束
    scrub: true,          // 动画进度随滚动平滑更新
    pin: true             // 在 start → end 区间内，#pin 被固定住
  }
});
用户体验流程：
  1. 向下滚动，当 #pin 到达屏幕中央时 →
  2. #pin 被固定在当前位置（不再随页面滚动而移动）；
  3. 继续滚动的 400px 过程中，#pin 逐渐缩小并旋转（scale: 0.8, rotation: 10）；
  4. 滚动超过 400px 后，固定解除，#pin 随页面继续滚动。

💡 这就是“固定 + 进度动画”的经典组合，常用于产品展示、故事叙述等场景。

🌟 典型应用场景：

效果 描述
视差滚动 背景图慢速移动，前景快移
进度条/数字计数器 滚动时数字从 0 增长到目标值
元素入场/离场 卡片滑入、标题淡入
固定导航栏 滚动到某区域时导航栏吸顶
横向滚动画廊 垂直滚动驱动水平位移
3D 视差 滚动时多层元素产生景深感

⚙️ 关键配置项说明：

配置 作用
trigger 触发动画的参考元素（默认为动画目标）
start 动画开始的滚动位置（如 "top center"）
end 动画结束的滚动位置（如 "bottom bottom" 或 "+=500"）
scrub true = 平滑跟随滚动；number = 延迟秒数
pin true = 固定 trigger；"#id" = 固定指定元素
toggleActions 控制进入/离开时的播放行为（play pause resume reset）

📏 位置语法："edge1 edge2"

  • edge1: trigger 元素的边缘（top/bottom/center）
  • edge2: 视口的边缘（top/bottom/center）
    例如："top bottom" = trigger 顶部碰到视口底部时触发

⚠️ 注意事项：

  • 必须注册插件：gsap.registerPlugin(ScrollTrigger)；
  • pin 会自动包裹元素并设置 position: sticky 或 fixed，无需手动写 CSS；
  • 如果页面高度不足，可能看不到完整效果（需确保有足够滚动空间）；
  • 免费功能：ScrollTrigger 是 GSAP 标准插件（无需 Club 会员）；
  • 移动端性能优秀，支持触摸滚动。

📚 官方资源：

✅ 总结：

ScrollTrigger 是 GSAP 赋予网页“电影级滚动叙事能力”的核心插件——它将枯燥的滚动转化为精准、流畅、富有表现力的动画触发器，是现代高端网站交互动效的事实标准。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GSAP 案例 43 - ScrollTrigger toggleClass</title>
    <style>
      body {
        margin: 0;
        font-family: "Segoe UI", sans-serif;
        background: #0f172a;
        color: #e2e8f0;
      }
      header {
        padding: 80px 24px 40px;
        text-align: center;
      }
      section {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .panel {
        width: 70%;
        max-width: 680px;
        padding: 32px;
        border-radius: 24px;
        background: #111827;
        box-shadow: 0 25px 60px rgba(15, 23, 42, 0.5);
        transition: transform 0.3s ease, background 0.3s ease;
      }
      .panel.active {
        transform: scale(1.03);
        background: #1f2937;
      }
      .spacer {
        height: 40vh;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>案例 43：toggleClass 触发样式</h1>
      <p>滚动到卡片时添加高亮样式。</p>
    </header>
    <div class="spacer"></div>
    <section>
      <div class="panel" id="panel">滚动到这里会高亮</div>
    </section>
    <div class="spacer"></div>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/gsap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/ScrollTrigger.min.js"></script>
    <script>
      // 注册 ScrollTrigger 插件
      gsap.registerPlugin(ScrollTrigger);

      ScrollTrigger.create({
        trigger: "#panel",
        start: "top 70%",
        end: "top 40%",
        toggleClass: "active"
      });
    </script>
  </body>
</html>

这段代码展示了 GSAP 的 ScrollTrigger 插件中一个非常实用的功能：toggleClass。它的作用是——

当用户滚动到指定区域时，自动给目标元素添加或移除一个 CSS 类名，从而触发样式变化（如高亮、缩放、变色等），无需手动编写 JavaScript 逻辑。

🔍 逐行解析核心部分：

ScrollTrigger.create({
  trigger: "#panel",     // 监听 #panel 元素的滚动位置
  start: "top 70%",      // 当 #panel 的顶部进入视口 70% 位置时 → 添加类
  end: "top 40%",        // 当 #panel 的顶部到达视口 40% 位置时 → 移除类
  toggleClass: "active"  // 要切换的 CSS 类名
});
📏 滚动位置语法说明：
  • "top 70%" 表示：trigger 元素的顶部 与 视口的 70% 高度线 对齐。
  • 视口从上到下：0%（顶部）→ 100%（底部）
  • 所以 70% 在视口偏下方，40% 在视口偏上方。

✅ 效果逻辑：

  • 向下滚动，当 #panel 进入视口下部（70%） 时 → 添加 .active
  • 继续滚动，当 #panel 上升到视口上部（40%） 时 → 移除 .active
  • 向上滚动时行为相反（进入 end 区域加类，离开 start 区域去类）

🎨 CSS 配合实现高亮：

.panel {
  /* 默认样式 */
  background: #111827;
  transform: scale(1);
}

.panel.active {
  /* 滚动到区域时激活 */
  background: #1f2937;     /* 背景变亮 */
  transform: scale(1.03);  /* 轻微放大 */
}

通过 transition 实现了平滑过渡，视觉反馈更自然。

✅ toggleClass 的优势：

传统方式 使用 toggleClass
需监听 scroll 事件 + 计算位置 + 手动 classList.add/remove ✅ 一行配置自动完成
容易性能差（频繁触发 scroll） ✅ ScrollTrigger 内部优化（requestAnimationFrame + 节流）
逻辑分散，难维护 ✅ 声明式写法，意图清晰

⚙️ 其他用法示例：

1. 切换多个类 
toggleClass: "highlight zoom-in"
2. 作用于其他元素 
ScrollTrigger.create({
  trigger: "#section",
  toggleClass: { targets: ".nav-item", className: "current" }
});
3. 配合 onToggle 回调 
ScrollTrigger.create({
  trigger: "#panel",
  toggleClass: "active",
  onToggle: self => console.log("是否激活:", self.isActive)
});

⚠️ 注意事项：

  • toggleClass 是 ScrollTrigger 的内置功能，无需额外插件；
  • 类名切换是双向的：进入区间加类，离开区间去类；
  • 如果 start 和 end 顺序颠倒（如 start: "top 40%", end: "top 70%"），则行为反转（常用于“离开时激活”）；
  • 移动端兼容性良好，支持触摸滚动。

📚 官方文档：

👉 greensock.com/docs/v3/Plu…

✅ 总结：

ScrollTrigger.toggleClass 是实现“滚动高亮”、“区域激活”等交互的最简洁方案——它将复杂的滚动监听与 DOM 操作封装成声明式配置，让你专注于 CSS 样式设计，大幅提升开发效率与代码可读性。

getProperty + getVelocity 是什么

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GSAP 案例 44 - velocity / getProperty</title>
    <style>
      body {
        margin: 0;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Segoe UI", sans-serif;
        background: #0f172a;
        color: #e2e8f0;
      }
      .card {
        width: 620px;
        padding: 28px;
        border-radius: 20px;
        background: #111827;
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.5);
      }
      .track {
        height: 100px;
        border-radius: 14px;
        background: #0b1220;
        position: relative;
        margin: 18px 0;
      }
      .dot {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #a3e635;
        position: absolute;
        top: 34px;
        left: 20px;
      }
      .info {
        font-size: 14px;
        color: #94a3b8;
      }
      button {
        width: 100%;
        margin-top: 12px;
        padding: 12px 16px;
        border: none;
        border-radius: 12px;
        font-size: 14px;
        cursor: pointer;
        background: #a3e635;
        color: #0f172a;
        font-weight: 600;
      }
    </style>
  </head>
  <body>
    <div class="card">
      <h1>案例 44：getProperty + getVelocity</h1>
      <p>读取属性与速度，了解当前运动状态。</p>
      <div class="track">
        <div class="dot" id="dot"></div>
      </div>
      <div class="info" id="info">x: 0 | velocity: 0</div>
      <button id="play">播放</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/gsap.min.js"></script>
    <script>
      const dot = document.querySelector("#dot");
      const info = document.querySelector("#info");
      const playButton = document.querySelector("#play");

      const tween = gsap.to(dot, {
        x: 480,
        duration: 2,
        ease: "power1.inOut",
        paused: true,
        onUpdate: () => {
          const x = Math.round(gsap.getProperty(dot, "x"));
          const velocity = Math.round(tween.getVelocity());
          info.textContent = `x: ${x} | velocity: ${velocity}`;
        }
      });

      playButton.addEventListener("click", () => {
        tween.restart();
      });
    </script>
  </body>
</html>

在 GSAP（GreenSock Animation Platform） 中，gsap.getProperty() 和 tween.getVelocity() 是两个用于实时读取动画状态的实用工具方法，常用于调试、交互反馈或基于物理状态的逻辑判断。

✅ 一、gsap.getProperty(target, property, unit?)

🔍 作用：

获取目标元素当前被 GSAP 控制的某个 CSS 属性或 transform 值。

即使该属性是通过 transform（如 x, y, rotation）设置的，也能正确返回数值。

📌 语法：
gsap.getProperty(element, "propertyName", "unit?");
  • element：DOM 元素
  • "propertyName"：属性名，如 "x", "opacity", "backgroundColor"
  • "unit?"（可选）：指定返回单位，如 "px", "deg"；默认返回纯数字
const x = Math.round(gsap.getProperty(dot, "x"));
  • 实时读取小球当前的 水平位移 x 值（以像素为单位的数字）
  • 即使你用 gsap.to(dot, { x: 480 }) 设置的是“相对位移”，getProperty 也能返回绝对计算值

⚠️ 注意：它读取的是 GSAP 内部记录的值，不是 getComputedStyle() 的结果，因此更准确、更高效（尤其对 transform 属性）。

✅ 二、tween.getVelocity()

🔍 作用：

获取当前动画目标属性的瞬时速度（单位/秒）。

对于多属性动画（如同时动 x 和 y），默认返回第一个属性的速度；也可指定属性：

tween.getVelocity("x") // 获取 x 方向速度
📌 特点：
  • 速度单位：每秒变化量（如 px/s, deg/s）
  • 方向有正负：+ 表示正向（如向右），- 表示反向（如向左）
  • 在 onUpdate 回调中调用最准确
const velocity = Math.round(tween.getVelocity());
  • 返回小球在 x 方向上的当前速度（px/s）
  • 动画开始和结束时速度接近 0（因为使用了 power1.inOut 缓动）
  • 中间时刻速度最大（约 ±240 px/s）

🔬 动画过程中的典型值（duration: 2s, x: 0 → 480）：

时间 x 值 velocity (px/s) 说明
0s 0 0 起始，静止
0.5s ~120 ~240 加速到峰值
1.0s 240 0 中点，瞬时静止（inOut 对称）
1.5s ~360 ~-240 反向加速（减速阶段）
2.0s 480 0 结束，静止

📌 注意：power1.inOut 是先加速后减速，在中点速度为 0（这是缓动函数决定的）。

🌟 典型应用场景：

场景 用途
物理模拟 根据速度决定反弹强度、摩擦力
交互反馈 鼠标松开时根据拖拽速度继续滑动（惯性滚动）
游戏开发 判断角色是否在移动、碰撞检测
动画调试 实时监控属性与速度变化
动态效果 速度越大，粒子越多 / 模糊越强

⚠️ 注意事项：

  • getProperty 仅能读取 GSAP 已经控制过的属性；
  • getVelocity() 必须在 动画进行中 调用才有意义（暂停/结束后返回 0）；
  • 对于 Timeline，需在具体 tween 上调用 getVelocity()；
  • 这两个方法都是 GSAP 核心 API，无需额外插件。

📚 官方文档：

✅ 总结：

gsap.getProperty() 和 tween.getVelocity() 是 GSAP 提供的“动画状态探测器”——它们让你能精确掌握元素当前的位置和运动速度，为构建基于物理、交互或调试需求的高级动画提供了关键数据支持。

什么是utils.random / wrap / interpolate

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>GSAP 案例 45 - utils random/wrap/interpolate</title>
  <style>
    body {
      margin: 0;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "Segoe UI", sans-serif;
      background: #0b1020;
      color: #e2e8f0;
    }

    .card {
      width: 640px;
      padding: 28px;
      border-radius: 20px;
      background: #111827;
      box-shadow: 0 20px 50px rgba(15, 23, 42, 0.5);
    }

    .stage {
      height: 160px;
      border-radius: 16px;
      background: #0f172a;
      position: relative;
      overflow: hidden;
      margin: 18px 0;
    }

    .dot {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #38bdf8;
      position: absolute;
      top: 65px;
      left: 20px;
    }

    button {
      width: 100%;
      padding: 12px 16px;
      border: none;
      border-radius: 12px;
      font-size: 14px;
      cursor: pointer;
      background: #38bdf8;
      color: #0f172a;
      font-weight: 600;
    }

    .info {
      margin-top: 8px;
      font-size: 13px;
      color: #94a3b8;
    }
  </style>
</head>

<body>
  <div class="card">
    <h1>案例 45：utils.random / wrap / interpolate</h1>
    <p>快速生成随机值、循环值与插值。</p>
    <div class="stage">
      <div class="dot" id="dot"></div>
    </div>
    <button id="play">随机移动</button>
    <div class="info" id="info"></div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/gsap.min.js"></script>
  <script>
    const dot = document.querySelector("#dot");
    const info = document.querySelector("#info");
    const playButton = document.querySelector("#play");

    // random 生成随机数，wrap 限制循环范围，interpolate 计算插值
    const randomX = gsap.utils.random(40, 540, 1);
    const wrapHue = gsap.utils.wrap(0, 360);
    const mix = gsap.utils.interpolate(0, 1);

    let step = 0;

    playButton.addEventListener("click", () => {
      const x = randomX;
      const hue = wrapHue(step * 80);
      const scale = mix(0.7, 1.4);

      gsap.to(dot, {
        x,
        scale,
        backgroundColor: `hsl(${hue}, 90%, 60%)`,
        duration: 0.6,
        ease: "power2.out"
      });

      info.textContent = `x: ${x}px | hue: ${hue} | scale: ${scale.toFixed(2)}`;
      step += 1;
    });
  </script>
</body>

</html>

在 GSAP（GreenSock Animation Platform） 中，gsap.utils 是一个内置的实用工具函数集合，提供了许多高效、简洁的辅助方法，用于处理动画中常见的数学和逻辑操作。

你提到的三个方法：

  • gsap.utils.random
  • gsap.utils.wrap
  • gsap.utils.interpolate

是其中最常用、最强大的三个工具，分别用于生成随机值、循环限制范围和计算插值。它们让复杂逻辑变得简单，且性能优异。

✅ 1. gsap.utils.random(min, max, [step])

🔍 作用：

生成一个指定范围内的随机数（可选步长）。

📌 语法：
const rand = gsap.utils.random(min, max, step);
  • min：最小值
  • max：最大值
  • step（可选）：步长（如 1 表示整数，0.1 表示保留一位小数）

⚠️ 注意：它返回的是一个函数！调用该函数才会生成新随机数。

但如果你直接传数字（如你的代码），GSAP 会自动缓存一次结果（等价于 random(40, 540, 1)()）。

const randomX = gsap.utils.random(40, 540, 1); // 实际返回一个数字（因为未作为函数调用）
  • 每次点击按钮，x 都是一个 40~540 之间的整数
  • 用于让小球随机水平移动

✅ 更推荐写法（每次点击都新随机）：

playButton.addEventListener("click", () => {
  const x = gsap.utils.random(40, 540, 1)(); // 加 () 才是函数调用
});

✅ 2. gsap.utils.wrap(min, max)

🔍 作用：

将任意数值“包裹”到 [min, max) 范围内，实现无缝循环（类似取模 %，但支持浮点数和负数）。

📌 语法：
const wrap = gsap.utils.wrap(min, max);
const result = wrap(value); // 返回循环后的值
🌰 例子：
const wrap360 = gsap.utils.wrap(0, 360);
wrap360(400)   // → 40   （400 - 360）
wrap360(-20)   // → 340  （-20 + 360）
wrap360(720)   // → 0    （720 % 360）

const hue = wrapHue(step * 80); // step=0→0, step=1→80, step=2→160, step=3→240, step=4→320, step=5→40→40...
  • 实现 HSL 色相（0~360）的循环切换，避免颜色溢出
  • 视觉上形成：蓝 → 紫 → 红 → 橙 → 黄 → 绿 → 蓝 … 的循环

✅ 3. gsap.utils.interpolate(start, end)

🔍 作用：

创建一个插值函数，根据进度值（0~1）计算 start 到 end 之间的中间值。

📌 语法：
const interpolator = gsap.utils.interpolate(start, end);
const value = interpolator(progress); // progress ∈ [0, 1]
🌰 例子：
const mix = gsap.utils.interpolate(10, 50);
mix(0)   // → 10
mix(0.5) // → 30
mix(1)   // → 50

它不仅支持数字，还支持颜色、数组、甚至对象！

const scale = mix(0.7, 1.4); // ❌ 这里有误！

正确用法应该是：

// 先创建插值函数
const scaleInterp = gsap.utils.interpolate(0.7, 1.4);

// 再用 0~1 之间的值去插值（比如用 Math.random()）
const scale = scaleInterp(Math.random());

这会导致 scale = 0.7（因为 mix(0.7) ≈ 0.7，第二个参数被忽略）。

✅ 修复建议：

// 方案 1：直接随机 scale
const scale = gsap.utils.random(0.7, 1.4, 0.01)();

// 方案 2：用插值 + 随机进度
const getScale = gsap.utils.interpolate(0.7, 1.4);
const scale = getScale(Math.random());

🌟 总结对比：

工具 用途 返回值 典型场景
random(min, max, step) 生成随机数 函数（或直接数值） 随机位置、延迟、颜色
wrap(min, max) 循环限制数值 函数 色相循环、角度归一化、无限滚动
interpolate(a, b) 计算 a→b 的中间值 函数 动态缩放、颜色混合、进度映射

🎯 高级技巧（Bonus）：

支持颜色插值：
const colorMix = gsap.utils.interpolate("red", "blue");
colorMix(0.5); // → "rgb(128, 0, 128)"（紫色）
数组插值：
const pointMix = gsap.utils.interpolate([0, 0], [100, 200]);
pointMix(0.5); // → [50, 100]

📚 官方文档：

👉 greensock.com/docs/v3/GSA…

✅ 最终总结：

gsap.utils.random、wrap 和 interpolate 是 GSAP 提供的“动画数学工具箱”——它们以极简 API 解决了随机性、循环性和连续性三大常见需求，让你无需手写复杂公式，即可构建丰富、动态、可控的交互动效。

什么是timeScale / yoyoEase

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>GSAP 案例 46 - timeScale / yoyoEase</title>
    <style>
      body {
        margin: 0;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "Segoe UI", sans-serif;
        background: #0f172a;
        color: #e2e8f0;
      }
      .card {
        width: 620px;
        padding: 28px;
        border-radius: 20px;
        background: #111827;
        box-shadow: 0 20px 50px rgba(15, 23, 42, 0.5);
      }
      .track {
        height: 90px;
        border-radius: 14px;
        background: #0b1220;
        position: relative;
        margin: 18px 0;
      }
      .ball {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: #f472b6;
        position: absolute;
        top: 22px;
        left: 20px;
      }
      .controls {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
      }
      button {
        padding: 10px 12px;
        border: none;
        border-radius: 12px;
        font-size: 13px;
        cursor: pointer;
        background: #1f2937;
        color: #e5e7eb;
      }
      button.primary {
        background: #f472b6;
        color: #0f172a;
        font-weight: 600;
      }
    </style>
  </head>
  <body>
    <div class="card">
      <h1>案例 46：timeScale 与 yoyoEase</h1>
      <p>调整播放速度，并在往返时使用不同缓动。</p>
      <div class="track">
        <div class="ball" id="ball"></div>
      </div>
      <div class="controls">
        <button id="slow">慢速</button>
        <button class="primary" id="play">播放</button>
        <button id="fast">快速</button>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.1/dist/gsap.min.js"></script>
    <script>
      const ball = document.querySelector("#ball");
      const playButton = document.querySelector("#play");
      const slowButton = document.querySelector("#slow");
      const fastButton = document.querySelector("#fast");

      // yoyoEase 可以在回放时使用不同缓动
      const tween = gsap.to(ball, {
        x: 520,
        duration: 1.6,
        ease: "power2.out",
        yoyo: true,
        repeat: -1,
        yoyoEase: "power2.in",
        paused: true
      });

      playButton.addEventListener("click", () => {
        tween.paused(!tween.paused());
      });

      slowButton.addEventListener("click", () => {
        tween.timeScale(0.6);
      });

      fastButton.addEventListener("click", () => {
        tween.timeScale(1.6);
      });
    </script>
  </body>
</html>

在 GSAP（GreenSock Animation Platform） 中，timeScale 和 yoyoEase 是两个用于精细控制动画播放行为的强大特性：

✅ 一、timeScale：控制动画播放速度

🔍 作用：

调整动画的时间流速，实现快放、慢放、甚至倒放，而不改变 duration。

📌 基本用法：
tween.timeScale(1);   // 正常速度（默认）
tween.timeScale(0.5); // 半速（慢动作）
tween.timeScale(2);   // 2倍速（快进）
tween.timeScale(-1);  // 反向播放（倒放）
  • timeScale 是一个乘数因子：
    • 1 = 100% 速度
    • 0.6 = 60% 速度（变慢）
    • 1.6 = 160% 速度（变快）
slowButton.addEventListener("click", () => {
  tween.timeScale(0.6); // 慢速
});

fastButton.addEventListener("click", () => {
  tween.timeScale(1.6); // 快速
});
  • 点击按钮即可实时改变动画速度，无需重新创建动画；
  • 即使动画正在播放，也能无缝变速。

⚠️ 注意：timeScale 不影响 duration 的设定值，只影响实际播放耗时。

✅ 二、yoyoEase：为往返动画（yoyo）指定不同的缓动函数

🔍 背景知识：什么是 yoyo？
  • 当设置 repeat: -1（无限重复） + yoyo: true 时，
  • 动画会正向播放 → 反向播放 → 正向播放 → …，形成“来回”效果。
📌 默认问题：
  • 如果只设 ease: "power2.out"，
  • 那么正向和反向都使用同一个缓动，导致：
    • 正向：先快后慢（out）
    • 反向：先慢后快（因为是倒放 out）

但很多时候，我们希望去程和回程有不同的运动感觉！

✅ 解决方案：yoyoEase

yoyoEase 允许你为“回程”（反向播放）单独指定一个缓动函数。

💡 在你的代码中：
const tween = gsap.to(ball, {
  x: 520,
  duration: 1.6,
  ease: "power2.out",      // 去程：先快后慢（弹出感）
  yoyo: true,
  repeat: -1,
  yoyoEase: "power2.in",   // 回程：先慢后快（吸入感）
  paused: true
});
🎯 视觉效果对比：
阶段 缓动 运动特点
去程（→） power2.out 快速冲出去，然后缓缓停下
回程（←） power2.in 缓缓启动，然后快速收回

这比单纯用 yoyo: true + 单一缓动更自然、更有“弹性”！

🔬 技术细节补充：

1. yoyoEase 的工作原理：
  • GSAP 不会倒放 ease，而是正向播放 yoyoEase 来模拟回程。
  • 所以 ease: "out" + yoyoEase: "in" = 去程快停 + 回程快启，非常合理。
2. yoyoEase 支持所有缓动类型：
yoyoEase: "elastic.out"
yoyoEase: "bounce.inOut"
yoyoEase: CustomEase.create(...)
3. timeScale 是可叠加的：
tween.timeScale(2).timeScale(0.5); // 最终 = 1（2 * 0.5）

🌟 典型应用场景：

场景 用途
UI 微交互动效 按钮点击“弹跳”：去程快，回程缓
游戏对象移动 敌人巡逻：匀速去，加速回
视频/音频播放器 拖拽预览时慢放，正常播放时快放
科学可视化 模拟不同速度下的物理过程

⚠️ 注意事项：

  • yoyoEase 仅在 yoyo: true 时生效；
  • timeScale 影响整个时间线或 tween，包括子动画；
  • 两者都是 GSAP 核心功能，无需额外插件；
  • timeScale(0) 会暂停动画（等价于 paused(true)）。

📚 官方文档：

✅ 总结：

timeScale 让你像“调速旋钮”一样控制动画节奏，而 yoyoEase 则赋予往返动画“去程与回程不同性格”的能力——两者结合，可构建出既灵活又富有表现力的交互动效，是 GSAP 高级动画控制的标志性特性。

Wget Cheatsheet

✇Linux Tips, Tricks and Tutorials on Linuxize
hello@linuxize.com (Linuxize)

Basic Downloads

Download files to the current directory.

Command Description
wget URL Download a file
wget -q URL Download silently (no output)
wget -nv URL Less verbose (errors and basic info only)
wget -v URL Verbose output (default)
wget -d URL Debug output

Save Options

Control where and how files are saved.

Command Description
wget -O name.txt URL Save with a specific filename
wget -O - URL Output to stdout
wget -P /path/ URL Save to a specific directory
wget --content-disposition URL Use server-suggested filename
wget --no-clobber URL Skip if file already exists
wget -nc URL Short form of --no-clobber

Resume and Speed

Resume interrupted downloads and control bandwidth.

Command Description
wget -c URL Resume a partial download
wget --limit-rate=2m URL Limit speed to 2 MB/s
wget --limit-rate=500k URL Limit speed to 500 KB/s
wget -b URL Download in background
wget -b -o log.txt URL Background with custom log

Multiple Files

Download several files at once.

Command Description
wget URL1 URL2 URL3 Download multiple URLs
wget -i urls.txt Download URLs from a file
wget -i - < urls.txt Read URLs from stdin

Recursive Download

Download directory trees and linked pages.

Command Description
wget -r URL Recursive download
wget -r -l 2 URL Limit depth to 2 levels
wget -r --no-parent URL Do not ascend to parent directory
wget -r --accept=jpg,png URL Accept only these file types
wget -r --reject=mp4,avi URL Reject these file types
wget -r -A "*.pdf" URL Download only PDFs
wget -r --follow-tags=a URL Follow only <a> tags

Website Mirroring

Create offline copies of websites.

Command Description
wget -m URL Mirror a website
wget -m -k -p URL Mirror with local link conversion
wget -m -k -p -E URL Mirror and add .html extensions
wget -m --wait=2 URL Mirror with 2 second delay between requests
wget -m --random-wait URL Mirror with random delay (0.5x–1.5x of --wait)

Authentication

Access protected resources.

Command Description
wget --user=USER --password=PASS URL HTTP basic auth
wget --ask-password URL Prompt for password
wget --header="Authorization: Bearer TOKEN" URL Token auth
wget --ftp-user=USER --ftp-password=PASS URL FTP auth

Headers and User Agent

Send custom headers and change identity.

Command Description
wget --header="Key: Value" URL Add custom header
wget --header="Accept: application/json" URL Request JSON
wget -U "CustomAgent/1.0" URL Change user agent
wget --referer=URL URL Set referer header

SSL/TLS

Handle HTTPS connections and certificates.

Command Description
wget --no-check-certificate URL Skip certificate verification
wget --ca-certificate=ca.crt URL Use custom CA certificate
wget --certificate=client.crt URL Client certificate
wget --private-key=client.key URL Client private key
wget --https-only URL Only follow HTTPS links

FTP

Work with FTP servers.

Command Description
wget ftp://server/file Download file
wget -r ftp://server/dir/ Download directory recursively
wget --ftp-user=USER --ftp-password=PASS ftp://server/ Authenticated FTP
wget --no-passive-ftp ftp://server/file Use active FTP mode
wget --no-remove-listing ftp://server/dir/ Keep .listing files

Retries and Timeouts

Control retry behavior and connection timing.

Command Description
wget --tries=5 URL Retry up to 5 times
wget --retry-connrefused URL Retry on connection refused
wget --waitretry=10 URL Wait 10 seconds between retries
wget --timeout=30 URL Set all timeouts to 30 seconds
wget --connect-timeout=10 URL Connection timeout only
wget --read-timeout=30 URL Read timeout only
wget --dns-timeout=5 URL DNS timeout only

Output and Logging

Control progress display and log output.

Command Description
wget -q URL Suppress all output
wget -nv URL Print errors and basic info only
wget -o log.txt URL Log output to file
wget -a log.txt URL Append to log file
wget --show-progress -q URL Quiet but show progress bar
wget --progress=dot URL Dot-style progress indicator

Timestamping and Caching

Download only new or updated files.

Command Description
wget -N URL Download only if remote file is newer
wget --no-cache URL Disable server-side caching
wget --spider URL Check if URL exists (do not download)
wget --spider -r URL Check all links recursively

Common Patterns

Frequently used command combinations.

Command Description
wget -q -O - URL | tar -xzf - -C /path Download and extract in one step
wget -c --limit-rate=1m -P /tmp URL Resume to directory with speed limit
wget -r -np -nH --cut-dirs=2 URL Recursive without host and path prefix
wget -m -k -p --wait=1 -e robots=off URL Full mirror ignoring robots.txt

Related Guides

Use these articles for detailed wget workflows.

Guide Description
Wget Command in Linux with Examples Full wget tutorial with practical examples
Curl Command in Linux with Examples Alternative HTTP client for API interactions
How to Use SCP Command to Securely Transfer Files Transfer files between hosts over SSH
How to Use Rsync for Local and Remote Data Transfer Incremental file sync and transfer

做了个 EPUB 阅读器，被「阅读进度同步」折磨了一周，总结 4 个血泪教训

✇掘金 前端
PTC

你做过"打开一本书，自动回到上次阅读位置"这个功能吗？

听起来很简单对吧——存个页码，下次打开翻过去就行。我一开始也是这么想的，直到在 Web EPUB 阅读器上被反复打脸。

这篇文章不讲理论框架，直接讲：我在实现 Web/Mobile 阅读进度同步时踩过的每一个坑，以及为什么"存页码"这条路从一开始就是死的。

一句话结论

进度 = 内容位置（Anchor），页面 = 当前设备的渲染结果。

只要你不存页码，Web 双页 / Mobile 单页 / 字体可调 / 阅读器大小可调 / 多端同步，全部迎刃而解。

为什么不能存页码？

同一本 EPUB，79 章，30 万字：

环境 页数
PC 双页 (319px/页) 1165 页
iPad 横屏 (500px/页) 约 750 页
iPhone 竖屏 (350px/页) 约 1400 页
调大字号 (20px) 约 1800 页

用户在 PC 上读到第 142 页，存下来。手机打开，翻到第 142 页——内容完全对不上，可能差了好几章。

页码是渲染结果，不是内容属性。 它取决于字体、字号、行高、容器宽高、双页/单页模式。换任何一个参数，页码就变了。

Anchor 锚点设计

数据结构

interface ReadingAnchor {
  chapterIndex: number;   // 第 11 章
  blockIndex: number;     // 章内第 17 个段落
  charOffset: number;     // 段内第 0 个字符
  textSnippet: string;    // "尤里身体前倾，像是在敦促她"
}

每个字段都是内容属性——和设备无关、和字体无关、和屏幕宽度无关。

textSnippet 是保险：万一书的内容更新导致 blockIndex 偏移，还能用文字片段做模糊匹配（Kindle 也是这么做的）。

存储格式

anchor:11:17:0|snippet:尤里身体前倾，像是在敦促她|char:25000

char:25000 是全局字符偏移，供旧客户端降级。一个字符串，三层 fallback，向前兼容。

多端同步流程

手机端退出 → 保存 anchor → 后端存储
                                    ↓
PC 端打开 → 请求 anchor → 当前设置下重新分页 → 定位到锚点所在页

后端只做一件事：存最新的 anchor。"翻到哪一页"这个问题完全由前端根据当前设备环境实时计算。

前端分页：CSS 多列布局测量

EPUB 分页的核心是 CSS column-width。将章节 HTML 注入一个隐藏容器，浏览器自动按列排布，scrollWidth / columnWidth 就是页数。

// 隐藏测量容器
measureEl.innerHTML = `
  <div class="epub-measure-container" style="
    width: ${pageWidth}px;
    height: ${pageHeight}px;
    column-width: ${pageWidth}px;
    column-gap: 0px;
    column-fill: auto;
    font-size: ${fontSize}px;
    line-height: ${lineHeight};
  ">${chapter.html}</div>
`;

const scrollW = contentEl.scrollWidth;
const pageCount = Math.ceil(scrollW / pageWidth);

同时，遍历每个块级元素，记录它在第几列（第几页），构建 blockMap：

// 用 getBoundingClientRect 计算元素所在列
const containerRect = containerEl.getBoundingClientRect();
for (const el of leafElements) {
  const elRect = el.getBoundingClientRect();
  const relativeLeft = elRect.left - containerRect.left;
  const pageInChapter = Math.floor(relativeLeft / columnWidth);
  // 记录：blockIndex → pageInChapter
}

有了 blockMap，锚点 → 页码的转换就是一次查表：range.startPage + block.pageInChapter。

四个真实的坑

坑 1：测量 CSS ≠ 渲染 CSS → 定位偏移

这是最隐蔽的 Bug。测量容器和实际渲染的 CSS 差了几条规则：

/* 渲染容器有，测量容器漏了 */
h1, h2, h3 { margin-top: 0.5em; margin-bottom: 0.3em; }
blockquote { text-indent: 0 !important; }
a { color: inherit; text-decoration: underline; }

一个标题的 margin 差了 0.5em（≈ 8px），在 319px 宽的手机屏幕上，就足以让后续段落的列分配偏移一整页。79 章累积下来，锚点可以偏差几十页。

结论：测量 CSS 和渲染 CSS 必须完全一致，差一个属性就可能出错。

坑 2：offsetLeft 在多列布局中不可靠

最初用 el.offsetLeft / columnWidth 判断元素在哪一列。但 offsetLeft 的语义是"相对于 offsetParent"，在 CSS 多列布局中，不同浏览器的实现有差异。

换成 getBoundingClientRect() 后解决。它返回元素的实际视觉位置，跨浏览器一致：

// ❌ 不可靠
const page = Math.floor(el.offsetLeft / columnWidth);

// ✅ 可靠
const rect = el.getBoundingClientRect();
const page = Math.floor((rect.left - containerRect.left) / columnWidth);

坑 3：字体设置变更 → 用旧数据算出错误页码

用户调整字号 → settingsFingerprint 变化 → 触发重新分页。但 React 中多个 Hook 的状态更新有时差：

Effect 看到：新的 settingsFingerprint ✓
             旧的 blockMaps ✗ （分页 Hook 还没完成重新测量）

用旧的 blockMaps + 新设置去算 anchorToPage，结果必然是错的。

解决方案：两阶段导航。

// 第一阶段：检测到设置变更，标记等待，不导航
if (isSettingsChange) {
  pendingSettingsNavRef.current = true;
  return; // 等分页重新测量
}

// 第二阶段：分页完成后，用新 blockMaps 安全导航
if (pendingSettingsNavRef.current) {
  pendingSettingsNavRef.current = false;
  const newPage = anchorToPage(anchor, newRanges, newBlockMaps);
  navigateTo(newPage);
}

坑 4：渐进加载 + 翻页库事件竞态

79 章的书不会一次加载完。第一次分页只有 17 章精确测量 + 62 章估算。当更多章节加载后，avgCharsPerPage 从 135 变成 129，所有估算章节的 startPage 集体偏移，锚点对应的全局页码从 132 变成 142。

但阅读器还停在 132 页，因为初始化后没有"自动修正"逻辑。

更麻烦的是，尝试用 setSettingsKey 重新挂载 flipbook 来修正时，翻页库在 mount 时会发射一个 onFlip({page: 0}) 的伪事件。这个事件把 currentPageRef 污染成 0，导致后续自动修正全部失效。

解决方案：两个机制配合。

门控机制：flipbook 初始化阶段忽略 onFlip 事件。

const flipReadyRef = useRef(false);

// mount 后 300ms 才标记就绪
setTimeout(() => { flipReadyRef.current = true; }, 300);

// handleFlip 中门控
if (!flipReadyRef.current) return; // 忽略伪事件

直接导航：渐进加载修正时用 turnToPage 而不是重新挂载，从根本上避免竞态。

if (!userHasFlippedRef.current && startPage !== currentPageRef.current) {
  flipBookRef.current?.pageFlip()?.turnToPage(startPage);
}

最终架构

┌───────────────────────────────────┐
│ 后端：只存 anchor 字符串          │  POST /api/library/progress
├───────────────────────────────────┤
│ 前端解析层：anchor ↔ 页码转换     │  anchorToPage / pageToAnchor
├───────────────────────────────────┤
│ 前端测量层：CSS columns 精确测量   │  buildBlockMap → blockMaps
├───────────────────────────────────┤
│ 前端渲染层：flipbook 翻页 UI      │  react-pageflip
└───────────────────────────────────┘

核心原则：

  • 后端不分页，只存内容位置
  • 页码纯前端算，根据当前设备环境实时计算
  • 锚点与设备无关，同一个锚点在任何设备上都能定位
  • 转换方向：永远是 anchor → page（打开时），page → anchor（保存时）

写在最后

实现这个功能的过程让我深刻理解了一件事：看似简单的需求，难点往往不在算法设计，而在工程细节的一致性。

CSS 差一条规则、React Effect 的执行时序差一帧、第三方库的一个初始化事件——这些"微小"的不一致累积起来，就是"打开书发现位置完全不对"的用户体验灾难。

如果你也在做类似的阅读器产品，记住这个原则：

永远不要存页码。存内容位置，让前端去算页码。

这一个决策，能帮你避开 80% 的坑。

❌