将我自己的缓动函数添加到 javaScript 库 (Paper.js)
Adding my own easing functions to javaScript library (Paper.js)
我想扩展 Paper.js 库(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。
然而,相关部分是这样的:
var Tween = Base.extend(Emitter, {
_class: 'Tween',
statics: {
easings: new Base({
linear: function(t) {
return t;
},
easeInQuad: function(t) {
return t * t;
}
})
},
// More code
我知道我可以创建整个源代码的本地副本并在本地对文件进行更改以添加我自己的自定义缓动函数。但是,我想知道是否有任何方法可以在不更改原始库和更改其他文件的情况下添加我自己的缓动函数。
您甚至不必这样做,因为 Paper.js 接受自定义缓动函数。
所以你只需要在创建 Tween
.
时传递你的自定义缓动函数
这是一个简单的 sketch 演示。
new Path.Circle({
center: view.center,
radius: 50,
fillColor: 'yellow'
}).tweenTo(
{ fillColor: 'red' },
{
duration: 2000,
easing: function(t) {
return t;
}
}
);
我想扩展 Paper.js 库(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。
然而,相关部分是这样的:
var Tween = Base.extend(Emitter, {
_class: 'Tween',
statics: {
easings: new Base({
linear: function(t) {
return t;
},
easeInQuad: function(t) {
return t * t;
}
})
},
// More code
我知道我可以创建整个源代码的本地副本并在本地对文件进行更改以添加我自己的自定义缓动函数。但是,我想知道是否有任何方法可以在不更改原始库和更改其他文件的情况下添加我自己的缓动函数。
您甚至不必这样做,因为 Paper.js 接受自定义缓动函数。
所以你只需要在创建 Tween
.
时传递你的自定义缓动函数
这是一个简单的 sketch 演示。
new Path.Circle({
center: view.center,
radius: 50,
fillColor: 'yellow'
}).tweenTo(
{ fillColor: 'red' },
{
duration: 2000,
easing: function(t) {
return t;
}
}
);