パラメトリックサークルスクロール+アレイ

Question

私は今この問題に取り組んできましたが、その周りに道を見つけることはできません。

画面の中央にある「セレクタ」レイヤーを持つ水平スクロールホイールモジュールを作成しようとしていますが、そのアレイ内のレイヤーを選択すると、そのレイヤーが表示されます名前とそれに関連付けられているページ。 つまり、「セレクタ」に「ベージュレイヤー」が表示されると、this.layerは「ベージュページ」.x = 0

の下に表示されます。問題は、したがって、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" 

Answer 1

私はあなたが何をしようとしているが、onMove代わりのonDragを使用することによって達成することができると思います。 とのアニメーションをドラッグしている間に起動しますので、スクロールの速度も得られます。

円でスクロールしているので、スクロールは無限になります。これは、スクロールコンポーネントの幅をモジュロにするたびにxを移動ごとに設定することで実現できます。この例はhereです。あなたのコードにこれを適用するに

あなたは、変更のカップルが必要です

• をコンテンツサイズの出発スクロールを設定
• を高めるために幅の広いプロキシスクロール成分の含有量にレイヤーを追加します。このようなonMoveに変更に
• 使用onMove代わりonDrag
• の内容によって@xを途中オフセット：@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/