1

各コンポーネントに負の値を格納できる color delta オブジェクトが 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 }

同じアニメーション効果を実現する簡単な方法など、提案をいただければ幸いです。

4

3 に答える 3

4

paper.js Web サイトには、色のアニメーション化に関する例があります。わずかな変更を加えると、ある色から別の色にアニメーション化してから停止することができます。

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

これがあなたが探しているものである場合、私の次のステップはおそらく、円、、、および 2 つのヘルパー関数を含む新しいオブジェクトを作成することchangeFrameですmaxChangeFrames。そうすれば、色をアニメーション化するために使用されるすべてのコードがその 1 つのオブジェクトに含まれます。

于 2013-08-02T17:10:29.397 に答える
3

はい、負のコンポーネントが許可されていないことは既知の問題です。これを変更して、値のクランプをさらに下に移動することを考えています。

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

于 2014-01-04T16:12:03.977 に答える