Loading...
Vue.js+SVGで自由にCSSアニメーションしたい人のための完全解説（ソース付き） - Qiita
こんにちは。UX＆フロントエンジニアしながら絵描きして遊んでいるゆき(@yuneco)です。この記事ではVue.jsを使ってCSSアニメーションを使った表現を自在に行うための基本的な部分をステップバイステップで解説します。目標は↓以下のようなアニメーションをJavaScriptで自在に構築できるようになることです。 ソースコードはこちら： https://github.com/yuneco/css-anime-tutorial 目次 この記事では最初にSVGを単純に表示するところから始め、Vueのコンポーネントを利用してそのSVGを自由に配置・変形させる方法を説明します。その上でCSS transitionを用いたアニメーションを取り入れます。最後に、複雑なアニメーションを抽象化・構造化してより複雑なシーンを構成するための方法を解説します。 SVGを作る Vueプロジェクトを作る SVGを
CSS によるローディングアニメーションのサンプルと簡単な実装方法
CSS を利用したローディングアニメーションのサンプルは既に山ほど Web 上に公開されていますが、別件でコーディングをしていた流れで、たまたまローディングアニメーションのコードも適当に作ってみたので、いくつかのサンプルと共に、jQuery や外部モジュールも利用せず、実際に利用するための簡易的な方法をご紹介します。 まずは、今回適当に作成したローディングアニメーションのデモをご覧ください。 See the Pen Simple CSS Spinner valiation by digistate (@digistate) on CodePen. この HTML と CSS を基礎にして、以下に実際に利用するための手順をまとめます。 HTML の構造 各ローディングアニメーション要素の HTML の構造は至ってシンプルです。 <div class="box"> <!-- type1 〜 t
will-changeで目指す60fpsのぬるぬるCSSアニメーション - Qiita
こんにちは、CSSとVue.jsでアニメーション使いまくりのポートフォリオ作ったり、シューティングゲーム作ったりして遊んでいるゆきです。 今日はCSSアニメーションで無茶しすぎてMacBookがカイロになった反省からの「負荷をかけずにぬるぬるのCSSアニメーションを実現するための試行錯誤」の顛末をまとめます。それでもCSSでアニメーションしたいんだ 今回の目的とサンプルケース この記事では、WebでCSSを使ってゲームやアート的な表現にゴリゴリのアニメーションを使いたい！というケースを想定します。 全体を通してCSSのwill-changeプロパティを使ったGPUレンダリングによる最適化のお話です。will-changeってなに？って方はこの後でてくる参考記事リストを先に見ていただくのが良いと思います。 https://css-anime.firebaseapp.com/ 今回検証するアニ
UI改善にキラリと役立つ！ SVGアニメーションの作り方まとめ - ICS MEDIA
SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう（参考「SVGで始めるマイクロインタラクション入門」）。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法（コーダー向け） コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、
補間関数で作るアニメーション - KAYAC engineers' blog
プログラムで動きを作ることは結構あります。 操作せずに観賞するアニメーションであれば、 アーティストが作る方がいい出来になると思うのですが、 操作によって介入があるアニメーション 場所や大きさ、速度、数などがゲームの状況に応じて変化するアニメーション アーティストが作るまでもないアニメーション のようなものはプログラマがやることが多いかと思います。 この記事では、技術部平山 がコードでアニメーションを作る際の基礎知識について書いてみます。 なお、少々数学臭が強くなりました。平山は正直数学が苦手でして、 かなり苦労して書いております。間違いがありましたら連絡頂ければすぐに修正いたします。 さらに、「時間を取って平山に数学を教えてやろう」 という方がいらっしゃいましたら、泣いて喜びますので、よろしくおねがいいたします。 とりあえず見てみてください 動きの話は文章で説明しても辛いので、まずは見て
モーションデザインはUIの未来 | POSTD
最近、「モーションデザイン」という言葉がデザイン業界で急に出てきていることに気づいていますか？大小様々な企業が、これに特化した肩書きを持つデザイナーたちを雇いはじめています。最近ではGoogleが I/Oカンファレンス で、Googleの製品で統一化されているモーションランゲージの概要について話していました。 この騒ぎは何でしょうか？そして何の意味があるのでしょうか？ モーションはストーリーを語ります。 アプリにおける全ての物事は連鎖になっていて、モーションはあなたのガイドになります。ボタンをクリックして、画面が変わる度に、そこにはストーリーがついてきます。例えば、アイテムを作ったり削除する時、アニメーションがどのように役に立つかを見ていきましょう。 アイテムを消すことは劇的で破壊的な作業ですので、適切に反応するようにしましょう。アイテムをただ画面から消すだけということはしないようにしまし
インタラクティブ・プログラミング勉強会 第1回 乱数 | fladdict
巷では、スマホは「手触り」が重要・・・って話が持ち上がりつつあるが、使い易さと気持ちよさを両方できる人材が不足している。広告Flash業界で培われたインタラクションのノウハウは、だんだんと失伝しつつあり、ビジュアルや動きをちゃんとコーディングできるスマホ系の人材なかなかいない。新しく勉強するパスもほとんどない。 そんなわけでTHE GUILDの社員研修として勉強会をすることに。目標は1年ぐらいでこの程度のモリモリ動くものを作れるようにすること。で、2年目に動きや手触りに、合理性や必然性、使い易さを付加できるとこまでもっていく。 第1回はインタラクティブの根幹となる乱数について。 1: 乱数とは ランダムな値を返す関数、機能。 乱数はインタラクティブ・プログラミングの根源。静的な絵とは根本に異なる、永遠に定着しない絵を作り出す。 インタラクティブなプログラミングでは、知識以上にその応用力が問
DroidKaigiで発表してきたこと＋ちょっと追記 - EDIT MODE
4/25（土）にDroidKaigiという、Androidエンジニア向けのカンファレンスに参加しました。 今回は久しぶりに運営側として参加したり、発表もさせて頂きました。 運営側視点では、圧倒的当事者意識の体現者である @hotchemi さんが、素晴らしいまとめを書いてくださっているので、ここでは発表した内容の補足や追記をしたいと思います。 DroidKaigiの運営進め方共有（ギークに憧れて） 発表したこと DroidKaigi当日は、会場Bの方で「JellyBeanとKitkatで実現するマテリアルデザイン」というタイトルで発表しました。 3日前にアップデートされたSupportLibrary-v22.1の中で、主にAppCompat-v7の変更点に触れながら、SupportLibraryを使ったマテリアルデザインの実現方法を解説しました。 4/22日の時点で既に7割ほど出来ていた資
庵野秀明氏、エヴァに登場する声と線だけのアニメについて「最低限の情報量で作りたかった」 #ニコニコ超会議2015
漫画が読めない子どもが増えている 川上：そこらへんで思うのは、たとえばみんな、漫画だったら誰かのまねをして、まねをしているうちに個性が出てくるっていうじゃないですか。 それって平たく言うと、みんな見たものをまねで書くんだけど、正確に再現できない。そのブレの部分が結局みんな個性になっているんじゃないかなって気がするんですよね。 庵野：あとは反発ですよね。「ここはこういう風にしてたけど、僕だったらこうする」っていう。そこをベースに別のところに発想を持っていくっていう。 漫画を読んだことない人にとってはいきなり漫画って読めないんですよね。うちの親もさっぱり読めないですから。 川上：最近漫画が読めない子どもが増えているっていいますよね。 庵野：コマの運びとか、ふきだしの意味がわからない。なんでこの文字のまわりがギザギザなんだと。怒ってる表現なのか、大声の表現なのか、わからない。 四角だとモノローグ
庵野秀明氏「アニメは情報です。理屈で作ります」川上量生氏との対談でアニメ制作の理論を語る #ニコニコ超会議2015
2015年4月25日にニコニコ超会議・超言論エリアで行われた、ドワンゴ・川上量生氏とエヴァンゲリオンの監督を務めた庵野秀明氏の対談を全文書き起こしでお送りします。庵野氏は「アニメは理屈で作っている」と、全ての工程に理論があることを語った。 「アニメの情報量」とはなにか 氷川竜介氏（以下、氷川）：みなさんこんにちは。アニメーション研究家の氷川竜介です。今日はようこそお越しくださいましてありがとうございます。 こっちの方ではニコニコ超会議・超言論ブースなんですけど、これから1時間「アニメの情報量とは何か」そういうお題でスタジオカラー代表の庵野秀明監督、KADOKAWA・DWANGOの川上量生会長にお越しくださいました。じっくりお話をうかがいたいと思います。よろしくおねがいします。 庵野秀明（以下、庵野氏）：庵野です。今日はお忙しい中どうもありがとうございます。 川上量生（以下、川上氏）：川上で
Sorting Algorithms Animations
KEY Black values are sorted. Gray values are unsorted. A red triangle marks the algorithm position. Dark gray values denote the current interval (shell, merge, quick). A pair of red triangles marks the left and right pointers (quick). DISCUSSIONThese pages show 8 different sorting algorithms on 4 different initial conditions. These visualizations are intended to: Show how each algorithm operates.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Pose | A truly simple animation library for React, React Native, and Vue
motiontable
GitHub - airbnb/lottie-ios: An iOS library to natively render After Effects vector animations
Page not found | abdz.do
Animocons: Animated Icons with mo.js | Codrops
anime.js
Dynamics.js
Ivan Cappiello and Paolo Acampora - A Skeleton Animated Story