[Framer Challenge] Thermometer Slider

이 글은 UXD2 그룹원들과 함께하는 Framer Challenge이다.

이번 Framer Challenge 미션은 아래 블로그를 기반으로 시작을 하게 되었다.

Making an animated slider — WotW

1. 디자인 하기

우선 아래와 같이 필요한 화면들을 정리해 본다.

프로토타이핑 전에 우선 위 화면과 같이 각 화면 디자인을 한다. Sketch나 PhotoShop에서 작업을 하고 난 뒤 Framer에서 import도 할 수 있고, 바로 Framer design 창에서 디자인을 할 수 있다. 나는 후자를 선택했다.

2. 프로토타이핑 하기

이번 Challenge에서 새롭게 추가한 것이 있어서 이해를 돕기 위해 기술하고자 한다.

fontFamily 설정

원하는 다른 폰트를 설정하고 싶다면 아래와 같이 할 수 있다. 한글 폰트 중에서는 단연 배달의민족의 도현체를 쓰고 싶다.

#Set fontFamily
tempTitle.fontFamily = Utils.loadWebFont(“Do Hyeon”)
tempTitle.centerX()

Animation global 설정

기본으로 설정된 animation 이 별로라서 항상 아래와 같이 spring으로 만들어 놓고 시작한다.

#Global settings
Framer.Defaults.Animation =
 curve: Spring(damping: 0.75)
 time: 0.3

Drag에 따른 효과 적용

Dragd의 onMove 이벤트를 사용해서 처리하며, Utils.modulate() 함수를 사용하면 조 더 쉽게 로직을 구현할 수 있다.

thermometer.onMove (event, layer) ->
  tempValue = Utils.modulate(thermometer.minX, [-68, 195], [10, 30])
  tempTitle.text = Math.round(tempValue)
  ...

함수 정의하고 사용하기

반복되는 처리가 있는 경우 함수로 만들고 호출해서 사용한다.

#function gaugesDefault
gaugesDefault = ->
 gauge_10.stateCycle(“default”)
 gauge_15.stateCycle(“default”)
 gauge_20.stateCycle(“default”)
 gauge_25.stateCycle(“default”)
 gauge_30.stateCycle(“default”)
#function bg gradient
bgGradien = (fromColor, toColor) ->
 bg.animate
 gradient: 
 start: fromColor
 end: toColor
 angle: 0

변수를 활용

한꺼번에 자주 수정되는 값이 있다면 변수를 지정하고 사용할 수 있다.

#gauges
#gauge_10
gaugesUpHeight = -20
gauge_10.states.on =
 y: gaugesUpHeight
 
#gauge_15
gauge_15.states.on =
 y: gaugesUpHeight

최종 결과물

ThermometerSlider