Goodpatch Advent Calendar 2017では、Goodpatchのメンバーが興味を持っている分野や、利用している技術などについて書いていきます。 ダウンロードのプログレスバーやボタンを押した時のフィードバックなど、アニメーションはアプリに欠かせない要素の一つです。今回は Shape Shifter というツールをご紹介したいと思います。 Shape Shifterとは? alexjlockwood/ShapeShifter にもあるとおり、 SVG 形式のアイコンのアニメーションを作成するためのツールです。 Shape Shifter の画面構成 まずは Shape Shifter の画面構成を見てみましょう。この記事では下図の名称で呼ぼうと思います。 プレビュー画面 アニメーションのプレビューを確認できます。 左からスローモーション、巻き戻し、再生、早送り、繰り返しの
![SVG アニメーションツール Shape Shifter の使い方|Goodpatch Blog グッドパッチブログ](https://cdn-ak-scissors.b.st-hatena.com/image/square/7faccb420f9127c372a0f37f3cf230612358317a/height=288;version=1;width=512/https%3A%2F%2Fi0.wp.com%2Fcms.goodpatch.com%2Fwp-content%2Fuploads%2F2017%2F12%2F68747470733a2f2f6769746875622e636f6d2f616c65786a6c6f636b776f6f642f5368617065536869667465722f7261772f6d61737465722f6172742f73637265656e6361702e676966.gif%3Ffit%3D1440%252C1056%26ssl%3D1)