Sample

Loading

Sample

리스트 내에 아이템들을 모두 클리어 했을때 완료 메시지를 호출 하는 프로토타입입니다.

Sample

  1. 리스트 내에 아이템이 체크되어 사라질때 다른 아이템의 위치가 자연스럽게 위치를 잡도록 합니다.

  2. 리스트 내에 아이템이 모두 사라졌을때 클리어 UI 호출합니다.

Detail

  1. 클릭하면 높이값이 0이되는 인터렉션

  • [트리거]

    • Tap -> item1,2,3 -> scale -> height = 0


  1. 리스트 아이템이 사라질때 다음 아이템이 따라 움직이는 인터렉션

  • 이를 구현하기 위해서는 두번째 리스트 아이템의 y 좌표가 첫번째 리스트 아이템의 높이값 + y 좌표와 같도록 설정합니다. 마찬가지로 세번째 리스트 아이템의 y 좌표는 두번째 리스트 아이템의 높이값 + y 좌표와 같도록 설정합니다. 이렇게 하면 결과적으로 아이템의 높이값이 줄어들때 리스트 아이템들이 함께 딸려올라갑니다.


  • [변수]

    • item2position = item1.height + item1.y

    • item3position = item2.height + item2.y

  • [트리거]

    • Detect -> move -> item2 -> y -> item2position

    • Detect -> move -> item3 -> y -> item3position


  1. 리스트 아이템들이 모두 사라졌을때 Clear Layer가 호출되는 인터렉션

  • List item의 height를 모두 더한 값이 0이 되면 'Clear!' 레이어가 호출되도록 합니다.


  • [변수]

    • allitemHeight = item1.height + item2.height + item3.height

  • [트리거]

    • detect -> condition -> allitemHeight = 0 -> move -> 'ClearLayer' -> height -> $deviceHeight/2