미 밴드 4 워치 페이스 만들기 - 3편: 코드 파헤치기 2 [아날로그 시계와 애니메이션]

이번 글에서는 아날로그시계와 애니메이션에 대해서 알려드리려 합니다.

 

1. 아날로그시계 (AnalogDialFace)

디지털시계 대신에 아날로그 워치 페이스도 가능합니다. 초침까지 지정 가능합니다. 다만 초침은 화면이 켜져 있는 동안 계속 업데이트되므로 배터리 소모가 증가하는 것이 단점입니다.

 

"AnalogDialFace": {
    "Hours": {
      "OnlyBorder": false,
      "Color": "0xC000AF",
      "Center": {
        "X": 60,
        "Y": 120
      },
      "Shape": [
        {        
          "X": 00,
          "Y": 00
        },
        //좌표 나열            
      ]
    },
    "Minutes": {
      //Hours 와 동일
      
    },
    "Seconds": {
      //Hours 와 동일

      "CenterImage": {
        "X": 58,
        "Y": 118,
        "ImageIndex": 1
      }
    }
  }

AnalogDialFace는 Hours, Minutes, Seconds 3개의 항목으로 구성되어 있습니다. 코드 내에서 항목의 순서와 상관없이 워치 페이스에서는 초침이 맨 위에, 시침이 맨 아래에 구성됩니다.

 

a. OnlyBorder

true, false 값을 가지는 속성입니다. true일 경우에는 설정한 도형의 테두리만 나오게 됩니다. false인 경우에는 속이 꽉 찬 도형으로 나옵니다.

 

b. Color

시곗바늘의 색을 지정해 주는 속성입니다. 6자리로 구성된 Hex color 코드를 사용하시면 됩니다. 맨 앞의 "0x"는 뒤에 오는 숫자가 16진수임을 나타내는 접두사입니다. 컬러코드는 아래 사이트를 참고해서 원하는 색상을 넣으시면 됩니다.

https://www.color-hex.com/

Color Hex Color Codes

 

c. Center

시곗바늘의 중심을 지정하는 속성입니다. 시, 분, 초 각각 다른 중심을 지정해 줄 수 있습니다. 미 밴드 워치 페이스의 중앙은 (X, Y)=(60,120)입니다.

 

d. Shape

시곗바늘로 사용할 도형의 좌표를 대괄호 내부에 나열하면 됩니다.  구조는 { "X": 좌표값, "Y": 좌표값 }입니다. 순서대로 점을 이은 다음 내부를 지정된 색으로 채우기 때문에 순서가 매우 중요합니다.

 

예시 시곗바늘 도형

아래 코드에서는 그림에 있는 직사각형의 꼭짓점들이 나열되어 있습니다. 차이점은 마지막 두 점의 순서가 다릅니다.

A) "Shape": [   {     "X": 15,     "Y": 5   },   {     "X": 15,     "Y": -5   },   {     "X": -10,     "Y": -5   },   {     "X": -10,     "Y": 5   } ]

B) "Shape": [   {     "X": 15,     "Y": 5   },   {     "X": 15,     "Y": -5   },   {     "X": -10,     "Y": 5   },   {     "X": -10,     "Y": -5   } ]

결과는 다음과 같습니다.

1시를 가리키는 시침 차이점

 

e. CenterImage

시곗바늘 중심에 축을 표현하는 이미지를 넣을 수 있습니다. 회전하지 않는 고정된 이미지입니다.

"CenterImage": {
        "X": 58,
        "Y": 118,
        "ImageIndex": 1
      }

이미지의 왼쪽 상단의 위치를 X, Y 좌표에 등록할 수 있습니다. 넣으려는 이미지의 크기를 고려해서 좌표를 변경해야 합니다.

 

직접 만들어 본 아날로그시계입니다. 시침은 하얀색, 분침은 테두리만 하얀색, 초침은 빨간색 직선으로 표현했습니다. 중앙에 시곗바늘 중심은 빨간 원으로 설정했습니다.

예시입니다

 

2. 애니메이션 (Animation)

"Other": {
  "Animation": {
    "AnimationImage": {
      "X": 0,
      "Y": 0,
      "ImageIndex": 78,
      "ImagesCount": 9,
      "X3": 100
    },
    "Speed": 0,
    "RepeatCount": 1000,
  }
}

Other 항목 아래에 Animation이 있습니다. 시간이나 활동량에 상관없이 독립적으로 계속 움직이는 애니메이션을 넣을 수 있습니다.

 

a. AnimationImage

애니메이션에 사용할 이미지를 지정하는 항목입니다. 이미지의 좌상단의 좌표와 첫 이미지의 번호, 사용하는 이미지의 개수를 지정합니다. X3의 정확한 의미를 찾지 못했습니다. 하지만 개발자 코멘트에서 X3의 값을 100으로 설정할 것을 권고했습니다.

 

b. Speed

애니메이션이 움직이는 속도를 나타냅니다. 0부터 시작합니다. 너무 빠르면 동작하지 않을 수 있습니다.

 

c. RepeatCount

애니메이션의 반복 횟수를 지정합니다.

 

애니메이션 결과물

워치 페이스를 지정하면 링크한 위의 영상처럼 지속적으로 움직이게 됩니다. (아이폰 AmazTools를 사용해서 동기화하니 오류가 떠서 유튜브에 있는 영상으로 대체합니다.)

 

 

마치며

코드 파헤치기 1, 2를 통해서 워치 페이스를 다양하게 꾸미고 공유해 보시기 바랍니다!

 

 

[워치페이스 만들기 시리즈]

2019/08/26 - [전자기기/미밴드] - 미 밴드 4 워치 페이스 만들기 - 1편: 워치 페이스 간단 수정하기

2019/08/27 - [전자기기/미밴드] - 미 밴드 4 워치 페이스 만들기 - 2편: 코드 파헤치기 1 [기본 기능편]

2019/09/16 - [전자기기/미밴드] - 미 밴드 4 워치 페이스 만들기 - 3편: 코드 파헤치기 2 [부가기능편]