npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mw-waterween

v36.1.3

Published

GToolkit Credit By G.S.C.

Downloads

12

Readme

Waterween

水包纳最流畅的动画.
Be water my friend. —— Bruce Lee.

一个由 Getter Setter 驱动的、专门面向 Meta World 的补间工具。目前处于开发阶段,并进行了小规模的测试。
TypeScript 研究性项目。

v36.1.3
by LviatYi

阅读该文档时,推荐安装以下字体:

若出现乱码,其为 Nerd Font 的特殊字符,不影响段落语义。

Functional ⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠐⠒⠒⠒⠒⠚⠛⣿⡟⠄⠄⢠⠄⠄⠄⡄⠄⠄⣠⡶⠶⣶⠶⠶⠂⣠⣶⣶⠂⠄⣸⡿⠄⠄⢀⣿⠇⠄⣰⡿⣠⡾⠋⠄⣼⡟⠄⣠⡾⠋⣾⠏⠄⢰⣿⠁⠄⠄⣾⡏⠄⠠⠿⠿⠋⠠⠶⠶⠿⠶⠾⠋⠄⠽⠟⠄⠄⠄⠃⠄⠄⣼⣿⣤⡤⠤⠤⠤⠤⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄

它旨在提供如下便利:

  • [x] 信手拈来 允许通过隐式单例轻松创建一个补间任务。
  • [x] 纵横捭阖 通过 setter 操控所有职责内的事务,函数赋你无所不能。
  • [x] 进退自如 轻松 󰐊播放󰓕倒放,无声、优雅地重置动画曲线。
  • [x] 扶善遏过 与编译底层深度合作的类型推断,避免不必要的对象属性或 typo。
  • [x] 垂帘听政 自适应数据弥合,支持仅对节点的部分维度进行控制,不必做微操大师。
  • [x] 流水落花 flow() 函数,将 number 值的变化完全交给 Waterween,在二阶导数内抹除这个世界的尖锐。
  • [x] 大一统论 pipe() 函数,轻松构建顺序节点动画。
  • [x] 如绸如弦 附赠强大的贝塞尔函数实现,并配套专业的贝塞尔数学支持,以 @profession 标注。
  • [x] 雕梁画栋 建造者模式,一砖一瓦地赋能 TweenTask。
  • [x] 门户洞开 观察者模式,完善的事件回调,信比季布的回调承诺。
  • [x] 我们联合 组合模式,按组进行共同更新,抑或将坏死限制在局部区域内。
  • [x] 络绎不绝 分组依序执行,大道轮回;抑或同步执行,齐头并进。
  • [x] 水形无穷 行为高客制化。允许自定义任何类型的数据插值策略,如使用四元数的 slerp
  • [x] 蒸馏制法 应对无视 TreeShake 的「过重」反馈,在维持结构、保留调试能力的同时,打包行数仅 800 行。

Deficiency ⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠐⠒⠒⠒⠒⠚⠛⣿⡟⠄⠄⢠⠄⠄⠄⡄⠄⠄⣠⡶⠶⣶⠶⠶⠂⣠⣶⣶⠂⠄⣸⡿⠄⠄⢀⣿⠇⠄⣰⡿⣠⡾⠋⠄⣼⡟⠄⣠⡾⠋⣾⠏⠄⢰⣿⠁⠄⠄⣾⡏⠄⠠⠿⠿⠋⠠⠶⠶⠿⠶⠾⠋⠄⠽⠟⠄⠄⠄⠃⠄⠄⣼⣿⣤⡤⠤⠤⠤⠤⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄

然而它亦面临无法避免的难题:

  • 熵之恶魔 Meta World 的熵之恶魔阻止行为之间的有序,因此 Waterween 可能存在 1 帧的数据精度问题。
    • 你可以成为英雄打败恶魔;亦可以手动调用 Waterween.update() 强制刷新数据,不过逃避亦有代价...
  • 驹齿未落 WaterTween 目前处于羽翼渐丰的状态。

Philology ⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠐⠒⠒⠒⠒⠚⠛⣿⡟⠄⠄⢠⠄⠄⠄⡄⠄⠄⣠⡶⠶⣶⠶⠶⠂⣠⣶⣶⠂⠄⣸⡿⠄⠄⢀⣿⠇⠄⣰⡿⣠⡾⠋⠄⣼⡟⠄⣠⡾⠋⣾⠏⠄⢰⣿⠁⠄⠄⣾⡏⠄⠠⠿⠿⠋⠠⠶⠶⠿⠶⠾⠋⠄⠽⠟⠄⠄⠄⠃⠄⠄⣼⣿⣤⡤⠤⠤⠤⠤⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄

此章介绍 Waterween 的动画理念。

主动对流动式变化,采用二阶导插值

Waterween 支持对特定曲线的二阶导数进行插值,以实现更加流畅的动画效果。一个 flow 引发的动画将主动启用这个功能。

由输入引发的非流动式变化,动画是 Break 的

一个由用户触发的变化,如果是非流动的,用户需要明确地知晓动画的反馈。因此动画将采用 打断 的方式进行。

这意味着,Waterween 将不会尝试对二阶导上不连续的非流动式动画进行平滑。

State ⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠐⠒⠒⠒⠒⠚⠛⣿⡟⠄⠄⢠⠄⠄⠄⡄⠄⠄⣠⡶⠶⣶⠶⠶⠂⣠⣶⣶⠂⠄⣸⡿⠄⠄⢀⣿⠇⠄⣰⡿⣠⡾⠋⠄⣼⡟⠄⣠⡾⠋⣾⠏⠄⢰⣿⠁⠄⠄⣾⡏⠄⠠⠿⠿⠋⠠⠶⠶⠿⠶⠾⠋⠄⠽⠟⠄⠄⠄⠃⠄⠄⣼⣿⣤⡤⠤⠤⠤⠤⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄

Tween Task State

对于每个 Tween Task,具有如下状态:

  • 播放状态
    • 󰐊播放
    • 󰏤暂停
    • 󰄲完成
  • 时序状态
    • 󰐊正放
    • 󰓕倒放
  • 循环状态
    • 非循环
    • 重复 完成后 重置 补间.
      • 你不应该在循环状态下访问 isDone.
  • 往复状态
    • 非往复
    • 󱞳往复 󰐊正放结束后 󰓕倒放.

不同维度的状态相容,而各自的子状态之间互斥。


Behavior ⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠐⠒⠒⠒⠒⠚⠛⣿⡟⠄⠄⢠⠄⠄⠄⡄⠄⠄⣠⡶⠶⣶⠶⠶⠂⣠⣶⣶⠂⠄⣸⡿⠄⠄⢀⣿⠇⠄⣰⡿⣠⡾⠋⠄⣼⡟⠄⣠⡾⠋⣾⠏⠄⢰⣿⠁⠄⠄⣾⡏⠄⠠⠿⠿⠋⠠⠶⠶⠿⠶⠾⠋⠄⠽⠟⠄⠄⠄⠃⠄⠄⣼⣿⣤⡤⠤⠤⠤⠤⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄⠄

AutoDestroy

如果未设置 autoDestroy(true) ,需手动删除任务。