Javascript 在paper.js中设置颜色动画

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

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

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 }

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

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);
    }
}

var color1=新颜色（0,1,1）；
var color2=新颜色（1,0,0）；
var-changeFrame=0；
var maxChangeFrames=100；
var path=新路径。圆({
中心：view.center，
半径：70，
fillColor:color1
})
函数FindDiddleColorComponent（组件1、组件2、百分比更改）{
返回（comp2-comp1）*百分比更改+comp1；
}
函数findMiddleRGBColor（c1、c2、百分比更改）{
返回新颜色（findMiddleColorComponent（c1.red，c2.red，percentChanged），
FindDiddleColorComponent（c1.绿色，c2.绿色，百分比变化），
FindDiddleColorComponent（c1.蓝色，c2.蓝色，百分比变化））；
}
函数onFrame（事件）{
if（changeFrame

如果这是您正在寻找的类型，我接下来的步骤可能是创建一个新对象，其中包含圆、

changeFrame

、

maxChangeFrames

，以及两个helper函数。这样，用于设置颜色动画的所有代码都将包含在一个对象中。

在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);
    }
}

var color1=新颜色（0,1,1）；
var color2=新颜色（1,0,0）；
var-changeFrame=0；
var maxChangeFrames=100；
var path=新路径。圆({
中心：view.center，
半径：70，
fillColor:color1
})
函数FindDiddleColorComponent（组件1、组件2、百分比更改）{
返回（comp2-comp1）*百分比更改+comp1；
}
函数findMiddleRGBColor（c1、c2、百分比更改）{
返回新颜色（findMiddleColorComponent（c1.red，c2.red，percentChanged），
FindDiddleColorComponent（c1.绿色，c2.绿色，百分比变化），
FindDiddleColorComponent（c1.蓝色，c2.蓝色，百分比变化））；
}
函数onFrame（事件）{
if（changeFrame

---

如果这是您正在寻找的类型，我接下来的步骤可能是创建一个新对象，其中包含圆、

changeFrame

、

maxChangeFrames

，以及两个helper函数。这样，用于设置颜色动画的所有代码都将包含在一个对象中。

下面是一个使用my library folio.js（）将颜色从一个混合到另一个的示例，它使用插值函数扩展了paper.js功能（用于交叉混合颜色）

---

下面是一个使用my library folio.js（）将颜色从一种混合到另一种的示例，它使用插值函数扩展了paper.js的功能（对于交叉混合颜色很有用）

---

是的，众所周知，不允许使用负组件。我正在考虑改变这一点，并将值的钳制进一步向下移动：

---

是的，众所周知，不允许使用负组件。我正在考虑改变这一点，并将值的钳制进一步向下移动：

---

我刚刚解决了这个问题，最后解决了这个问题。你现在应该可以使用所有的数学表达式了：我刚刚解决了这个问题，最后解决了这个问题。您现在应该能够使用所有带颜色的数学表达式：这段代码非常有用，但是findMiddleRGBColor应该以RGB格式而不是RBGThanks格式返回catch。这段代码非常有用，但是findMiddleRGBColor应该以RGB格式而不是RBGThanks格式返回catch。