파라 메트릭 서클 스크롤 + 어레이

Question

지금 당분간이 문제를 해결해 봤지만 주위를 둘러 보지 못했습니다.

"배열"로 구성된 수평 스크롤 휠 모듈을 화면 중앙에 배치하여 배열에 배치 된 레이어를 선택하면 해당 레이어가 표시됩니다. 이름과 관련된 페이지입니다. 즉, "선택기"에 "베이지 색 레이어"가 표시되면 this.name이 "this.layer"아래에 표시됩니다. "베이지 페이지".x = 0

지금 문제는 휠이 onDrag 만 이동한다는 것입니다. 따라서 onScroll과 반대로 이동하려면 계속 드래그해야합니다. "셀렉터"에 상대적인 "레이어"배열에서 레이어의 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에 수정을
• 사용 onMove 대신 onDrag
• 의 내용을 통해 @x을 중간에 오프셋 : @x = start + @x % scroll.width

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/

• 이 다음 코드 결과

가 onDragEnd 코드를 제거