The Blog | Welcome to Adobe BlogThe Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。
CSS アニメーションについて深く知る - Qiita
概要 CSS で実装する要素の移動（アニメーション）に関しての簡単な説明から、パフォーマンスに関連する事象を深掘って説明していきます。この辺りの話はややこしいので、自身でも整理をつけるためにまとめました。 長い記事になりますが、CSS のアニメーション（パフォーマンス関連）を深く理解するための手助けになれば幸いです。 既にご存知の方はどこか間違っている点などあればご指摘宜しくお願いいたします。 要素の移動について 要素を縦横にアニメーションを伴って動かしたい場合 transition を適応させた要素に対して right, left, top, bottom や transform: translate(X,Y) のプロパティーを追加、またはその値を変更することで実現させることができる。 移動には right, left, top, bottom よりも transform: transl
Webフロントエンドでアニメーションを実装する時になにを考えるか - Qiita
明けましておめでとうございます。 アニメーションの実装に抵抗を覚えている方、多いのではないでしょうか？ 特に昨今ではサーバサイド出身で最近フロントエンドを触り始めたという方も多いと思います。私が属している組織でもそんな流れは少なからずあるのですが、そういったバックグラウンドの方の声として聞くことが多い声はやはり「CSSは触りたくない、アニメーション怖い」というものです。 私も少し前まではちょっと複雑なアニメーションを見ると「えぇ…」と思っていたものですが、今ではCoolなアニメーションを見ると「どうやって実現しよう」とワクワクするようになりました(とても正直に言うとあまりに激しめなことされると今でも「えぇ…」とはなります)。 この記事ではあるアニメーション要求がある時に、どうやってそれを実装に落とし込むか、その考え方を私なりに整理したものをまとめてみました。アニメーションに抵抗がある方や、
｢新世紀エヴァンゲリオン｣で見られる演出のテクニック10選
これを踏まえてもう一度見直そう！ 日本だけでなく世界中にファンがいる庵野秀明監督のアニメ｢新世紀エヴァンゲリオン｣。ファンを魅了しているのは、キャラクターやストーリー、デザイン、またはコンセプトだけではありません。その演出にも視聴者の心を捉えて離さない秘密があるようなのです。 こちらはGeekTyrantが取り上げた、日本のアニメファンのDigibroさんによる解析の動画。 では、その秘密をおさらいしましょう。 1. ダイナミックなダイアログ ｢エヴァンゲリオン｣の会話シーンには、会話をしている人物が1つのフレームに入っていることが多く、視聴者が話し手と聞き手のリアクションを同時に見られます。 後方の人が先に話して、手前の人が答える。こういったテクニックを使う事で変哲もない会話シーンにちょっとした刺激を加味しているのです。 2. カッティング・オン・アクション（アクションつなぎ） ショット
Vue Fes Japan: Next-Level Vue Animations
“人間は進化の過程で、より継ぎ目無く、シームレスに流れるような動きを行うよう最適化されてきた。” "人間とコンピューター間のインタラクションでも、新しく登場した概念に対応できるようにはなっていない”
UIデザインは奥が深い！最近のスマホアプリで見かけるアニメーションの素晴らしいアイデアを解説
普段何気なく使用しているUIのアニメーションもその仕組みや効果を理解すると、なるほどと考えされられます。 スマホアプリのUIに使用するアニメーションをGoodな良いものから、Greatな素晴らしいものに変えるUIアニメーションのさまざまなアイデアを紹介します。 Material Motion, IBM Animation Principles, The UX in Motion Manifestoのガイドラインに基づいた、気持ちのいい操作性に優れたアニメーションを楽しむことができます。 Good to great UI animation tips 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 タブのコンテンツをスライドさせるアニメーション カードをタップして詳細を表示するアニメーション コンテンツを表示するアニメーション コ
SpinKit
.spinner { width: 40px; height: 40px; background-color: #333; margin: 100px auto; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg
Airbnbが作ったアニメーション変換ツール「Lottie 2.0」がGitHubで公開中
Airbnbからまたもや便利そうなデザインツールが公開されたようです。 今回紹介する「Lottie」はAdobeのAfter Effectで作ったアニメーションをプラグインでJSONデータに変換し、iOSやAndoroid・React Nativeのソースコードに組み込んで、そのまま動かすことができるというもの。 こういうAfter Effectで作ったアニメーションがネイティブアプリでも簡単に実装できちゃうらしい すごいな。 こういうインタラクティブな動きが簡単に実装できるのは良さそう。 Airbnbが公開しているLPはこちら Lottie こちらがGitHubです airbnb / lottie-ios ぜひお試しあれ！
コクのある乱数 | ツクロア - DESIGN LAB
気持ちのいい動き インタラクションの時に気持ちのいい動きをしているアプリって、使っていて気持ちがいい。そのアニメーション冗長だーとかは脇に置いておく。 気持ちのいい動きをコードで表現する知識（ノウハウ的な）って全然ないなぁ。と思っていた時にある１つのワードに出会った。 「コクのある乱数」乱数にコクを出す方法について-togetter- ・・・・？ 昨年(2016)末に話題になっていた。巷ではインタラクティブ・コーディング勉強会なるものも開催されているらしい。全然知らない世界。。。その内容（レジュメ）が公開されていたので、今回は自分なりに解釈しながら実際にやってみる。 参考にさせていただいたサイト インタラクティブ・プログラミング勉強会 第1回 乱数 -fladdict- ありがとうございます。 ”コクのある乱数”がキモらしい 気持ちのいい動きには乱数が欠かせない。さらに言うとコクのある乱数
あえてズレを入れるのがミソ！ ウェブのアニメーションを「いい感じ」に魅せるズルいテクニック - ICS MEDIA
アニメーションはゲームだけではなく、ウェブサイトやウェブアプリのUIなど、多くの用途で必要となります。流行りのマイクロインタラクションでもアニメーションは重要視されています。しかし、アニメーションに対して苦手意識を持っている方も少なくないのではないでしょうか。今回は私が普段トゥイーンアニメーションを作る時に使っている、簡単に「いい感じ」に仕上げるズルいテクニックを紹介します。 本記事で扱うのはトゥイーンと言われるアニメーションの種類です。これは、始めと終わりの状態を指定することで、中間の状態を自動的に補完しアニメーションさせる技術。具体的にはCSS TransitionやjQueryのanimate()関数、Adobe Animate CCのトゥイーン機能のことを指します。 本記事のデモはCreateJSで作成していますが、CSS3やjQueryなど他のテクニックでも応用できる内容となって
UXを向上させる５種類のアニメーションの使い方 | UX MILK
Nick Babich氏はソフトウェアディベロッパーです。大のテクノロジー好きで、UI/UXをこよなく愛します。彼のwebサイトはこちらです。http://babich.biz。 モーションはストーリーを伝えます。長く複雑なストーリーではなく、「今ここを見て下さい」や、「操作は正常に完了しました」などのシンプルなストーリーです。 しかし、アニメーションの目標は、ユーザーを楽しませることではありません。ユーザーが何が実行されているか理解し、より便利にアプリを使う方法を理解するための手助けするためにあります。このアイディアは、Zurbの記事にある次の言葉の中ではっきりと表現されています。 We’re no longer just designing static screens. We’re designing for how the user gets from those screens
Bootstrap 対応！パワフルなアニメーションボタンを簡単実装しよう。Codrops Animocons
あらゆるサイトで利用されているボタンは、小さいですがユーザーが直接操作を行う重要なパーツ要素のひとつです。ボタンをデザインをするとき、見た目だけでなく押したときのエフェクトの作成に迷ってしまうという人も少なくないでしょう。 今回、Animocons というCodropsによるアニメーションボタンを使い、Bootstrapを使う感覚で、HTMLとクラス名を書くだけでアニメーションつきのボタンが簡単に実装できるようにしました。 注目が集まっているアニメーションを利用した、動きにアクセントのあるボタンデザインを作成してみてはいかがでしょう。 ※ 改編はMITライセンスの下で行っています。 ダウンロードする 目次 1. プラグインサンプル 2. 動作環境 3. 使い方 1. プラグインサンプル 使い方は簡単で、クラスつきのHTMLを書くと、その要素がアニメーションボタンになります。 ※ アイコンに
アニメーションが心地よいマテリアルデザインのUIサンプル５選
徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。 マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。 UIデザインの歴史に学ぶシャドウと奥行きの使い方 この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。 MaterialUpのオススメUIコンセプト５選 1. ミュージックプレイヤー 楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレコードのように変わりア
【CEDEC2016】『追憶の青』開発が教える、違和感のない2Dアニメーションの作り方…作業を効率化してクオリティアップに繋げる方法論も | gamebiz
【CEDEC2016】『追憶の青』開発が教える、違和感のない2Dアニメーションの作り方…作業を効率化してクオリティアップに繋げる方法論も 一般社団法人コンピュータエンターテインメント協会（CESA）が、8月24日～26日の期間、パシフィコ横浜にて開催した、国内最大のゲーム開発者向けカンファレンス「コンピュータ・エンターテインメント・デベロッパーズ・カンファレンス 2016」（CEDEC 2016）。 本稿では、8月25日に実施された講演「横スクロールARPG「追憶の青」における 2Dキャラクターアニメーション～2Dアニメの注意点とテクニック～」についてのレポートをお届けしていく。 本セッションでは、グリーの清田徹氏が登壇。Wright Flyer Studiosが開発中のスマートフォン向け横スクロールアクションRPG『追憶の青』を題材に、キャラクターがどのような関節構造、仕様で作られている
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
micro-interaction animations on LottieFiles
anime.js
Magic Animations CSS3
Webアプリケーションで 60fpsを(極力)目指す
SSSSLIDE
実装はとっても簡単！アニメーションが気持ちよく、デザインもかわいいCSSで実装された軽量スピナー -CSSPIN
