The Blog | Welcome to Adobe Blog アドビのブログでは、Creative Cloud、Document Cloud、Experience Cloudの最新情報や役に立つ情報を紹介しています。
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 CSS で実装する要素の移動（アニメーション）に関しての簡単な説明から、パフォーマンスに関連する事象を深掘って説明していきます。この辺りの話はややこしいので、自身でも整理をつけるためにまとめました。 長い記事になりますが、CSS のアニメーション（パフォーマンス関連）を深く理解するための手助けになれば幸いです。 既にご存知の方はどこか間違っている点などあればご指摘宜しくお願いいたします。 要素の移動について 要素を縦横にアニメーションを伴って動かしたい場合 transition を適応させた要素に対して right, left,
明けましておめでとうございます。 アニメーションの実装に抵抗を覚えている方、多いのではないでしょうか？ 特に昨今ではサーバサイド出身で最近フロントエンドを触り始めたという方も多いと思います。私が属している組織でもそんな流れは少なからずあるのですが、そういったバックグラウンドの方の声として聞くことが多い声はやはり「CSSは触りたくない、アニメーション怖い」というものです。 私も少し前まではちょっと複雑なアニメーションを見ると「えぇ…」と思っていたものですが、今ではCoolなアニメーションを見ると「どうやって実現しよう」とワクワクするようになりました(とても正直に言うとあまりに激しめなことされると今でも「えぇ…」とはなります)。 この記事ではあるアニメーション要求がある時に、どうやってそれを実装に落とし込むか、その考え方を私なりに整理したものをまとめてみました。アニメーションに抵抗がある方や、
これを踏まえてもう一度見直そう！ 日本だけでなく世界中にファンがいる庵野秀明監督のアニメ｢新世紀エヴァンゲリオン｣。ファンを魅了しているのは、キャラクターやストーリー、デザイン、またはコンセプトだけではありません。その演出にも視聴者の心を捉えて離さない秘密があるようなのです。 こちらはGeekTyrantが取り上げた、日本のアニメファンのDigibroさんによる解析の動画。 では、その秘密をおさらいしましょう。 1. ダイナミックなダイアログ ｢エヴァンゲリオン｣の会話シーンには、会話をしている人物が1つのフレームに入っていることが多く、視聴者が話し手と聞き手のリアクションを同時に見られます。 後方の人が先に話して、手前の人が答える。こういったテクニックを使う事で変哲もない会話シーンにちょっとした刺激を加味しているのです。 2. カッティング・オン・アクション（アクションつなぎ） ショット
“人間は進化の過程で、より継ぎ目無く、シームレスに流れるような動きを行うよう最適化されてきた。” "人間とコンピューター間のインタラクションでも、新しく登場した概念に対応できるようにはなっていない”
普段何気なく使用しているUIのアニメーションもその仕組みや効果を理解すると、なるほどと考えされられます。 スマホアプリのUIに使用するアニメーションをGoodな良いものから、Greatな素晴らしいものに変えるUIアニメーションのさまざまなアイデアを紹介します。 Material Motion, IBM Animation Principles, The UX in Motion Manifestoのガイドラインに基づいた、気持ちのいい操作性に優れたアニメーションを楽しむことができます。 Good to great UI animation tips 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 タブのコンテンツをスライドさせるアニメーション カードをタップして詳細を表示するアニメーション コンテンツを表示するアニメーション コ
All-in-one animation engine. A fast and flexible JavaScript library to animate the web.
.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」はAdobeのAfter Effectで作ったアニメーションをプラグインでJSONデータに変換し、iOSやAndoroid・React Nativeのソースコードに組み込んで、そのまま動かすことができるというもの。 こういうAfter Effectで作ったアニメーションがネイティブアプリでも簡単に実装できちゃうらしい すごいな。 こういうインタラクティブな動きが簡単に実装できるのは良さそう。 Airbnbが公開しているLPはこちら Lottie こちらがGitHubです airbnb / lottie-ios ぜひお試しあれ！
気持ちのいい動き インタラクションの時に気持ちのいい動きをしているアプリって、使っていて気持ちがいい。そのアニメーション冗長だーとかは脇に置いておく。 気持ちのいい動きをコードで表現する知識（ノウハウ的な）って全然ないなぁ。と思っていた時にある１つのワードに出会った。 「コクのある乱数」乱数にコクを出す方法について-togetter- ・・・・？ 昨年(2016)末に話題になっていた。巷ではインタラクティブ・コーディング勉強会なるものも開催されているらしい。全然知らない世界。。。その内容（レジュメ）が公開されていたので、今回は自分なりに解釈しながら実際にやってみる。 参考にさせていただいたサイト インタラクティブ・プログラミング勉強会 第1回 乱数 -fladdict- ありがとうございます。 ”コクのある乱数”がキモらしい 気持ちのいい動きには乱数が欠かせない。さらに言うとコクのある乱数
アニメーションはウェブサイトやアプリ、ゲームのUIなど、多くの用途で必要となります。流行りのマイクロインタラクションでもアニメーションは重要視されています。しかし、アニメーションにたいして苦手意識を持っている方も少なくないでしょう。今回は私たちがアニメーションを作る時に用いている、簡単に「いい感じ」に仕上げるテクニックを紹介します。 CSS Transitionなどは、始めと終わりの状態を指定することで、中間の状態を自動的に補完しアニメーションさせられます。本記事のデモはCSS版、GSAP版、Anime.js版の3種類で作成しています。お使いの技術にあわせて参考にしてください。 CSS版：CSSアニメーションを中心に作成したサンプル。演出の精度は簡易的。 GSAP版：JSライブラリGSAPジーサップを用いたサンプル。演出の精度が高め。 Anime.js版：JSライブラリAnime.jsを用
Nick Babich氏はソフトウェアディベロッパーです。大のテクノロジー好きで、UI/UXをこよなく愛します。彼のwebサイトはこちらです。http://babich.biz Image credit: Barthelemy Chalvet モーションはストーリーを伝えます。長く複雑なストーリーではなく、「今ここを見て下さい」や、「操作は正常に完了しました」などのシンプルなストーリーです。 しかし、アニメーションの目標は、ユーザーを楽しませることではありません。ユーザーが何が実行されているか理解し、より便利にアプリを使う方法を理解するための手助けするためにあります。このアイディアは、Zurbの記事にある次の言葉の中ではっきりと表現されています。 We’re no longer just designing static screens. We’re designing for how t
あらゆるサイトで利用されているボタンは、小さいですがユーザーが直接操作を行う重要なパーツ要素のひとつです。ボタンをデザインをするとき、見た目だけでなく押したときのエフェクトの作成に迷ってしまうという人も少なくないでしょう。 今回、Animocons というCodropsによるアニメーションボタンを使い、Bootstrapを使う感覚で、HTMLとクラス名を書くだけでアニメーションつきのボタンが簡単に実装できるようにしました。 注目が集まっているアニメーションを利用した、動きにアクセントのあるボタンデザインを作成してみてはいかがでしょう。 ※ 改編はMITライセンスの下で行っています。 ダウンロードする 目次 1. プラグインサンプル 2. 動作環境 3. 使い方 1. プラグインサンプル 使い方は簡単で、クラスつきのHTMLを書くと、その要素がアニメーションボタンになります。 ※ アイコンに
徐々に浸透しつつあるGoogleのデザインガイドライン、マテリアルデザインですが、先日ようやく日本語版も公式にリリースされました。 マテリアルデザインやマテリアルモーションは実世界のモチーフを用いて、ユーザーがより直感的にUIを把握・誘導できるようにするためのものです。詳しくは以下の記事をご覧ください。 https://popinsight.jp/blog/?p=49390 この記事ではUIコンセプトやポートフォリオをたくさん掲載しているMaterialUpから、マテリアルデザインを用いたデザイン例をピックアップしてご紹介していきます。すべてCodePenで実装済みの作品なので、裏側のコードを見て実装のヒントに役立ててください。 MaterialUpのオススメUIコンセプト５選 1. ミュージックプレイヤー 楽曲再生アプリのUIコンセプトです。プレイボタンを押すとジャケットやシークバーがレ
【CEDEC2016】『追憶の青』開発が教える、違和感のない2Dアニメーションの作り方…作業を効率化してクオリティアップに繋げる方法論も 一般社団法人コンピュータエンターテインメント協会（CESA）が、8月24日～26日の期間、パシフィコ横浜にて開催した、国内最大のゲーム開発者向けカンファレンス「コンピュータ・エンターテインメント・デベロッパーズ・カンファレンス 2016」（CEDEC 2016）。 本稿では、8月25日に実施された講演「横スクロールARPG「追憶の青」における 2Dキャラクターアニメーション～2Dアニメの注意点とテクニック～」についてのレポートをお届けしていく。 本セッションでは、グリーの清田徹氏が登壇。Wright Flyer Studiosが開発中のスマートフォン向け横スクロールアクションRPG『追憶の青』を題材に、キャラクターがどのような関節構造、仕様で作られている
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
