0

Framer.js を使用して 2 つの背景色の間でシームレスなトランジションを作成したい

白い四角形を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

現在、それにアプローチするには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)"

または、何らかの方法で色の間に実際のトゥイーンが必要な場合は、ポップ モーションなどの外部ライブラリを試すことができます。ここであなたの例を作りました：

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

お役に立てれば！

于 2015-10-19T14:48:42.773 に答える
0

State は Animation のラッパーであり、Image は Animation ではサポートされていません。

アニメーション化できるのは、数値レイヤー プロパティのみです。

http://framerjs.com/docs/

レイヤーを手動でアニメーション化できます。

または非表示のレイヤーを作成し、レイヤーの状態を変更し、レイヤーの位置を観察しlayer.on "change:x", (e)-> ますが、文書化されていない機能が慎重に使用されています

于 2014-12-17T22:51:36.297 に答える