Utilities

Utilities are custom functions in Framer, designed to make things easier to do. For example, they allow you to map values, set delays and intervals, detect devices and more. See below for a complete overview.
Utilities는 Framer의 커스텀 함수로 만드는 작업을 쉽게 하도록 디자인되었다. 예를 들어, 값 맵핑, 딜레이와 주기 설정, 디바이스 인지하는 것들을 허용한다. 아래 자세한 설명을 보기 바란다.

Utils.modulate(value <number>, a <array>, b <array>, limit <boolean>)

Translates a number between two ranges. The easiest way to think about is to convert from miles to kilometers or kelvin to celsius. When you enable limit, it will never return a value outside of the b range. The default value for limit is false.
두 범위 안의 숫자를 변환한다. miles를 kilometers로 혹은 kelvin을 celsius로 바꾸는 가장 쉬운 방법을 생각한다. 여러분이 한계치를 정한다면, b 범위 밖으로 나간 값은 절대 반환하지 않는다. 한계치의 기본값은 false이다.

Arguments

'value' — A variable, representing the input.
'[a, a] — The first range of two numbers.
'[b, b]' — The second range of two numbers.
'limit' — A boolean, set to false by default. (Optional)

print Utils.modulate(0.5, [0, 1], [0, 100])
# Output: 50 

print Utils.modulate(1, [0, 1], [0, 100])
# Output: 100

You can think of modulate as a way to convert numbers between different scales. Like going from Celcius to Farenheit, or Kilometers to Miles.

# Convert to Celsius/Farenheit 
Utils.modulate(celcius, [0, 100], [32, 212])

It's also useful for creating parallax effects on scroll. For example, you can move a layer from 0-10, when scrolling from 0-100.

scroll = new ScrollComponent
    scrollHorizontal: false

layerA = new Layer
    x: 100

# Modulate the scrolling distance 
scroll.on Events.Move, ->
    y = Utils.modulate(scroll.scrollY, [0,100], [0,10])
    layerA.y = y

Utils.cycle(values <array>)

Creates a function that returns the next value in a given array every time you call it.
여러분이 호출할 때마다 주어진 배열 안의 그 다음 값을 반환하는 함수를 생성한다.

Arguments

values — An array of values.

cycler = Utils.cycle(["a", "b", "c"])

print cycler() # Output: "a"
print cycler() # Output: "b"
print cycler() # Output: "c"
print cycler() # Output: "a", returns to start

Utils.labelLayer(layer <Layer object>, text <string>)

Quickly add a label to a layer. It will be text set in Menlo in the center.
레이어에 빠르게 라벨을 추가한다. 이는 텍스트를 중앙에 배열한다.

Arguments

layer — A layer object.
text — A string.

layerA = new Layer

# Add a label to layerA  
Utils.labelLayer(layerA, "Hello")

Utils.round(value <number>, decimals <number>)

Rounds a number.
주어진 숫자 자릿수로 소수점 아래를 반올림한다.

Arguments

value — A floating point number.
decimals — The amount to appear after the decimal point. (Optional)

print Utils.round(100.12345, 0) # Output 100
print Utils.round(100.12345, 2) # Output 100.12
print Utils.round(100.12345, 4) # Output 100.1234

Utils.randomChoice(values <array>)

Select a random item in an array of values.
배열 안의 값 중 랜덤으로 아이템을 선택한다.

Arguments

values — An array of values.

print Utils.randomChoice(["a", "b", "c"]) # Output: "c"
print Utils.randomChoice(["a", "b", "c"]) # Output: "b"
print Utils.randomChoice(["a", "b", "c"]) # Output: "b"
print Utils.randomChoice(["a", "b", "c"]) # Output: "b"
print Utils.randomChoice(["a", "b", "c"]) # Output: "a"

Utils.randomColor(opacity <number>)

Creates a random color with a given opacity. The opacity is optional.
주어진 불투명값으로 랜덤 컬러를 생성한다. 불투명값은 옵션이다.

Arguments

opacity — A number between 0 and 1. (Optional)

layerA = new Layer
layerA.backgroundColor = Utils.randomColor(0.5)

print layerA.backgroundColor
# Output: "rgba(124, 12, 33, 0.5)"  
# 출력 : "rgba(124, 12, 33, 0.5)"

Utils.randomNumber(a <number>, b <number>)

Generate a random number between a and c
a와 c 사이의 랜덤 숫자를 생성한다.

Arguments

a — A number, the first value of the range.
b — A number, the final value of the range.

print Utils.randomNumber(0, 1) # 출력: 0.2
print Utils.randomNumber(0, 100) # 출력: 22

Utils.delay(delay <number>, handler <function>)

Calls a funtion after a delay. Delay is defined in seconds.
주어진 딜레이값 이후에 함수를 호출한다. 딜레이 값은 초로 정의된다.

Arguments

delay — A number, representing seconds.
handler — A function.

Utils.delay 0.5, ->
    print "hello"

# Output: "hello", after 0.5 seconds  
# 출력: "hello", 0.5초 이후에

Utils.interval(interval <number>, handler <function>)

Calls a function every x seconds.
x 초 마다 함수를 호출한다.

Utils.interval 2, ->
    print "hello"

# 출력: "hello"
# 출력: "hello"
# 출력: "hello"
# 출력: "hello" 반복...

Utils.debounce(interval <number>, handler <function>)

Creates a function that will delay the calling of handler until after x seconds have elapsed since the last time it was invoked. Alias to _.debounce.

Arguments

interval — A number, representing seconds.
handler — A function.

handler = Utils.debounce 0.1, ->
    print "hello"

for i in [1..100]
    handler()

# 출력: "hello" only once

Utils.throttle(interval <number>, handler <function>)

Creates a function that will call the wrapped function at most once per x seconds. Alias to _.throttle.

Arguments

interval — A number, representing seconds. handler — A function.

handler = Utils.throttle 0.1, ->
    print "hello"

for i in [1..100]
    handler()

# 출력: "hello" only once

Utils.isWebKit()

Returns: boolean

이 것이 WebKit 브라우저인지 반환한다.

print Utils.isWebKit() # Output true

Utils.isChrome()

Returns: boolean

이 것이 Chrome 브라우저인지 반환한다.

print Utils.isChrome() # Output true

Utils.isSafari()

Returns: boolean

이 것이 Safari 브라우저인지 반환한다.

print Utils.isSafari() # Output true

Utils.isTouch()

Returns: boolean

이 것이 터치가 되는 브라우저인지 반환한다.

print Utils.isTouch() # Output true

Utils.isDesktop()

Returns: boolean

이 것이 데스크탑 브라우저인지 반환한다.

print Utils.isDesktop() # Output true

Utils.isPhone()

Returns: boolean

이 것이 폰 장치인지 반환한다.

print Utils.isPhone() # Output true

Utils.isTablet()

Returns: boolean

이 것이 타블렛 장치인지 반환한다.

print Utils.isTablet() # Output true

Utils.isMobile()

Returns: boolean

이 것이 모바일 장치인지 반환한다.

print Utils.isMobile() # Output true