Adding my own easing functions to javaScript library (Paper.js)

user_10449848 0
Viewed 71

I want to extend the Paper.js library (https://github.com/paperjs/paper.js) to add my own easing functions. The full source code of the library is here: https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.js.

However, the relevant part is this:


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

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

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

I know I can create a local copy of the entire source code and make the changes to the file locally to add my own custom easing functions. However, I wanted to know if there is any way to add my own easing functions without changing the original library and making changes to the other file.

paperjs canvas javascript
1 Answers

You don't even have to do this because Paper.js accepts custom easing functions.
So you simply have to pass your custom easing function when creating the Tween.
Here's a simple sketch demonstrating this.

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