【问题标题】:Adding my own easing functions to javaScript library (Paper.js)将我自己的缓动函数添加到 javaScript 库 (Paper.js)
【发布时间】:2021-11-06 05:18:12
【问题描述】:

我想扩展 Paper.js 库 (https://github.com/paperjs/paper.js) 以添加我自己的缓动函数。该库的完整源代码在这里:https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.js

但是,相关部分是这样的:


var Tween = Base.extend(Emitter, {
    _class: 'Tween',

    statics: {
        easings: new Base({
            linear: function(t) {
                return t;
            },

            easeInQuad: function(t) {
                return t * t;
            }
        })
    },
// More code

我知道我可以创建整个源代码的本地副本并在本地对文件进行更改以添加我自己的自定义缓动函数。但是,我想知道是否有任何方法可以在不更改原始库和更改其他文件的情况下添加我自己的缓动函数。

【问题讨论】:

    标签: javascript canvas paperjs


    【解决方案1】:

    您甚至不必这样做,因为 Paper.js 接受自定义缓动函数。
    因此,您只需在创建 Tween 时传递您的自定义缓动函数。
    这是一个简单的sketch 演示。

    new Path.Circle({
        center: view.center,
        radius: 50,
        fillColor: 'yellow'
    }).tweenTo(
        { fillColor: 'red' },
        {
            duration: 2000,
            easing: function(t) {
                return t;
            }
        }
    );
    

    【讨论】:

    • 谢谢萨森西。这行得通。 :)。是否可以将函数名称传递给缓动参数而不是在这里定义它?我尝试了 easing: easeOutBounce(t) 并在其他地方定义了 easeOutBOunce(t),但出现了错误。
    • 错误提示 t 未定义。
    • 你是在传递之前调用函数,只需传递函数本身:easing: easeOutBounce
    • 谢谢 sasensi。 :)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-01-15
    • 2012-11-27
    • 1970-01-01
    • 2013-06-12
    • 2013-07-13
    相关资源
    最近更新 更多