参数圆滚动+数组

Question

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

我正在尝试构建一个水平滚轮模块（由“层”阵列组成），在屏幕中间有一个“选择器”层，用于选择所述阵列中落在其上的层，显示所述层的名称以及与之关联的页面。 也就是说，一旦“beige layer”登陆“selector”，this.name就会显示在this.layer下面，“beige page”.x=0

现在的问题是滚轮只能在 onDrag 上移动，因此您必须不断拖动它才能移动，而不是 onScroll。我尝试过读取“layers”数组中相对于“selector”的图层的 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 而不是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/