0

我想使用 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")
4

2 回答 2

0

State 是 Animation 的封装，Animation 中不支持 Image。

只有数字图层属性可以设置动画。

http://framerjs.com/docs/

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

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

于 2014-12-17T22:51:36.297 回答
0

目前有两种方法可以解决这个问题：

制作 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 motion 之类的外部库。我在这里为你做了一个例子：

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

希望这可以帮助！

于 2015-10-19T14:48:42.773 回答