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 }
任何建议,包括实现相同动画效果的简单方法,都会受到赞赏。
答案 0 :(得分:4)
paper.js网站上有一个关于动画颜色的example。通过微小的修改,您可以将其从一种颜色设置为另一种颜色,然后停止。
// 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
和两个帮助函数。这样,用于设置颜色动画的所有代码都将包含在该对象中。
答案 1 :(得分:3)
是的,已知问题是不允许使用负面组件。我正在考虑改变这种情况,并进一步降低价值限制:
答案 2 :(得分:1)
以下是使用我的库folio.js(https://github.com/frederickk/folio.js)将颜色从一个颜色混合到另一个颜色的示例,它使用插值函数扩展了paper.js功能(对交叉混合颜色很有用)