Lottieでアプリにアニメーションを組み込む話（デザイナー編） - くらげだらけ
最近ではWebサービスやスマートフォンアプリにおいてもアニメーションの重要性は認識されつつあります。 機能としてのアニメーションは「FacebookアプリのLoading Placeholder」や「TwitterアプリのLikeボタンのフィードバック」のように何が起こっている（起きた）のかをわかりやすく伝えたり、「17 Live（イチナナ）」や「CASH」のSplashのようにロゴやブランドのイメージを強く印象づけたり、楽しませたりと使い方は様々です。 アニメーションをWebやアプリに組み込む方法は様々ありますが、今回は「Lottie」を使ってアプリにアニメーションを組み込む方法やメリットなどについて書こうと思います。 とはいえ今回はデザイナー編でして、AfterEffectsで簡単なアニメーションを作ってLottie用にデータを書き出すというところまでをご紹介します。 最後にアニメーシ
Why React needed yet another animation library. Introducing: react-spring
Ever since i started developing i was fascinated by the vividness of animated applications, they felt alive. And we sure have come a long way, too. There are dozens of tools to choose from today. From tweening libraries to full fledged declarative options, especially in the React world. The prevalent options today are react-motion, animated, react-move, popmotion and a couple of others. All of the
SVGでリアルな湯気を作ってみる ｜ Tips Note by TAM
もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。 それが『湯気』です。 イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。最近では動画やアニメGIFなどで代用されていたりすることも多いと思いますが、今回はそんな素材がない時に使える 『SVGで作るリアルな湯気』 を紹介したいと思います！ See the Pen Steam by uenaka (@uenaka) on CodePen. SVGで湯気を書く まずはSVGで湯気の形を自由に書いてみてください。 難しく聞こえるかもしれませんが、後々ボカして使用しますので形に拘る必要はありません。 参考までに私が書いてみた湯気がこちらです。 SVGにanimateを追記して動す よりリアルな動きに見せるため、SVGで書いた湯気を動かします。 ここも動き
React Nativeでアニメーションさせる基本を理解する - Qiita
React Nativeにおいて現時点でメジャーなAnimationの方法は２つあります。 https://facebook.github.io/react-native/docs/animations.html AnimatedとLayoutAnimationです。 Animated timing, spring, decay 変化させる変数をnew Animated.Valueで定義します。 Animated.springなどに上記変数を渡すことでアニメーションさせられます。 this.state = { yellowScale: new Animated.Value(1) }; // ... Animated.spring( this.state.yellowScale, { toValue: this._yellowScale - 0.1, friction: 1, } ).sta
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
A shallow dive into React Router v4 Animated Transitions
