Цвет переход Framerjs

Question

Я хочу, чтобы создать плавный переход между двумя цветами фона с использованием Framer.js

Я попытался ниже код, который перемещает белый квадрат 500px, а затем, когда он достигает конца его переключения мгновенно «красный» , Отсутствие плавного перехода цвета.

Любые идеи о том, как это решить?

layerA=new Layer() 

layerA.states.add 
    first: {backgroundColor:"#ffffff"} 

layerA.states.add 
    second: {backgroundColor:"red",x:500} 

layerA.states.switchInstant("first") 
layerA.states.switch("second") 

Answer 1

Состояние - это обертка для анимации, а изображение не поддерживается в анимации.

Свойства только числового слоя могут быть анимированы.

http://framerjs.com/docs/

Вы можете анимировать слой вручную.

или сделать невидимым слой, изменить состояние слоя и наблюдать положение слоя, как layer.on "change:x", (e)-> но undocumentated особенность тщательно используется

Answer 2

Там в настоящее время 2 пути приближения, что:

сделать 2 слоя (белый один на вершина красного), а затем исчезают между 2.

как это:

parentLayer = new Layer 
width:400 
height:1334 
backgroundColor: "#transparent" 


testLayerRed = new Layer 
    width:400 
    height:1334 
    backgroundColor: "#FF3300" 
    superLayer: parentLayer 

testLayer = new Layer 
    width:400 
    height:1334 
    backgroundColor: "#FFFFFF" 
    superLayer: parentLayer 

#move the layer, then call the transition 
parentLayer.on Events.Click, -> 
    parentLayer.animate 
     properties: 
      x:350 
     curve:"spring(500,50,10)" 
    changeBackground() 

changeBackground = -> 
    # simply fade the top layer 
    testLayer.animate 
     properties: 
      opacity:0 
     curve:"spring(200,50,10)" 

Или, если вам нужно real tween между цветами, вы можете попробовать внешнюю библиотеку, такую ​​как движение поп-музыки. Я сделал пример для ваших здесь:

http://share.framerjs.com/24o7i2n5d2y8/

Надеется, что это помогает!