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

State是Animation的包装器，在Animation中不支持Image。

只能为数字图层属性设置动画。

http://framerjs.com/docs/

您可以手动设置图层动画。

或制作不可见的图层，更改图层状态并观察图层的位置，如layer.on "change:x", (e)->，但未使用未记录的特征

Answer 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)"

或者，如果无论如何你需要在颜色之间使用真正的补间，你可以尝试像pop动作这样的外部库。我在这里为你做了一个例子：

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

希望这有帮助！

颜色过渡Framerjs

2 个答案: