アプリに簡単にリッチアニメーションを実装できるようになる「Lottie」をAirbnbが公開
旅行プラットフォームのAirbnbが、Adobe After EffectsのアニメーションをリアルタムでレンダリングしてiOS・Android・React Native向けのリッチアニメーションにしてくれるライブラリ「Lottie」を開発しました。 Lottie http://airbnb.design/lottie/ Lottie : Airbnb Design http://airbnb.design/introducing-lottie/ Lottieはオープンソースのアニメーション作成ツール。通常はアプリにアニメーションを実装する際、スクリーンサイズに合わせた大量の画像を用意したり何千行ものコードを書いたりする必要がありますが、Lottieはほとんど何もしなくても自動的にAfter Effectsのアニメーションをアプリ用のリッチアニメーションに変換してくれるとのこと。ライブラリ
React、Redux、D3を用いたアニメーション | POSTD
これは小さな粒を生成するものです。あなたがクリックした場所から、小さな円が生まれて飛び出していくのです。マウスを持って、動かしてみましょう。粒はカーソルから生み出され続けます。 モバイル機器や、マウスではなく指で動かすタイプのコンピュータだったらどうでしょうか。同じように動きます。 私はオタクなので、これが楽しいと思います。皆さんの見解は様々かもしれません。埋め込み画像をクリックして、円が飛ぶのを見てください。クールじゃないですか？ 仕組み これは全てReact、Redux、D3を使って作られています。アニメーションのトリックはありません。少しの賢さが必要なだけです。 一般的な方法を、以下で説明してみます。 私たちは、ページ、SVGエレメント、内部の粒といった 全てをレンダリングするためにReact を使います。この全ては、propを使ってDOMを返す、Reactコンポーネントを使って作ら
WatchKitで作るApple Watchアプリのアニメーション制作入門 - ICS MEDIA
Apple Watchのアプリは、Swift(またはObjective-C)の開発フレームワーク「WatchKit」を用いて作成できます。今回は、Apple Watchで動作するパーティクルアニメーションのデモを紹介しながら、WatchKitにおけるアニメーション作成方法を説明します。 デモについて Apple Watch上で動作するパーティクルアニメーションのデモです。最初は3色のパーティクルが順番に表示されますが、画面下部のスライダーで特定の色に固定できます。 ソースコードはGitHubにて公開してあります。（ソースコード） Apple Watchにおけるアニメーション表示について WatchKitにおいては、プログラム上から表示オブジェクトを追加する、オブジェクトの位置座標を指定する、オブジェクトを別のオブジェクトの上に重ねるといったことができません（※）。ではどうやってアニメーショ
How to create high-performance CSS animations | Articles | web.dev
Move an element To move an element, use the translate or rotation keyword values of the transform property. For example, to slide an item into view, use translate. .animate { animation: slide-in 0.7s both; } @keyframes slide-in { 0% { transform: translateY(-1000px); } 100% { transform: translateY(0); } } Use rotate to rotate elements. The following example rotates an element 360 degrees. .animate
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
