如何不修改Paper.js源码为其添加自定义easing缓动函数

实现方法 #

完全不需要修改Paper.js原始库代码，只需要在Paper.js加载完成后，在你自己的业务代码中直接向paper.Tween.easings静态对象追加自定义缓动函数即可。

操作步骤 #

1. 确保自定义缓动的代码执行顺序在Paper.js加载完成之后，如果你是通过<script>标签引入Paper.js，把自定义代码放在该标签下方即可；如果是模块化引入，在import paper from 'paper'之后执行追加操作即可。
2. 直接在你的代码中添加自定义缓动，示例如下：

// 追加自定义缓动函数
paper.Tween.easings.easeOutQuad = function(t) {
  return 1 - (1 - t) * (1 - t);
}

paper.Tween.easings.easeInOutQuad = function(t) {
  return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
}

3. 自定义缓动添加后，可以直接和内置缓动一样调用：

// 调用示例
yourElement.tweenTo({ opacity: 0 }, {
  duration: 800,
  easing: 'easeOutQuad' // 直接填写你定义的缓动函数名即可
})

实现原理 #

Paper.js的Tween.easings是对外暴露的可写静态对象，运行时追加的方法会被全局识别，不会修改原库代码，也不影响其他内置功能的使用。

内容的提问来源于stack exchange，提问作者Real Noob