Lottieであなたの「サービス」をもっとリッチにアニメーションさせる話 - pixiv inside
この記事はピクシブ株式会社 Advent Calendar 2017の19日目です。 こんにちは、17新卒エンジニアのまつらいです。普段は主にpixivFANBOXというサービスでJavaScriptやPHPを書いています。今日は、ウェブブラウザ上で動く軽量で扱いやすいアニメーションを実現させることができる、僕の大好きな「Lottie / Bodymovin」について作例を含めて紹介します。 https://matsurai25.info/bodymovin/blue/ たとえば、デザイナー(※1)に貰ったAIファイルをそのままAfterEffectsで加工、レイヤー毎に動きをつけてみました。このページはiOS safariやIE11でも動作します。LPなどの目立つ部分でLottieを使うと、サービスがグッと印象的になるはずです。 なお、この例ではサイズの大きな画像が使っているので、端末の
Good to great UI animation tips
Let’s see some examples of UI animations going from good to great. With a little bit of tweaking here and there, you can elevate your UI patterns with animation. The interactions listed show continuity between states, denote a relationship between shared elements, and call the user’s attention to something they should notice and act upon. To create these animations, I followed the guidelines from
Bringing Sketch and After Effects closer together
Introducing Inspector Spacetime and Sketch2AEGood UX motion design isn’t simply animating assets. Whether we’re injecting delight and playfulness, defining scalable new patterns, or conceptualizing a crazy new product, motion tells a story. And when we spend chunks of time recreating assets and writing specs, we have less time to focus on storytelling, the most important (and most enjoyable) part
Creating Usability with Motion: The UX in Motion Manifesto
The following manifesto represents my answer to the question — “As a UX or UI, designer, how do I know when and where to implement motion to support usability?” Over the last 5 years, it has been my privilege to coach and mentor UX & UI designers in over 40 countries, and at hundreds of the top brands and design consultancies through my workshops and tutorials on UI Animation. After over fifteen y
あえてズレを入れるのがミソ！ ウェブのアニメーションを「いい感じ」に魅せるズルいテクニック - ICS MEDIA
アニメーションはゲームだけではなく、ウェブサイトやウェブアプリのUIなど、多くの用途で必要となります。流行りのマイクロインタラクションでもアニメーションは重要視されています。しかし、アニメーションに対して苦手意識を持っている方も少なくないのではないでしょうか。今回は私が普段トゥイーンアニメーションを作る時に使っている、簡単に「いい感じ」に仕上げるズルいテクニックを紹介します。 本記事で扱うのはトゥイーンと言われるアニメーションの種類です。これは、始めと終わりの状態を指定することで、中間の状態を自動的に補完しアニメーションさせる技術。具体的にはCSS TransitionやjQueryのanimate()関数、Adobe Animate CCのトゥイーン機能のことを指します。 本記事のデモはCreateJSで作成していますが、CSS3やjQueryなど他のテクニックでも応用できる内容となって
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tinder Now Lets Users Send Full-Screen Animated Visuals In Chat - Global Dating Insights
Sketch/SVG/Illustrator to Lottie walkthrough � Lottie
