損するあほう

やったこととか残しておく。※個人の感想です

時計仕掛けのホーム画面

お久しぶりです。

 

KLWPを使ってandroidのホーム画面を刷新します。

 

 

今のは?

現在のホーム画面はこちら。

f:id:yu_john:20190715201127g:plain

文句なしの可愛さと実用性。これが天才か。

とはいえもう一年を超えて採用されておりまして、失礼ながら飽きがきてます。

 

使っているのはKLWPという超絶便利なライブ壁紙作成アプリ。無料の範囲でほぼ問題ありません。androidユーザーならぜひとも使ってほしい一品。

有料で全機能開放キーを入手できます。私が唯一課金したアプリです。パズドラも課金しなかったのに。

play.google.com

 

トムとロイドさんや、orefolderさんで綺麗にまとめてくれています。

ときおり参考しておりますが、今回は自力で乗り切りました。

 

では作成に移ります。

まずは全体図を決めましょう。無鉄砲に突き進むのはいけない。

 

友人とした「時計の動きってずっと見てられる」話が記憶に新しいので、機械式時計の一部をまねしてホーム画面に採用してみます。

 

ネット徘徊していますとこんな画像が見つかりました。

f:id:yu_john:20190715201711j:plain

輪列ですか。なるほど、これが動けば面白いかも。

 

素材を集めましょう

必要なのは

  • 香箱車
  • 2-4番車
  • ガンギ車
  • 各カナ
  • アンクル
  • テンワ
  • ひげぜんまい

参考画像に近づけるために、抽象的というか簡略化された絵を探しました。が、見つかりませんでした。

ので作りました。

 

収集・加工、作成した素材はgoogleドライブに置いてますので使いたい方はどうぞ。

時計仕掛け - Google ドライブ

 

用意した歯車をてきとーにぽいぽい配置。

 

 

f:id:yu_john:20190715202626p:plain

 

すでにワクワクするんですが、これって私だけ???

 

歯車とヒゲゼンマイはInkscapeで作成しSVG形式に、ガンギとアンクルは拾った画像を加工しPNG形式に。高解像度ではありませんがスマホで見るぶんには大丈夫。営利目的ではないので怒られません。きっとね。

アンクルに関しては、画像の中心を軸の部分に定めました。正方形の画像にするとKLWP上で動きをつける際に不都合があるからです。片側の腕が異様に長いのは、流れというか勢いというか。

部品の動きを邪魔しない背景も必要ですね。適度に暗くて飽きないものを作りました。

 

やっとこさスマホ画面での作業に

 

ここからが本番。 各部品を動かします。

 

KLWPのアニメーションは滑らかな動きを付けられるのに対して、時計の動きは一部、カチッカチッと切れ切れな動きの繰り返しです。ここの限界に攻めてもいいのですが、数字の関係で難しそうなので「時計っぽい動き」をめざします。サボり?大丈夫大丈夫、ちょっとだけだから。

人間の目で見てカクカクと動くのはアンクルとガンギ、4番車ですが、4番車を動かすには数字が小さくなりすぎます。歯の数だけ設定していかねばならぬのと、そうなると設定項目が莫大な数になりますから、面倒です。やめやめ。

ちゃんと時間をかけて考えれば可能なんでしょうけれども私にその情熱と算数の能力がありません。

 

テンワの設定

実行 ループ
アクション 回転
緩急 普通(跳ね返って)
時間 5
55

 

ひげぜんまいの設定

実行 ループ
アクション 回転
緩急 普通(跳ね返って)
時間 5
55

これに加えて以下を

実行 ループ
アクション 遠ざかる
緩急 普通(跳ね返って)
時間 5
30


時間5だと0.5秒のうちに回転して戻ってきます。実際はもっと早いのですけれども、スマホで再生するにはこれくらいの時間じゃないと早すぎて残像しか見えません。本当はコンポーネントとして作っておきたいのですが、個別にアニメーションを持たせられないので断念。悔しい。だが、それでいい。

 

アンクルの設定

実行 ループ
アクション 複雑な動き
緩急 反転
時間 3
100

アニメーション;

0%:回転->0.0、49%:回転->0.0、

50%:回転->20.0、100%:回転->20.0

 

これは単純な往復運動を再現するだけです。真ん中で切ってやれば滑らかにではなく49%と50%の合間、1%の時間で回転20が実行されるのでサッサッと動きます。

 

ガンギの設定

実行 ループ
アクション 複雑な動き
緩急 反転
時間 11
100

アニメーション;

0%:回転->0.0、13%:回転->0.0、

14%:回転->14.0、27%:回転->14.0、

28%:回転->28.0、41%:回転->28.0、(以下略)

 

それっぽい動きを再現します。設定の容易なことから、90度だけ回します。歯の数は15ですから、90度あたりおよそ4枚です。これがアンクルの爪に引っ掛かりながら動くのでおよそ8回動きます。そして100%に達すると再び0度へ戻ります。

このことから開始地点を0=90ですので、7つ段階を作る必要があります。ので14.28ずつ。14刻みでいこう、うん。

 

4番車の設定

実行 ループ
アクション 回転(逆方向)
緩急 反転
時間 600
100

時間は100=10秒


本物のように1/6秒でチクタクとは動いてくれませんが、目視でちゃんとわかる速さで回ってくれます。

4番車は秒針と連結する歯車で60秒にいち回転します。あとは、言わなくてもわかるな?実行とアクション、緩急は問題ないかと思います。

同じ容量で3,2番車も動かします。

 

3番車の設定

実行 ループ
アクション 回転
緩急 反転
時間 4500
100

 

2番車の設定

実行 ループ
アクション 回転(逆方向)
緩急 反転
時間 36000
100

 

これで....2番車は60分で一周する歯車です。600(1分)*60=36000で一時間ですね。KLWPのアニメーションの時間の限界は40000くらいです。ギリギリchop。

 

肝心の成果は

 

f:id:yu_john:20190715205747g:plain

 

こいつ、動くぞ!?

なるほど、親父が熱中するわけだ...。

 

テンプ、アンクル、ガンギの噛み合いはいまいちですが、眺めるだけならなんら不自然なことはない(矛盾)

 

だいたいこんな感じ。部品ごとに色変えてもいいし背景を反転させて黒を下にするのもいいかもね。

てきとーにアプリ起動できるようにしておしまい。一カ月以上未完で放置されてたのですっきり。

 

 

ではまたお会いしましょう。