CSS3のtransition-timing-functionの値、cubic-bezier()に関して | KnockKnock
Spine:ゲーム用2Dアニメーションソフトウェア
Spineとは ゲームに命を吹き込む、大切なアニメーション。当社は、優れたアニメーションづくりには、強力なソフトウェアだけではなく強力なワークフローも不可欠だと考えています。Spineは2Dアニメーション専用に開発されたソフトウェアで、魅力的なアニメーションの作成、そして完成したアニメーションをゲームに組み込むための効率的なワークフローを提供します。 詳細を見る ライブデモ ライブデモでは、Spineで実現可能なサンプルをブラウザのウィンドウ上でご確認いただけます。アニメーションをレイヤーで再生したり、スケルトンを動的に操作したりと様々なことが可能です。 デモを見る Spineアカデミー Spineアカデミーは、Spine学習に必要な全てをご提供します。自分のペースで独学することを希望する方も、対面式のワークショップやコースを受講したい方もご心配いりません。Spineの各バージョン間の変更
CSSライクでデザイナーに優しい！anime.jsはDOMアニメーションの新定番だ！
Webアニメーションの実装方法として海外でいまもっとも話題なのが、anime.jsでしょう。日本の「アニメ」が語源の注目のDOMアニメーションライブラリーの使い方を詳しく。 もし速くて軽いアニメーションのライブラリーを探しているなら、Julian Garnierが考案したanime.jsを検討してみてはどうでしょうか。 この記事は、SVG画像を含む動的なDOMアニメーションに関する解説です。記事では、canvas-WebGLやSVGに特化したアニメーションライブラリーに触れるつもりはありません。ただし、WebページのHTML要素（理想的にはSVG画像も）のアニメーションに適していれば、別の機会に紹介するかもしれません。 記事の目的はライブラリーを分析してコードを掘り下げることではありません。主にCSSを使う人が、DOMのアニメーションのためにJavaScriptでなにができるかを追及する、
[CSS]アニメーションの動きもデザインも新しくて気持ちいい！コピペで実装できるローディングスピナーのまとめ
.loader-1 .loader-outter { position: absolute; border: 4px solid #f50057; border-left-color: transparent; border-bottom: 0; width: 100%; height: 100%; border-radius: 50%; -webkit-animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite; animation: loader-1-outter 1s cubic-bezier(.42, .61, .58, .41) infinite; } .loader-1 .loader-inner { position: absolute; border: 4px solid #f50057;
![[CSS]アニメーションの動きもデザインも新しくて気持ちいい！コピペで実装できるローディングスピナーのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c73c8f6011ffdcbf5db8a38badef92257137a98c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201703%2F2017071810.png)
世界も評価！ アニメ制作の“新手法”｜NHK NEWS WEB
日本時間の今月１８日に閉幕した、世界で最も歴史のあるフランスのアニメーション映画祭「アヌシー国際アニメーション映画祭」。この映画祭で２２年ぶりに、日本人監督の作品が最高賞を受賞しました。 湯浅政明監督の「夜明け告げるルーのうた」 です。人魚の女の子と出会った少年の心の動きを丁寧に描いたこの作品。実は 「残業なし・土日休業」 で作られ、内容だけでなく、長時間労働が当たり前のアニメの制作環境に一石を投じています。作品の高い質を保ったまま「働き方改革」を実現させた、アニメの新たな作り方とは？（科学文化部・岩田宗太郎記者） 湯浅政明監督の「夜明け告げるルーのうた」は、両親の離婚を理由に、寂れた漁港の町に引っ越してきた中学生の男の子「カイ」が、人魚の女の子「ルー」と出会い、それまで他人に閉ざしていた心を徐々に開いていくというストーリーです。 世界で最も歴史のあるアニメ映画祭として知られる、フランスの
さらばjQuery！アニメーションをサクサク処理できるVelocity.jsの使い方
「jQueryのアニメーションが遅い」「CSSアニメーションは使いにくい」。そこでアニメーション処理の定番ライブラリー「Velocity.js」の出番です。基本的な使い方を一通り紹介しましょう。 本記事ではJulian Shapiroにより開発された高速かつ強力なJavaScriptアニメーションエンジン、Velocity.js（以降、Velocity）を紹介します。記事のコードやデモすべてに目を通せば、Velocityを使って自分のアニメーションが作れるようになり、サイトはさらにインタラクティブで使いやすいものになるでしょう。jQueryには頼らず、すべて素のJavaScriptだけで作ります。 この記事は『CSSライクでデザイナーに優しい！anime.jsはDOMアニメーションの新定番だ！』『HTMLもSVGもテキストも自在！DOMアニメーションの決定版「KUTE.js」が登場』の続編
アニメーションをWebサイトに導入するためのテクニック
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 機能的で楽しいアニメーションは、現代のWebデザインにおいて不可欠な要素の１つです。現代のWebサイトでは、細かなインタラクションのデザインが根本的な違いをもたらします。 アニメーションはユーザーに現状を伝えたり、注意をうながしたり、ユーザーの行動の結果を伝えたり、ユーザーのふるまいに影響を与えることもできます。 より良いUXを築くため、サイトにアニメーションを追加する例をいくつか説明していきます。 進捗 ローディングアニメーション Webアニメーションにもっとも共通する用途の１つは、ページの読み込み（ローディング）時にユーザーの気を紛らせることです。 ローディングアニメーションはユーザーの感覚時間に影響し、実際より待ち時間を短く感じさせることができます。 待ち
Flashで学んでいた数学「追うのは微分が役に立つ」 - Qiita
スクリプトでアニメーションをつくると、何かしら動きの計算をするので、つまるところ数学を使うことになるわけです。高校時代はこんな計算何に使うのかと文句をいっていた式の使い途に出逢ったり、単なる四則演算だと思っていた式が、実は高度な数学と関わっていることもあります。 等速直線運動 ボールを真っ直ぐ同じ速さで動かしたいというときは、等速直線運動の動きをつくります。といっても、何のことはない、フレームごとに位置に同じ数値を足し込むだけです。これは、ただの足し算にしか見えません。 「計算」は足し算です。けれど、「考え方」は微分にもとづきます。等速直線運動の位置($x$)は、経過時間($t$)の一次式で表されます。
Three.jsでボーンアニメーションをする！ - KAYAC engineers' blog
イントロダクション 初めまして！ 面白法人カヤックでフロントエンドエンジニアをやっております、ごんと申します。 今回はタイトルの通り、Three.js の記事を書かせていただきました。 先月、JRA（日本中央競馬会）の年末のビッグレース・有馬記念のプロモーションとして、シン・アリマというキャンペーンが行われ、弊社では、そのWebサイト制作などをお手伝いさせていただきました。 このキャンペーンは、有馬記念とシン・ゴジラのコラボレーション企画で、スペシャルWebサイトでは、競走馬の名馬アリマとゴジラが、市街地や中山競馬場でデッドヒートを繰り広げるという、概ね荒唐無稽なゲームを遊ぶことができました。 残念ながらすでに、サイトの公開期間が終了してしまい、現在はゴジラや名馬アリマの雄姿を見ることはできないので、スクリーンショットを貼ります。 シン・アリマでは、WebGL を利用し、モバイルブラウザ上
Reactのアニメーションを攻略する - Qiita
仕事でReactのアニメーションをするにあたり、 やりたいことを満たすために旅立った冒険記。 やりたいこと 要件 要素の追加・削除時にアニメーション リストではない複数要素を別々に動かす きもち カジュアルに使いたい 要件満たすために余計な記述はしたくない。可能な限りシンプルに保ちたい。 DOMに依存したくない Universalにしたいので、style弄りはVirtualDOM経由が原則。 ロジックで制御したい 複雑化への対応や保守性を考えると、絶対JSで全てコントロールできた方がよい。 汎用性の高さが欲しい 適材適所でライブラリを使うのは嫌なので、できるだけシンプルかつ柔軟にしたい。 Redux、MobXは使いたくない Redux作者もローカルのstateでいいみたいなこと言ってるし、 わざわざ依存するライブラリを増やしたくない。 CSSアニメーションは使いたくない CSSだとDOM依
現場で使えるアニメーション系JSライブラリまとめ(2018年版) – TweenMax, CreateJS, WebAnimation, Velocityなど - ICS MEDIA
現場で使えるアニメーション系JSライブラリまとめ GSAP, CreateJS, WebAnimation, Velocityなど ウェブサイトのインタラクションやUIの振る舞いなど、HTMLでモーションを実装する機会は多々あります。HTML要素の簡易的なアニメーションであればCSS Transitionを使ったことのある方も多いでしょう。しかし、WebGLやCanvas、SVGなどJavaScriptが実装の中心となる制作作業では、CSS Transitionでは対応しきれず、アニメーションライブラリ（トゥイーンライブラリとも言います）が必要となる場面があります。 JavaScriptのアニメーションライブラリは多種多様なので、どのライブラリを採用するのか悩みどころ。本記事ではHTMLのJavaScriptライブラリについて、使い勝手や書式を紹介します。 今回紹介するメジャーなJSライブ
UIの「動き」がUXにとって大切なたった1つの理由
スマホアプリやスマホサイトではおなじみになった「マイクロインタラクション」。なぜUIに動きをつける必要があるのでしょうか？ どんな意味があるのでしょうか。 今週、私はカレンダー機能用のマイクロインタラクションをデザインしていました。「ビジュアルデザイン」はだいぶ前に完成したのですが、モーションをコードに埋め込んで正しく動作させるのは、ビジュアルデザインよりも大変でした。 浮き上がる、折りたたむという2つのUIコンポーネントをどのように動かしたいかを考えているうちに、気がつくと私は開発室の中で体を動かしながら手振りをしていました。 うまく表現できました！ ただ、自分と同じ部屋にいない相手にどのようにすればうまく伝えられるか悩みました。Slackやメールで「体を動かして伝える」ことは難しいからです。 簡単な画面遷移、フェード効果、ボタンステートの適用ができるアプリ（Invision、Marve
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
TryMore Inc | We Are Very Lucky Company!!!
私たちTryMoreは笑顔が似合うクリエイティブエージェンシーです。
「動き」はどの技術で実装すべきか？ Web Animations APIの登場で常識が変わる
CSS AnimationsやTranstions、Canvas、JavaScriptによるDOM操作など、Webアニメーションの実装にはさまざまな手法がありますが、決定版となる新しいJavaScript APIの策定が進んでいます。CSSアニメーションのスペシャリストであり、the new codeを運営するDudley Storeyさんによる特別寄稿です。 従来のWebアニメーションの問題を解決するAPI Webにおけるアニメーションは、性質のまったく異なる4つのグループに分けられます。 CSS TransitionsとAnimationsはパフォーマンスに優れ、キーフレームを提供しているが、構築に膨大な時間を必要とし、基本的な開始と終了の制御のみをCSSとJavaScriptで提供している。UIの応答、ループ、ページ読み込みなどのシンプルなアニメーションに利用される傾向がある SMI
Web新時代！心地よいアニメーションを実現する6つの基本テクニックまとめ
機能的なアニメーション（英: Functional Animation）とは、論理的ではっきりとした目的を持った、控えめなアニメーションを指します。読み込み時間を短く感じさせるだけでなく、ユーザーインターフェースに生命を吹き込みます。 インターフェースデザインを掛けあわせたり、分割したり、シェイプやサイズを変更することで、まるで人間のように、生きているような動きを実現できます。ナビメニューに応じてユーザーをスムーズに移動させたり、スクリーンに応じて要素が整理、変更されるのを伝えたり、デザイン要素の階層を補強するために、機能的なアニメーションを利用するように心がけましょう。 今回は、アニメーションをうまく利用する6つの基本原則、テクニックをまとめてご紹介します。 詳細は以下から。 01. レスポンシブなアニメーション UIデザインにおいてビジュアル・フィードバック（英: Visual Fee
JSでもモバイルアプリらしい体験は実装できるのでしょうか？ with React Native - Qiita
アニメーションはモダンなアプリ体験に不可欠なものになってますよね。 手のひらのなかのツールの使い心地に鈍感な人は減ってきてるのではないでしょうか。 JSでモバイルアプリを作る時、「アニメーションは実装できるけど、カクカクしてたりして、それないほうが良いよね」みたいな話になったことはありませんでしたか？ 僕もTitanium,Ionic Frameworkと触ってきて、こういうフレームワークは割りきって使うものという印象をずっと持ってました。 ただ、去年React Nativeを使ってiOS, Androidアプリ（短歌を投稿するSNSアプリです）をリリースしてみて、とても気に入って、今回アニメーションやらインタラクション、どこまで出来るのが実験的にアプリを出してみました。 Phrasal Verbs Flashcard 最近ロンドンに来て、英語学習者の友達が増えたのもあって内容はFlash
モーションデザインはUIの未来 | POSTD
最近、「モーションデザイン」という言葉がデザイン業界で急に出てきていることに気づいていますか？大小様々な企業が、これに特化した肩書きを持つデザイナーたちを雇いはじめています。最近ではGoogleが I/Oカンファレンス で、Googleの製品で統一化されているモーションランゲージの概要について話していました。 この騒ぎは何でしょうか？そして何の意味があるのでしょうか？ モーションはストーリーを語ります。 アプリにおける全ての物事は連鎖になっていて、モーションはあなたのガイドになります。ボタンをクリックして、画面が変わる度に、そこにはストーリーがついてきます。例えば、アイテムを作ったり削除する時、アニメーションがどのように役に立つかを見ていきましょう。 アイテムを消すことは劇的で破壊的な作業ですので、適切に反応するようにしましょう。アイテムをただ画面から消すだけということはしないようにしまし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blogger
anime.js - a Collection by Julian Garnier on CodePen