参数圆滚动 + 数组

Question

我已经研究这个问题一段时间了，但似乎找不到解决方法。

我正在尝试构建一个水平滚轮模块（由 "layers" 数组组成），在屏幕中间有一个 "selector" 层，该层选择所述数组中落在的层它，显示所述层的名称和与之关联的页面。也就是说，一旦"beige layer"落在"selector"上，this.name就会显示在this.layer下方，"beige page".x=0

现在的问题是轮子只能在 onDrag 上移动，所以你必须不断拖动它才能移动，而不是 onScroll。我试过读取 "layers" 数组中图层相对于 "selector" 的 x 位置并触发命令，我还尝试使用页面的 .parent 属性，但它没有'按应有的方式工作。

这是一个框架link如果有帮助，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代替onDrag
像这样修改onMove中的@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/

参数圆滚动 + 数组

Parametric Circles Scrolling + Arrays

php

arrays

coffeescript

parametric-equations

framerjs