Question

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

我正在尝试构建一个水平滚轮模块（由“图层”数组组成），在屏幕中间有一个“选择器”图层，用于选择落在其上的所述阵列中的图层，显示所述图层的名称以及与之关联的页面。换句话说，一旦“米色层”落在“选择器”上，this.name将显示在this.layer下方，“米色页面”.x = 0

现在的问题是轮子只在onDrag上移动，所以你必须继续拖动它才能移动而不是onScroll。我已经尝试过阅读相关于“selector”的“layers”数组中的图层的x位置并触发命令，我也尝试使用页面的.parent属性，但它不起作用应该的方式。

如果有帮助，这是一个框架链接，http://share.framerjs.com/psbqx3dvqtz9/

任何帮助都会受到赞赏，伙计们。

提前致谢！

Alex

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
修改@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/

参数圆圈滚动+数组

1 个答案: