[번역글] Framer로 Apple 뮤직 앱 만들기 2
Recreating the Apple Music app in Framer
이전 글 : [번역글] Framer로 Apple 뮤직 앱 만들기(1)
8. 두 번째 카드 일부를 첫 번째 화면에 표시하기
또 하나 자세히 살펴 볼게 있는데요: 두 번째 카드의 일부가 표시되서 스크롤할 수 있다는 신호를 보여줘야 합니다.
그렇게 되면 카드를 더 작게 만들어야 하겠죠. 첫 번째 슬라이스의 오른쪽 가장자리를 자르고, My Favorites Mix 카드의 왼쪽면 또한 동일하 크리로 자르고요. 각 카드에 마스크처럼 사용될 다른 레이어를 배치함으로써 작업을 수행할 수 있습니다.
(그나저나, 위에서 사용한 addPage () 줄은 삭제하셔도 됩니다.)
첫 번째 카드에 대한 wrapper :
wrapper1 = new Layer
width: $.New_Music_mix.width - 15
height: $.New_Music_mix.height
backgroundColor: null
clip: yes
카드의 높이(height)는 동일하게 놔두고, 폭(width)에서 15 포인트를 뺍니다. 레이어의 기본 backgroundColor를 null로 설정하여 제거하고 클립(clip)을 활성화하면 레이어가 마스크로 사용됩니다.
그런 다음에 $. New_Music_mix를 안에 집어넣습니다:
$.New_Music_mix.parent = wrapper1
$.New_Music_mix.y = 0
addPage()가 x 및 y 위치를 자동으로 수정하기 때문에 전에는 필요하지 않았지만, 이제는 vertical 위치를 설정할 필요가 있습니다.
이제 wrapper를 'mixes' PageComponent에 페이지로 추가합니다.
mixes.addPage wrapper1
'My New Music Mix'카드가 부모 레이어에 의해 마스크 되었다두 번째 카드인 My Favourites Mix에서도 같은 작업을 수행합니다...
wrapper2 = new Layer
width: $.Favourites_mix.width - 15
height: $.Favourites_mix.height
backgroundColor: null
clip: yes
$.Favourites_mix.parent = wrapper2
$.Favourites_mix.y = 0 # y position을 리셋한다
$.Favourites_mix.x = -15 # 왼쪽 면부터 자른다
mixes.addPage wrapper2
... 한 가지 차이점이 있다면: 왼쪽 면에서 15 포인트를 자릅니다. 왼쪽에서 x위치를 -15로 설정합니다.
브라우저에서 오픈 - Framer에서 오픈
9. 실제 오늘 날짜 표시하기
For You화면 상단 화면에는 오늘 날짜가 표시됩니다, 하지만 이미지이기에 만약 여러분이 2023 년 6 월 17 일에 보신다면, 날짜가 틀리겠죠. 그러나 텍스트 레이어와 약간의 코드로 쉽게 실제 날짜를 표시할 수 있습니다.
텍스트 레이어 추가하기
먼저 올바른 글꼴 크기, 무게, 위치 및 색상으로 textLayer를 만듭니다. 그 자리에 우리는 동적으로 작동될 텍스트를 함수(function)를 만들 것입니다.
텍스트 레이어 :
today = new TextLayer
text: "SATURDAY, JUNE 17"
fontSize: 13.5
fontWeight: 500
color:# "red"
parent: $.Header_For_You
x: $.Today_s_date.x
y: $.Today_s_date.y
Mac에서는 iOS : San Francisco이 동일한 기본 글꼴이 되므로 fontFamily를 따로 설정할 필요가 없습니다.
fontWeight는 기본값 인 400보다 약간 무거워, 500으로 설정하고요 fontSize는 13.5 포인트를 설정하도록 하겠습니다.(그러면 수치상 27 픽셀이 됩니다.)
그리고 쉽게 위치를 대조를 할 수 있기 위해, 폰트 색깔을 red로 (임시로) 설정했습니다.
기존 날짜는 $ .Today_s_date라는 별도의 레이어에 있고 부모는 $ .Header_For_You입니다. 텍스트 레이어에 동일한 부모(parent)를 지정하면 $ .Today_s_date의 위치를 다시 사용할 수 있습니다.
Text Layer가 조금 위로 움직여야 할 거 같습니다. y의 위치에서 6 픽셀을 줄이면 정확한 위치에 놓을 수 있습니다.
y: $.Today_s_date.y - 3
오늘 날짜를 출력하는 함수
자, 오늘 날짜를 텍스트 문자열로 반환하는 함수(function)는 다음과 같습니다.
todaysDate = ->
days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
now = new Date()
dayOfTheWeekNumber = now.getDay() # = nr. between 0 and 6
monthNumber = now.getMonth() # = nr. between 0 and 11
theDateAsText = days[dayOfTheWeekNumber] + ", " + months[monthNumber] + " " + now.getDate()
return theDateAsText
한 줄씩 설명해드리도록 하겠습니다.
첫 번째 줄은 todaysDate 함수를 만듭니다.
todaysDate = ->
화살표 -> 가 의미하는 뜻은 이렇습니다 : "이것은 함수이며, 호출될 때 그 행이 실행되어야 합니다."
새로운 함수의 첫 번째 줄은 요일 이름이 들어있는 'days' 배열(array)을 만듭니다...
days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
.. 두 번째 줄 또한 같은 의미이고 달별 이름을 표시하고 있습니다.
months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
그리고 now를 만들어 new Date()를 사용하여 JavaScript 객체(date object)를 만듭니다.
now = new Date()
Date() 생성자에게 더 이상의 정보를 제공하지 않으므로 기본적으로 현재 날짜 (실제로는 밀리 초까지의 시간)가 포함됩니다.
Date 객체에는 많은 내장 함수가 있으며, 우리는 그중 세 가지를 사용할 것입니다.
getDay()를 호출하여 현재 요일을 가져옵니다. 0과 6 사이의 숫자를 반환합니다. 주의 첫 번째 요일은 월요일 (토요일)이라고 생각할 수 있지만이 경우 0은 일요일을 나타냅니다.
getMonth()를 호출하여 현재 달의 숫자를 가져옵니다. 여기서는 논의하지 않습니다. 첫 번째 것은 항상 1 월입니다.
getDate()를 호출하여 해당 월의 요일을 가져옵니다. 이 숫자는 0부터 시작하는 번호 매기기 (zero-based numbering)를 사용하지 않으므로 (위의 다른 숫자와 마찬가지로) 1부터 시작합니다.
먼저 요일과 월의 현재 요일에 대한 숫자를 가져와서 dayOfTheWeekNumber 및 monthNumber에 저장합니다.
dayOfTheWeekNumber = now.getDay() # = 0에서 6 사이 숫자
monthNumber = now.getMonth() # = 0에서 11 사이 숫자
이제 우리는이 모든 것을 모아서 모든 것을 포함하는 텍스트 문자열(construct a text string)을 만들 수 있습니다.
theDateAsText = days[dayOfTheWeekNumber] + ", " + months[monthNumber] + " " + now.getDate()
첫 번째 부분 인 days [dayOfTheWeekNumber]는 앞서 만든 배열에서 올바른 요일을 선택하고 두 번째 부분 인 months [monthNumber] 도 같은 방식으로 작동합니다.
그렇게 붙이고 (쉼표와 공백, ", ", 사이에) 마지막 now.getDate()를 마지막에 넣고 날을 표시 합니다
그러고 나서 우리 함수의 마지막 줄은 단순히 그 텍스트 문자열을 반환(return)합니다.
return theDateAsText
함수를 호출하고 이를 print 하면 다음과 같이 됩니다...
print todaysDate()
... 이제 오늘 날짜가 콘솔에 표시됩니다.
텍스트 레이어에서 함수 사용
이제 실제로 todaysDate()를 사용하여 텍스트 레이어 텍스트(text)를 설정할 수 있습니다.
today = new TextLayer
text: todaysDate()
fontSize: 13.5
fontWeight: 500
color:# "#929292"
parent: $.Header_For_You
x: $.Today_s_date.x
y: $.Today_s_date.y - 3
textTransform: "uppercase"
여기서 변경한 두 가지가 있습니다: 텍스트 색상(color)은 "# 929292"으로 바꾸고, 이 textTransform을 사용해서 모든 텍스트를 "대문자(uppercase)"로 변경하게 합니다.
꽤 괜찮아 보이네요, 그럼 이제 sketch layer 의 visible을 no로 설정합니다:
$.Today_s_date.visible = no
브라우저에서 오픈 - Framer에서 오픈
저는 제 functions 들을 프로젝트 시작 부분에 넣는 것을 선호합니다. 그래서 위의 프로젝트에서 Sketch import 바로 아래에 별도의 'Functions' fold를 만들었습니다.
10. 탭 간 전환하기
For You화면도 준비가 되었으니 이제 서로 두 화면을 전환하는 것이 가능하게 됐습니다.
따라서 $.Tab_Library 탭을 탭 하면이 화면이 나타나야 하며 $.Tab_For_You화면이 숨겨져 있어야 합니다.
$.Tab_Library.onTap ->
scroll_library.visible = yes
scroll_for_you.visible = no
그리고 $.Tab_For_You를 탭을 탭 하면 그 반대로 되야겠죠
$.Tab_For_You.onTap ->
scroll_for_you.visible = yes
scroll_library.visible = no
가져온 레이어에 이벤트를 빠르게 추가하는 방법은 다음과 같습니다.
탭이 정확하게 활성화가 되어야 할 필요가 있습니다 그러기 위해선 아래 줄을 두 이벤트 처리기에 모두 추가하여 작업을 수행합니다.
#모든 tab을 회색으로 만든다
for tab in $.Tabs.children
tab.saturate = 0
tab.opacity = .6
# 이것만 빼고
@saturate = 100
@opacity = 1
for... in 루프는 앞에서 했던 것처럼 모든 탭을 회색으로 만들고 마지막 두 줄은 현재 탭을 다시 빨간색으로 만듭니다.
마지막 두 줄에서는 이렇게 쓰면 됩니다:
this.saturate = 100
this.opacity = 1
여기서 'this'는 이벤트를 받은 탭이고, 탭된 이벤트입니다, 그러나 This 대신 @를 쓸 수 있습니다.
그리고 처음에 프로토 타입이 시작될 때 For You화면이 숨겨져 있어야 합니다:
#처음에 For You 스크린을 숨긴다
scroll_for_you.visible = no
브라우저에서 오픈 - Framer에서 오픈
11. Now Playing 스크린
이제 우리가 우리가 사용하지 않는 아트보드는 Now Playing 스크린이 남아있는데요. 이것도 역시 스크롤 가능한 스크린입니다 (또한 가사와 다음 노래 목록을 포함하고 있습니다).
scroll_now_playing = new ScrollComponent
width: Screen.width
height: Screen.height - 28
y: 28
scrollHorizontal: no
directionLock: yes
화면 상단에 실제로 간격이 있기 때문에 ScrollComponent는 28 포인트 낮게 위치해 있습니다. Now Playing 스크린은 상태 Status Bar의 20 포인트 (40 픽셀) 아래 8 포인트 (16 픽셀)에서 시작됩니다.
더 낮게 배치되었기 때문에 height를 설정할 때 Screen.height에서 같은 28포인트를 떨어 뜨립니다.
결국 우리가 보여주고 싶은 모습은 이런 모습이죠:
볼륨을 변경하거나, 노래의 지점을 스크롤할 때 스크린이 스크롤되는 것을 방지하고 싶기 때문에 Direction Lock을 설정해야 합니다.
Now Playing 스크린에 필요한 ScrollComponent 설정이제 아트 보드를 불러와 x값을 0으로 설정하고 ScrollComponent의 content 레이어에 추가합니다. (wrap()을 사용하지 않을 때는. content가 필요하기 때문입니다)
$.Now_Playing.x = 0
$.Now_Playing.parent = scroll_now_playing.content
페이지 끝 부분에 많은 공간이 있음을 느끼 셨을 것입니다.
Now Playing 끝에 있는 추가 공간이는 contentInset (bottom에 있는)에 neagative값을 설정함으로써 사용자가 화면을 보지 않고 페이지 끝에 도달할 수 있게 되는데요 (overdrag라고 함).
ScrollComponent 속성에 다음 줄을 추가합니다.
contentInset:
bottom: -150
Overdrag 추가공간잘 진행되고 있습니다.
이제 우리가 이미 작업했었던 Tab Bar fold 에 이 코드 라인을 넣어주세요
$.Tabs.y = Screen.height
이제 Tab Bar는 스크린 밑으로 가게 됩니다.
나중에 Now Playing 스크린에서 Mini Player로 전환되는 애니메이션이 적용될 때 Tab Bar를 다시 불러올 것입니다.
브라우저에서 오픈 - Framer에서 오픈
12. Now Playing 화면 뒤에 투명 회색 오버레이 넣기
Now Playing 스크린 뒤에 있는 화면의 상단 (Library 또는 For you)은 어두운 회색 오버레이와 함께 여전히 표시되어야 합니다.
이 오버레이는 화면 크기와 같은 단순한 레이어입니다. 30% 투명 검은색으로 설정합니다, 이렇게요:
overlay = new Layer
frame: Screen.frame
backgroundColor: "rgba(0,0,0,0.3)"
placeBehind() 함수를 사용하여 Now Playing 화면 아래에서 overlay 레이어를 이동합니다:
overlay.placeBehind scroll_now_playing
하지만 몇 가지 세부 사항이 빠져 있습니다.
지금 재생 중 화면은 둥근 모서리가 있어야 하지만 스크롤 업하면 보이지 않습니다.
Now Playing 화면에 둥근 모서리가 없습니다.그리고 뒷면의 화면은 똑같이 카드처럼 보일 것입니다.
Now Playing 화면과 아래에있는 카드는 stack된 카드처럼 보입니다.어떻게 모서리를 둥글게 만들수 있을까요? 간단합니다 : ScrollComponent는 약간의 borderRadius, 8포인트 값을 줍니다.
scroll_now_playing = new ScrollComponent
width: Screen.width
height: Screen.height - 28
y: 28
scrollHorizontal: no
directionLock: yes
contentInset:
bottom: -150
borderRadius:
topLeft: 8
topRight: 8
(Framer Design이 출시된 이후로 이제는 다른 모서리에 각 코너 값을 다르게 변경할 수 있게 됐습니다. 하단 모서리에는 bottomRight와 bottomLeft를 사용하면 됩니다.)
이제, Now Playing 밑에 있는 scroll_library 화면 또한 카드처럼 보이게 해야 합니다.
우리는 같은 양의 borderRadius를 주고, 20포인트를 아래로 움직여서 상태 바 바로 아래에 있게 합니다.
조금 줄어들 필요가 있지만 수평적으로만 적용하면 96 %의 scaleX가 적당합니다.
scroll_library.props =
borderRadius: 8
y: 20
scaleX: 0.96
Status Bar뒤에 표시되는 배경화면 색은 검은색이 아니고 어두운 회색이어야 합니다. 하지만 현재 screen에는 여전히 기본 black backgroundColor가 있기 때문에 변경합니다:
Screen.backgroundColor = "#9D9D9D"
(필자가 생각하기에는 배경화면 값은 global 값이 라고 생각하기에 Sketch import 코드 바로 아래에 배치했습니다.)
아, 그리고 더 어두운 배경 때문에 Now Playing 스크린이 보일 때 하얀 Staus Bar가 있어야 합니다. 그때는 invert 값으로 100% 주면 됩니다.
$.Status_Bar.invert = 100
브라우저에서 오픈 - Framer에서 오픈
13. 오디오 플레이어 모듈을 사용하여 음악 플레이 하기
Framer의 디자이너 Benjamin den Boer는 Framer에서 오디오 플레이어를 만드는 것이 매우 쉬운 모듈을 만들었습니다.
먼저 Framer-AudioPlayer모듈을 ZIP으로 다운로드하세요:
압축을 풀고 audio.coffee파일 ('module'폴더에 있습니다)을 찾아 프로젝트 창으로 드래그하세요.
그러고 나면, 이 줄이 프로젝트의 맨 위에 추가된 것을 볼 수 있습니다.
audio = require 'audio'
(그러면 파일이 또한 'modules'폴더에 자동으로 복사됩니다.)
모듈의 GitHub 페이지에 설명된 대로 우리는 라인을 다음과 같이 변경합니다 :
{AudioPlayer} = require "audio"
그리고이 시점부터 새로운 종류의 객체 인 AudioPlayer를 만들 수 있습니다:
audio = new AudioPlayer
frame: $.Button_Pause.frame
parent: $.Now_Playing
기존의 Pause 버튼의 frame을 사용하여 크기와 위치를 복사하도록 하겠습니다. 그러면 AudioPlayer가 정확히 Pause 버튼 위에 놓입니다.
또 음악이 필요하겠죠. 온라인 음악을 사용하기 위해 90초짜리 Apple 음악 preview clip에서 Onuka 노래를 사용했습니다.
audio = new AudioPlayer
frame: $.Button_Pause.frame
parent: $.Now_Playing
audio: "http://audio.itunes.apple.com/apple-assets-us-std-000001/AudioPreview30/v4/a2/3c/57/a23c57a3-09b2-4742-c720-8fa122ab826c/mzaf_6357632044803095145.plus.aac.ep.m4a"
프리뷰를 어떻게 찾았냐구요? 저는 온라인 툴로 Apple Music의 카탈로그를 검색했었습니다.
그런 다음 Safari의 Web Inspector를 사용하여 음악을 재생할 때 다운로드 한. m4a 파일을 확인한 다음 해당 URL을 복사했었습니다.
제가 좋아하는 노래이지만, 'misto'(місто)가 우크라이나어로 '도시'라는 것 말고는 사실 무엇에 대한 노래인지를 전혀 알지 못합니다.
아무튼, 이미 Pause 버튼이 있기 때문에 음악을 재생할 수 있습니다. 탭 해 보세요!
일시 중지 및 재생 버튼 간 전환하기
오디오 플레이어에는 Play 버튼이 있어야 하며, 음악이 재생되면 Pause 버튼이 있어야 합니다.
Play 버튼이 이미 import 돼있지만, 스케치에서 숨겨진 그룹 안에 있기 때문에 현재 꺼져 있는 상태입니다
오디오 플레이어에는 하위 레이어 인 controls에 자체 Play / Pause 버튼이 있습니다. 이 레이어의 image로 가져온 재생 버튼 $ .Button_Play으로 설정해야 합니다.
audio.controls.image = $.Button_Play.image
그런 다음 오디오 플레이어 아래에서 계속 표시되는 일시 중지 단추를 숨길 수 있습니다.
$.Button_Pause.visible = no
혹시 여러분이 생각하시기에 Play 버튼이 크다고 느껴지지 않으신가요?
Play 버튼에게 무슨일이?아무래도 뭔가를 고쳐야 할 것 같습니다. 모듈이 얼마 동안 업데이트되지 않은 관계로 포인트 대신 픽셀 단위로 계산되어있습니다. 그래서 버튼은 원하는 크기의 두 배 사이즈로 보이고 있습니다.
그러나 부모의 size를 제공하면 문제를 해결할 수 있습니다...
audio.controls.size = audio.size
... x와 y를 0으로 설정하여 위치를 변경하십시오. (point를 사용하면 x와 y 동시에 설정할 수 있습니다.)
audio.controls.point = 0
하나 더. 음악이 재생되면 Pasue 버튼이 표시되고 중지되면 다시 Play 버튼이 표시되어야 합니다.
이 모듈에는 controls에 대한 몇 가지 기능이 있으며 탭 할 때마다 호출이 됩니다.
showPause () - 음악 재생이 시작될 때 트리거 됩니다.
showPlay () - 음악이 중단되면 트리거 됩니다.
우리도 'Pause 버튼 표시'및 'Play 버튼 표시'에 사용해 보도록 해보죠.
# Play 버튼 탭 했을 때
audio.controls.showPause = ->
@image = $.Button_Pause.image
# Pause버튼 탭 했을때
audio.controls.showPlay = ->
@image = $.Button_Play.image
audio.controls 레이어에 탭을 주었고, @image를 사용해 스케치 버튼의 이미지로 변경합니다.
다음 단계에도 비슷한 기능을 사용하여 앨범 아트를 애니메이션 해보도록 하겠습니다.
브라우저에서 오픈 - Framer에서 오픈
14. 앨범커버에 애니메이션 넣기
음악이 재생될 때 앨범 아트는 현재와 같이 전체 크기이지만 일시 중지되면 앨범 커버가 축소되고 그림자가 사라지게 됩니다.
FYI : 원래 앱의 그림자는 실제로 blur 값을 더 주지만, 저희가 쓰는 앨범 표지는 검은색이므로 그림자를 간단하게 사용하도록 하겠습니다.
이 두 상태를 애니메이션 하기 위해 우리는 물론 Framer States를 사용할 것입니다.
한 가지, 시작하기 전 먼저 우리는 몇 가지 것을 설정해야 합니다.
설정
나중에 우리는 Mini Player에서 앨범 표지를 아주 작게 보여줄 것입니다... 그리고 지금 Now Playing 전체 화면을 사라지게 할 것이고요.
그렇기 때문에 앨범 아트 레이어를 ScrollComponent에 직접적으로 놓아야 하는데요.
단 한 줄로 쉽게 끝낼 수 있습니다.
$.Album_Cover.parent = scroll_now_playing.content
여전히 ScrollComponent에 있지만 Now Playing 스크린과 형제(sibling)로써 독립적이게 됐습니다.. (그리고 포지션 또한 수정할 필요조차 없고요)
다음으로 기존 그림자를 제거해야 합니다. 스케치 파일에서 그림자로 설정한 그룹 $.Album_Cover_shadow 레이어를 숨기면 됩니다.
$.Album_Cover_shadow.visible = no
표지의 이미지는 모서리가 둥글지만 Framer의 그림자는 PNG 파일의 투명도를 고려하지 않으므로 레이어 자체에 둥근 모서리를 부여해야 합니다.
$.Album_Cover.borderRadius = 6
'재생'및 '일시 중지'상태 만들기
이제 States을 정의할 수 있습니다.
음악이 재생될 때 앨범 표지는 다음과 같아야 합니다.
음악이 재생되는 동안 앨범 표지가 표시되는법전체 311 x 311 포인트로 표시됩니다 - 따라서 scale 은 1입니다.
그림자의 색상은 검은색으로 40 % 입니다 - "rgba (0,0,0,0.4)"
그림자는 아래쪽으로 투영됩니다 - shaodw Y는 20 포인트입니다.
... 뿐만 아니라 모든 방향으로 바깥쪽 - shadowSpread 10포인트
(shadowX가 없습니다.)
그림자의 blur도 높습니다 - Gaussian blur 효과 50 포인트
음악이 일시 중지되면 다음과 같이 보입니다.
음악이 멈춰있는 동안 앨범 표지가 표시되는법앨범은 249 x 249입니다. - 0.8의 sacle을 만듭니다.
그림자는 매우 가볍게 10% 검은색입니다 - "rgba (0,0,0,0.1)"
shadowY: 19
shadowSpread 없음
shadowBlur : 37 points
(그림자는 실제로 눈금이 변경되어 결국 20 % 작아집니다.)
간단하게 하기 위해 우리는 "playing"과 "paused"상태를 호출합니다. 그리고 동시에 정의하도록 하겠습니다 :
$.Album_Cover.states =
playing:
scale: 1
shadowColor: "rgba(0,0,0,0.4)"
shadowY: 20
shadowSpread: 10
shadowBlur: 50
frame: $.Album_Cover.frame
animationOptions:
time: 0.8
curve: Spring(damping: 0.60)
paused:
scale: 0.8
shadowColor: "rgba(0,0,0,0.1)"
shadowY: 19
shadowSpread: 0
shadowBlur: 37
frame: $.Album_Cover.frame
animationOptions:
time: 0.5
또한 각 상태에 레이어의 원래 frame을 포함시켰습니다. 이것은 나중에 우리가 Mini Player에서의 위치를 바꿀 세 번째 state을 추가할 것이기 때문입니다.
그리고 animationOptions도 포함시켰습니다.
"playing"상태에 애니메이션을 적용하는 데는 0.8 초가 걸리지만 부드럽게 애니메이션이 마무리 되기 때문에 더 빠르게 보입니다.
"paused"으로 애니메이션을 적용하면 바운스가 발생하지 않으며 (기본 Bezier.ease 커브 사용) 애니메이션 지속 시간은 0.5 초입니다.
애니메이션을 테스트하고 싶으면 stateCycle()을 이용해 앨범커버를 탭해보면 확인해 볼 수 있습니다.
$.Album_Cover.onTap ->
this.stateCycle "paused", "playing"
(이름을 포함시킴으로써 "default"상태는 무시됩니다.)
Album Cover 애니메이션 states 테스팅중꽤 괜찮아 보입니다.
onTap() 이벤트는 이제 삭제하셔도 됩니다 왜냐하면 음악이 시작하고 멈출 때 앨범커버 애니메이션 효과를 줄 것이기 때문이죠.
음악을 시작하고 멈출 때의 상태의 애니메이션
stateSwitch()를 사용하여 애니메이션을 적용하지 않고 레이어를 상태로 전환할 수 있습니다. 이 함수를 사용하여 "paused"상태를 초기 상태로 만듭니다.
$.Album_Cover.stateSwitch "paused"
이제 기존 showPause() 및 showPlay() 함수)의 각 상태에 animate()을 적용할 수 있습니다.
# Play 버튼 탭 했을 때
audio.controls.showPause = ->
@image = $.Button_Pause.image
$.Album_Cover.animate "playing"
# Pause버튼 탭 했을 때
audio.controls.showPlay = ->
@image = $.Button_Play.image
$.Album_Cover.animate "paused"
브라우저에서 오픈 - Framer에서 오픈
