0

私はしばらくの間この問題に取り組んできましたが、それを回避する方法を見つけることができないようです.

画面の中央にある「セレクター」レイヤーを使用して、水平スクロールホイールモジュール（「レイヤー」配列で構成される）を構築しようとしています。このレイヤーは、上に着陸した前記配列内のレイヤーを選択し、そのレイヤーの名前とページを表示しますそれはそれに関連付けられています。つまり、「beige layer」が「selector」に着地すると、this.name が this.layer の下に表示され、「beige page」.x=0 になります。

現在問題は、ホイールが onDrag しか動かないことです。そのため、onScroll とは対照的に、ホイールを動かすにはドラッグし続ける必要があります。「レイヤー」配列内のレイヤーの x 位置を「セレクター」を基準にして読み取り、コマンドを起動してみました。また、ページの .parent プロパティをいじってみましたが、うまくいきません。そうあるべきです。

それが役立つ場合は、フレーマーのリンクがありますhttp://share.framerjs.com/psbqx3dvqtz9/

皆さん、どんな助けもいただければ幸いです。

前もって感謝します！

アレックス 

layerCount=8
circleCenterZ=0
circleCenterX= Screen.width / 2
circleRadius= 500
scrollSensitivity= 50
depthOfField= 25
divide= layerCount/Math.PI/1.6
allPosZ=[]
layers=[]
savX = 0
sX = 0
newCat=[]
colors=["green","red","blue","white","pink","purple","beige","orange","yellow","brown"]


select=new PageComponent
    x: 5
    y: 636
    backgroundColor: null
    borderWidth: 5
    clip:false
    scrollVertical:false

scroll = new ScrollComponent # invisible proxy ScrollComponent
    width: Screen.width, y:500
    scrollVertical: false
    height: 306

scroll.content.opacity = 0


colors.forEach (cat,i) ->
    posZ= allPosZ[i]= circleCenterZ+(circleRadius/2)*Math.cos(i/divide)
    posX= circleCenterX+(circleRadius/2)*Math.sin(i/divide)

    layer=layers[i]= new Layer
        width:109
        height:109
        parent:select.content
        y: select.height/5
        borderRadius: 100
        name: colors[i]
        midX: posX
        z: posZ

layers[0].onClick ->
    print this.name

maxDepth = Math.max.apply @, allPosZ
minDepth = Math.min.apply @, allPosZ


for layer,i in layers

    darken = Utils.modulate(layer.z,[maxDepth,minDepth],[0,1], true)
    layer.blur = Utils.modulate(layer.z,[maxDepth/3,minDepth],[0,depthOfField], true)


scroll.content.onDrag ->

    sX = (@.x + savX) / scrollSensitivity



    for layer,i in layers

        posZ= allPosZ[i]= circleCenterZ+(circleRadius/2)*Math.cos((i+sX)/divide)
        posX= circleCenterX+(circleRadius/2)*Math.sin((i+sX)/divide)

        layer.z = posZ
        layer.midX = posX
        darken = Utils.modulate(posZ,[maxDepth,minDepth],[0,1], true)
        layer.blur = Utils.modulate(posZ,[maxDepth/3,minDepth],[0,depthOfField], true)


scroll.content.onDragEnd ->
    savX = sX * scrollSensitivity
    @.x = 0


for i in [0...layerCount]
    category=newCat[i]=new Layer
        backgroundColor: colors[i]
        width: Screen.width
        x: Screen.width*i
        name: colors[i]+" "+"page"
4

1 に答える 1

0

あなたがやろうとしていることは、onMoveの代わりに使用することで達成できると思いますonDrag。これはドラッグとアニメーション中に発生するため、スクロールの速度も得られます。

円を描くようにスクロールしているため、スクロールは無限である必要があります。これは、xon every move をスクロール コンポーネントの幅のモジュロに設定することで実現できます。この例はここにあります。

これをコードに適用するには、いくつかの変更が必要です。

  • 幅の広いプロキシ スクロール コンポーネントのコンテンツにレイヤーを追加して、コンテンツのサイズを大きくします。
  • 開始スクロール オフセットをコンテンツの途中に設定する
  • onMoveの代わりに使用onDrag
  • @xを次のように変更しonMoveます。@x = start + @x % scroll.width
  • onDragEndコードを削除する

これにより、次のコードが生成されます。

layerCount=8
circleCenterZ=0
circleCenterX= Screen.width / 2
circleRadius= 500
scrollSensitivity= 50
depthOfField= 25
divide= layerCount/Math.PI/1.6
allPosZ=[]
layers=[]
savX = 0
sX = 0
newCat=[]
colors=["green","red","blue","white","pink","purple","beige","orange","yellow","brown"]


select=new PageComponent
    x: 5
    y: 636
    backgroundColor: null
    borderWidth: 5
    clip:false
    scrollVertical:false

scroll = new ScrollComponent # invisible proxy ScrollComponent
    width: Screen.width, y:500
    scrollVertical: false
    height: 306

scroll.content.opacity = 0
count = 40
l = new Layer
    width: count * scroll.width
    height: scroll.content.height
    parent: scroll.content
start = -count/2 * scroll.width
scroll.content.x = start


colors.forEach (cat,i) ->
    posZ= allPosZ[i]= circleCenterZ+(circleRadius/2)*Math.cos(i/divide)
    posX= circleCenterX+(circleRadius/2)*Math.sin(i/divide)

    layer=layers[i]= new Layer
        width:109
        height:109
        parent:select.content
        y: select.height/5
        borderRadius: 100
        name: colors[i]
        midX: posX
        z: posZ

layers[0].onClick ->
    print this.name

maxDepth = Math.max.apply @, allPosZ
minDepth = Math.min.apply @, allPosZ


for layer,i in layers

    darken = Utils.modulate(layer.z,[maxDepth,minDepth],[0,1], true)
    layer.blur = Utils.modulate(layer.z,[maxDepth/3,minDepth],[0,depthOfField], true)


scroll.onMove ->

    @x = start + @x % scroll.width

    sX = @x / scrollSensitivity

    for layer,i in layers

        posZ= allPosZ[i]= circleCenterZ+(circleRadius/2)*Math.cos((i+sX)/divide)
        posX= circleCenterX+(circleRadius/2)*Math.sin((i+sX)/divide)

        layer.z = posZ
        layer.midX = posX
        darken = Utils.modulate(posZ,[maxDepth,minDepth],[0,1], true)
        layer.blur = Utils.modulate(posZ,[maxDepth/3,minDepth],[0,depthOfField], true)

for i in [0...layerCount]
    category=newCat[i]=new Layer
        backgroundColor: colors[i]
        width: Screen.width
        x: Screen.width*i
        name: colors[i]+" "+"page"

実際の例はこちら: http://share.framerjs.com/qc7jdyfyw7f6/

于 2016-12-13T13:55:12.943 に答える