Анимированные цвета в paper.js

Question

Есть ли объект цветной дельта в 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 } 

Любые предложения, в том числе более простые способы для достижения того же эффекта анимации будет оценена.

Answer 1

Да, это известная проблема, что отрицательные компоненты не допускаются. Я имею в виду изменения этого и перемещение зажима значений дальше:

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

Answer 2

На веб-сайте 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 и две вспомогательные функции. Таким образом, весь код, используемый для анимации цветов, будет содержаться в одном объекте.

Answer 3

Вот пример смешивания цветов от одного к другому, используя свои библиотеки folio.js (https://github.com/frederickk/folio.js), которая расширяет функциональный paper.js с интерполировать функции (полезно для кросс цветов смешивания)

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