Параметрическая круговая прокрутка + массивы
Я уже давно работаю над этой проблемой, но никак не могу найти способ ее обойти.
Я пытаюсь построить модуль колеса горизонтальной прокрутки (составленный из массива «слоев») со слоем «селектор» в середине экрана, который выбирает слой в указанном массиве, который приземлился на нем, отображает имя указанного слоя и страницу это связано с этим.
Другими словами, как только «бежевый слой» попадает на «селектор», this.name отображается под слоем this.layer, «бежевая страница» .x = 0
В настоящее время проблема заключается в том, что колесо движется только на Drag, поэтому вы должны продолжать перетаскивать его, чтобы оно двигалось в противоположность OnScroll. Я попытался поиграть с чтением положения 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 = 0colors.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 @, allPosZfor 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) / scrollSensitivityfor 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 = 0for i in [0...layerCount]
category=newCat[i]=new Layer
backgroundColor: colors[i]
width: Screen.width
x: Screen.width*i
name: colors[i]+" "+"page"Решение
Я думаю, что то, что вы пытаетесь сделать, может быть достигнуто с помощью onMove вместо onDrag, Это будет стрелять во время перетаскивания а также анимации, так что вы также получаете скорость прокрутки.
Поскольку вы прокручиваете по кругу, прокрутка должна быть бесконечной. Это может быть достигнуто путем установки x на каждом шаге по модулю ширину прокрутки компонента. Пример этого можно найти Вот.
Чтобы применить это к вашему коду, вам понадобится пара изменений:
- Добавьте слой к содержимому прокси-компонента прокрутки с большой шириной, чтобы увеличить размер содержимого
- Установите начальное смещение прокрутки в середине содержимого
- использование
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 = startcolors.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 @, allPosZfor 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/
Другие решения
Других решений пока нет …