Параметрические кружки Прокрутка + массивы

Question

Я уже некоторое время работаю над этой проблемой, но не могу найти пути вокруг нее.

Я пытаюсь создать модуль горизонтального прокрутки (состоящий из массива «слои») с «селекторным» слоем в середине экрана, который выбирает слой внутри упомянутого массива, который приземлился на него, отображает упомянутый слой имя и связанная с ним страница. Другими словами, когда «бежевый слой» приземляется на «селектор», это имя отображается под этим слоем «бежевая страница» .x = 0

В настоящее время проблема заключается в том, что колесо перемещается только на Drag, поэтому вам нужно продолжать перетаскивать его, чтобы он перемещался в отличие от onScroll. Я пробовал играть с чтением x-положения слоев в массиве «layers» относительно команд «selector» и «fire off», и я также пытался играть с параметрами .parent для страниц, но он не работает. путь должен.

Вот ссылка Framer, если это помогает, 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/