构建固件和导入到JS

在 C++ 里加入以下代码, 然后重新编译构建固件：

// 为了控制固件的尺寸，BeShell 的 module 是按需引入的。
beshell.use<be::animator::Animator>() ;

在JS中导入 animator module：

在.js文件中

import * as animator from 'animator'

在REPL命令行下

import animator

简介

动画模块

提供基于 BeShell 主循环的动画能力，导出三个成员：

• tween : 缓动函数库（linear / inQuad / outBounce / ... 共 31 种）
• Timeline : 关键帧动画时间线类（帧节拍、跨关键帧插值、事件）
• morph() : 一次性值过渡动画（基于 Timeline 实现）

缓动函数曲线效果预览：缓动函数速查表

示例：

import { tween, Timeline, morph } from "animator"

// 1. tween: 直接计算缓动值
tween.inQuad(0.5)          // 0.25 (t=0.5 时的 inQuad 缓动值)
tween.ease("outBounce", 0.5)  // 通过名称指定缓动类型

// 2. morph: 一次性动画, 1 秒内从 0 过渡到 100
morph(0, 100, 1000, (value)=> {
    console.log(value)     // 每帧回调新值
}, "inOutQuad")

// 3. Timeline: 关键帧动画
const obj = { x: 0 }
const tl = new Timeline(30, 90)      // 30fps, 90 帧(3 秒)
tl.set(30, obj, "x", 100, "outQuad")   // 第 30 帧到达 100
tl.set(60, obj, "x", 50)                // 第 60 帧回到 50 (linear)
tl.on("change", (frame)=> console.log(frame, obj.x))
tl.play()

模块函数

函数 ease

原型: ease (type:string|number, t:number, b:number=0, c:number=1, d:number=1, s:number=1.70158)

计算缓动值

参数:

• type

  类型string, number

  参数说明缓动类型: 名称字符串(如 "inQuad")或枚举常量

• t

  类型number

  参数说明当前时间/进度

• b

  类型number

  默认值0

  参数说明起始值

• c

  类型number

  默认值1

  参数说明变化量(目标值-起始值)

• d

  类型number

  默认值1

  参数说明总时长

• s

  类型number

  默认值1.70158

  参数说明回弹系数(仅 Back/Elastic 有效)

返回值:

类型number

说明缓动后的值

---

函数 morph

原型: morph (startValue:number, endValue:number, durTime:number, callback:function, ease:string="linear", easeS:number=1.70158, fps:number=30)

一次性动画：从 startValue 按 ease 缓动过渡到 endValue

每帧回调 callback(newValue, timeline)；播完自动停止。 调用方不持有返回对象时播完即被 GC 销毁（fire-and-forget）。

示例：

import { morph } from "animator"

// 1 秒内从 0 过渡到 100
morph(0, 100, 1000, (value)=> console.log(value), "inOutQuad")

// 返回值是 Timeline 对象，可控制播放或监听事件
const tl = morph(0, 100, 1000, (value)=> console.log(value))
tl.on("stop", ()=> console.log("done"))

参数:

• startValue

  类型number

  参数说明起始值

• endValue

  类型number

  参数说明目标值

• durTime

  类型number

  参数说明过渡时长(毫秒)

• callback

  类型function

  参数说明每帧回调 callback(newValue, timeline)

• ease

  类型string

  默认值"linear"

  参数说明缓动类型名称(同 tween 函数名)

• easeS

  类型number

  默认值1.70158

  参数说明缓动参数(仅 Back/Elastic 有效)

• fps

  类型number

  默认值30

  参数说明帧率

返回值:

类型Timeline

说明内部时间线对象

贡献者: alee

上一页Logger

下一页tween