1

paper.js中是否有color delta对象，可以在每个组件中存储负值？我在这里想要实现的是通过将每个帧中的颜色变化存储在此颜色增量对象中，将一种颜色平滑地设置为另一种颜色。

简单地从另一种颜色中减去一种颜色是行不通的，因为不允许使用负值：

var color1 = new Color(0, 1, 1);
var color2 = new Color(1, 0, 0);
var result = color1 - color2;
console.log(result); // { red: 0, blue: 1, green: 1 }

任何建议，包括实现相同动画效果的更简单方法，将不胜感激。

4

3 回答 3

4

paper.js 网站上有一个关于动画颜色的示例。稍作修改，您就可以让它从一种颜色动画到另一种颜色，然后停止。

// Create a circle shaped path at the center of the view,
// with a radius of 70:
var path = new Path.Circle({
    center: view.center,
    radius: 70,
    fillColor: 'red'
});
var finalColor = new Color('blue');
function onFrame(event) {
    if (path.fillColor.hue != finalColor.hue) {
        path.fillColor.hue += 1;
    }
}

或者，如果您宁愿坚持使用 RGB，那么：

var color1 = new Color(0, 1, 1);
var color2 = new Color(1, 0, 0);
var changeFrame = 0;
var maxChangeFrames = 100;
var path = new Path.Circle({
    center: view.center,
    radius: 70,
    fillColor: color1
})
function findMiddleColorComponent(comp1, comp2, percentChanged) {
    return (comp2 - comp1)*percentChanged + comp1;
}
function findMiddleRGBColor(c1, c2, percentChanged) {
    return new Color(findMiddleColorComponent(c1.red, c2.red, percentChanged),
                     findMiddleColorComponent(c1.green, c2.green, percentChanged),
                     findMiddleColorComponent(c1.blue, c2.blue, percentChanged));
}
function onFrame(event) {
    if (changeFrame < maxChangeFrames) {
        changeFrame += 1;
        path.fillColor = findMiddleRGBColor(color1, color2, changeFrame/maxChangeFrames);
    }
}

如果这是您正在寻找的东西，我的下一步可能是创建一个包含圆、 、 和两个辅助函数的新changeFrame对象maxChangeFrames。这样一来，所有用于为颜色设置动画的代码都将包含在该对象中。

于 2013-08-02T17:10:29.397 回答
3

是的，不允许使用负面组件是一个已知问题。我正在考虑改变这一点并将值的限制进一步向下移动：

https://github.com/paperjs/paper.js/issues/271

于 2014-01-04T16:12:03.977 回答
1

这是一个使用我的库 folio.js ( https://github.com/frederickk/folio.js ) 将颜色从一种混合到另一种的示例，它通过插值函数扩展了 paper.js 功能（对于交叉混合颜色很有用）

http://kennethfrederick.com/folio.js/spectrum.html

于 2013-12-03T09:35:05.393 回答