注目キーワード
  1. CSS
  2. WordPree
  3. Amazfit Bip

AMAZFIT Bip 自作 ウォッチフェイス⌚カスタム文字盤を作る!小技集

AMAZFIT Bip ウォッチフェイスの小技集

小技を使っている、真似してみたい AMAZFIT Bip ウォッチフェイスのメモです。
携帯を変えたら、自作 ウォッチフェイスのデータが消えちゃったので、また作るぞー

AMAZFIT Bip ウォッチフェイスの小技集

OPPOでは「Notify & Fitness for Amazfit」のアイコンも通知エリアに表示されるようになりました。
Xiaomiは「Mi fit」だけ表示されてたんですよね。不思議。

スポンサーリンク

背景に隠れている時刻

check_circle 参照元

AMAZFIT Bip ウォッチフェイスの小技集

重なり順をどうやって指定しているのかと思ったら、数字の画像自体に工夫が有りました。
透過させて、重なっているように見せているんですねー
AMAZFIT Bip ウォッチフェイスの小技集

一見シンプルだけれど、時刻の数字だけでも30種類の画像を使っています。
looks_one 時間の一の位(右上透過)
looks_two 時間の十の位と、分の一の位(通常)
looks_3 分の十の位(左下透過)

週替わりの背景

check_circle 参照元

AMAZFIT Bip ウォッチフェイスの小技集

曜日毎に画像を作って、右上を透過(水色の部分)してますね。
毎日背景が変わるアイデアは良いですね。
AMAZFIT Bip ウォッチフェイスの小技集

歩数のグラフ(基本)

check_circle 参照元

AMAZFIT Bip ウォッチフェイスの小技集

小技ではなく、元々有る機能。歩数の円グラフ。
円グラフを太い黄色にして、開始90、終了180にしてみた。楽しいw
AMAZFIT Bip ウォッチフェイスの小技集
JOHN "StepsProgress": {
"Circle": { 円グラフ
"CenterX": 88, Ⅹ軸の位置
"CenterY": 118, Y軸の位置
"RadiusX": 40, 横半径
"RadiusY": 40, 縦半径
"StartAngle": 0, 円グラフ開始
"EndAngle": 360, 円グラフ終了
"Width": 3, 円グラフの幅
"Color": "0xFFFFFF" 円グラフの色
}
}

歩数のグラフ(応用)

check_circle 参照元

AMAZFIT Bip ウォッチフェイスの小技集

グラフ用の画像を数枚用意するバージョン。
時刻も、グラフ用の数字も気合を感じられる。。。

AMAZFIT Bip ウォッチフェイスの小技集

8パターン用意されてます。
これを応用して、目標に近づく毎に服が脱げる脱衣麻雀的なモノを作りたい。
JOHN "StepsProgress": {
"Linear": {
"StartImageIndex": 99,
"Segments": [
{
"X": 106,…画像の数だけ位置指定
"Y": 14
},

商品のリンクです

2020年2月現在、Yahoo!ショッピングが安かった!(8,700円)

0