easing-functions-cj API 参考大全Skill 枚举、getMethod() 与 calculate() 每个参数逐条精讲【免费下载链接】easing-functions-cj一个基于缓动函数的动画UI组件库项目地址: https://gitcode.com/Cangjie-TPC/easing-functions-cjeasing-functions-cj 是一个基于缓动函数的 Cangjie 语言动画 UI 组件库本文这份 API 参考将逐条精讲 Skill 枚举、getMethod() 工厂方法与 calculate() 缓动计算的 4 个参数涵盖全部 27 种缓动曲线新手一次读会。30 秒看懂缓动曲线的三步调用链库的整体流程非常简单记住这条三步链路即可选效果——在Skill枚举中选出想要的枚举值如_QuadEaseOut拿对象——调用getMethod()得到对应的BaseEasingMethod插值曲线对象算数值——在动画帧回调中调用calculate()传入当前进度即可拿到本帧插值上图为 entry 演示应用自带的主题背景资源运行 entry/ 目录下的示例工程即可看到各缓动曲线的实际运动效果。Skill 枚举27 种缓动曲线一览清单Skill枚举是整个库的菜单共 27 个枚举值覆盖 8 大类缓动效果每类分 ease-in、ease-out、ease-in-out 三个方向外加 Linear 线性类别枚举值书写时带_前缀效果特点Back_BackEaseIn/_BackEaseOut/_BackEaseInOut先轻微反向预备再加速/减速前进Bounce_BounceEaseIn/_BounceEaseOut/_BounceEaseInOut类似小球弹跳落地适合模拟物理碰撞Circ_CircEaseIn/_CircEaseOut/_CircEaseInOut圆弧曲线起步缓慢、中段加速Cubic_CubicEaseIn/_CubicEaseOut/_CubicEaseInOut三次方曲线速度感适中Elastic_ElasticEaseIn/_ElasticEaseOut/_ElasticEaseInOut弹簧往复振荡效果活泼Expo_ExpoEaseIn/_ExpoEaseOut/_ExpoEaseInOut指数曲线加减速感最强烈Quad_QuadEaseIn/_QuadEaseOut/_QuadEaseInOut二次方曲线日常 UI 最常用Quint_QuintEaseIn/_QuintEaseOut/_QuintEaseInOut五次方曲线比 cubic 更急促Sine_SineEaseIn/_SineEaseOut/_SineEaseInOut正弦曲线过渡最柔和Linear_Linear匀速运动无加减速两个容易踩坑的细节枚举值带_前缀代码里必须写_QuadEaseOut这样的形式toString()会自动去掉下划线返回标准名QuadEaseOut方便打日志和做配置。内置判等操作符Skill实现了/!运算与EquatableSkill协议可直接写if (skill _Linear)判断当前缓动类型。全部枚举定义见 skill.cj字符串转换逻辑见 skill.cj。getMethod() 工厂方法一行代码获取插值对象getMethod()的完整签名public func getMethod(): BaseEasingMethod它是一一映射关系每个枚举值都init构造并返回对应的缓动类实例调用返回对象源码文件_BackEaseIn.getMethod()BackEaseIn()back_ease_in.cj_Linear.getMethod()Linear()linear.cj_BounceEaseOut.getMethod()BounceEaseOut()bounce_ease_out.cj值得注意的一个兜底机制方法末尾以Linear()作为默认分支返回即使未来扩展枚举而忘记同步更新也会安全退化为线性动画而非出错。完整实现见 skill.cj。所有返回对象都遵循统一接口BaseEasingMethod学会一个就会用全部public interface BaseEasingMethod { public func calculate(t: Float32, b: Float32, c: Float32, d: Float32): Float32 }接口定义见 base_easing_method.cj。calculate() 逐参数精讲4 个参数看懂运动曲线calculate()是库中调用频率最高的 API负责把时间进度换算成当前帧数值public func calculate(t: Float32, b: Float32, c: Float32, d: Float32): Float324 个参数逐个拆解参数类型文档含义实际作用tFloat32动画当前进度值当前时刻直接把帧回调的value传入即可bFloat32插值起始值起始值动画结果永远从b出发cFloat32插值结束值总变化量实现中按b c × 曲线(t/d)计算dFloat32动画结束进度值总时长/总进度用于t / d归一化出 0~1 进度返回值Float32类型的当前帧缓动插值。公式本质一句话结果 起始值 b 变化量 c × 曲线形状(t/d)27 种曲线只是曲线形状不同。以线性曲线为例实现只有一行// linear.cj 核心实现 return c * t / d b见 linear.cj。Back 系列的 back 参数可调的预备动作幅度Back 三个类比其他类多一个可选构造参数public init(back: Float32) // back - 插值曲线变化幅度back控制先向后拉一下的力度默认值1.70158数值越大反向预备越明显不需要定制时使用无参默认构造即可。见 back_ease_in.cj。实战示例配合 Animator 帧回调使用实际项目中的标准用法是在 Animator 的onframe回调里调用calculate()// 第一步创建动画时长 1000ms var animator: AnimatorResult AnimatorResult( AnimatorOptions( duration: 1000, easing: linear, delay: 0, fill: AnimatorFill.None, direction: AnimatorDirection.Normal, iterations: 1, begin: 0.0, end: 1.0 ) ) // 第二步onframe 里逐帧计算 this.animator.onframe { value: Float64 var f: Float32 skill.getMethod().calculate(Float32(value), 0.0, 120.0, 1.0) this.lineToParams.y Float64(170.0 - f) this.onAnimateUpdate() }其中value即当前进度对应t0.0是起始值b120.0是变化量c1.0是总进度d。完整可运行示例见 index.cj。如何挑选合适的缓动曲线选型速查表动画场景推荐曲线理由元素进入 / 出现*EaseOut推荐_CubicEaseOut快出慢收到位感强元素退出 / 隐藏*EaseIn推荐_CubicEaseIn慢出快收离场自然两点之间位移*EaseInOut两端慢中间快最顺滑进度条、滚动同步_Linear匀速无感知扭曲弹跳、抛掷效果_BounceEaseOut、_ElasticEaseOut物理感强生动有趣强调强转折_ExpoEaseInOut加减速感最强烈通用建议日常 UI 优先选 Cubic 系列最稳妥想要更柔和用 Sine想要更强冲击用 Expo。常见问题 FAQQ只想要匀速动画必须用 Skill 吗要。直接选_Linear即可它也正是getMethod()的兜底返回曲线。Qcalculate() 的 c 是结束值还是变化量实现上按总变化量处理最终结果 b c。比如要把数值从 170 变到 50传b170.0, c-120.0。Qt 超过 d 会怎样示例中d与t来自同一套动画进度正常情况下恒有0 ≤ t ≤ d建议始终让 animator 驱动t不要手动构造进度。相关资料完整接口文档feature_api.md库说明与编译构建指南easingfunctions/README.md核心源码目录easingfunctions/src/main/cangjie/src/可运行示例工程entry/【免费下载链接】easing-functions-cj一个基于缓动函数的动画UI组件库项目地址: https://gitcode.com/Cangjie-TPC/easing-functions-cj创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考