[Framer] Study Day 06(+sketch)
onTap_states 이미지 변경하기
ㅠㅠ 거의 1주일을 고민했는데 못 푼 문제가 생겨 버렸습니다..ㅜㅜ 그래서 오늘은 일부만 작성해보고, 전에 있던 파일들과 어떻게 연동할 것인가 좀 더 생각해 볼려구용..ㅜㅜ
따라라란~ 누르면 이미지가 나타나게 할 수 있습니다!!
사실문제가 요거 하나만 작업하면 잘 작동하는데...ㅜㅜㅜ 다른 페이지들이랑 합쳐지면 아무리 순서를 바꿔도 모션이 안되더라구용..ㅜㅜ 그래서 페이지 정의를 다시 해줘야 하나 싶어서..ㅜㅜ 빨리 그 문제를 풀고 싶군요..ㅜㅜ
실제 작업된 스케치 파일지금 위에 스케치 파일을 보시면 좌우 수평을 맞추기 위해서 로고 좌측에도 gray stroke의 3개의 원을 보실 수 있을 거예요. 그 이유는 저 친구들이 원으로 회전을 하게 되는데, 좌우 수평을 맞추어 중심점을 잡아주기 위해서랍니다! 실 작업은 gray stroke가 없어용~
# Import file "Sample01"
sketch = Framer.Importer.load("imported/Sample01@4x", scale: 1)
sketch.infoLogoOn.states =
on : rotation :0, opacity :1
off : rotation: 45, opacity: 0
[스케치 파일의 infoLogoOn 그룹의 상태가 on/off 일 때에 대한 정의입니다.]
sketch.infoLogoOn.stateSwitch( "off" )
[ 애니메이션이 없는 상태로 바꾼다는 의미인데요 그게 off 상태인데 위에 보시면 off에 대한 정의를 해두었잖아요. 그래서 애니메이션이 없을 때는 off의 상태로 변화할 것이다 라는 것이지요! ]
sketch.infoLogoOff.onTap ->
sketch.infoLogoOn.states.next("on","off")
[ infoLogoOff를 Tap 할 수 있는데, Tap 했을 때의 상태가 on, off ]
sketch.infoLogoOn.states.animationOptions =
curve : "spring (300, 20, 0)"
time: 0.3
[이제 뒤에 있는 코드를 보시면 애니메이션 옵션이라는 것을 알게 되실 것으로 생각되고. 이번에 요 코드를 보면서 '대상. 상태. 옵션' 이렇게 작성된다는 것을 생각할 수 있었어요. ]
넘나 열심히 매일매일 찾아보고는 있는데 좀처럼 페이지를 합하는 것을 할 수가 없어영..ㅜㅜ 빨리 방법을 강구해 보도록 하겠습니다.
1. 위에서 말씀드린 이미지 돌리기 할 때 중점을 어디에 둘 것인가 잘 생각해 보셔야 해요!!
옵션을 둘러보아도, 중점 잡는 게 쉽지가 않더라고요! 스케치에서 작업하실 때 좌우 대칭으로 이미지를 맞춰주시면 중점이 된다는 것! 근데 주의하실 점은 opacity로 숨기시면 안 됩니다! 그러면 이미지가 없다고 인식해요! 그러니까 배경색이랑 동일하게 색을 지정해 주셔야 해요!( 즉, opacity는 이미지가 없다고 인식한다는 것을 깨달았습니다!!!)
2. 음..... 위에서 말씀드린 '대상. 상태. 옵션' 순으로 거의 쓰인다는 것!! 이것도 주의하시고, 알아두시면 나중에 응용할 때 좋을 것 같습니다.!
3. 마지막으로.. 왜... 페이지 전환하는 코드와 쓰이면 이게 안되는지.. 모르겠지만,,,, 빨리 풀고 싶은 문제입니다!!
