WebアニメーションはRiveが便利！
みなさんは、Web アニメーション使っていますか？ おそらくLottieを使っている人が多いかと思います。 ただ、Lottieには大きな問題がありますね？ そうです。 Adobe の After Effects（AE）がないとアニメーションが作れないという問題です。 たくさんの人たちが嘆き苦しみながら AE を使うために Adobe に課金している事だと思います。 そんな人々を救うため、 最近では AE を使わなくてもアニメーションを作れるようにとLottie Labというサービスが開発されていたりします。 しかし、まだまだ公開には至っていない状態です。（2022/12/07 現在） そこで、Rive 登場 AE で行っていたアニメーションの作成から、書き出しまで全て Web 上で完結できるサービスです。 今回は、アニメーションの設定から React で動かすまでをやってみたいと思います！
CSS・SVGとVue.jsでのアニメーション作成入門 - ライブラリに頼らない表現力を身に付けよう - ICS MEDIA
※ CSS Animationに関してはWeb Animation APIを使うことでより簡単にJavaScriptからアニメーションを構築・制御できるようになります。2020年2月時点ではブラウザの実装が不十分でPolyfillを要するため、この記事では対象外としています。 専用ライブラリを使わずにアニメーションを作ろう 各ライブラリは特別な魔法を使っているわけではありません。 原理的にはCSS・SVG・WebGLといった各要素技術をしっかりと習得すれば、専用のライブラリと同等のことができるばかりか、より高い自由度を手に入れながら軽量化を実現できる可能性もあります。 また、専用のライブラリを利用する場合にも、基礎となる原理や各技術の得意不得意を知っていることは大きな武器となるでしょう。 Vue.jsを使ってCSSやSVGのアニメーションを書く とは言え、これらのアニメーションを土台の技術
2019年注目のJavaScriptアニメーションライブラリ11選 - Qiita
こちらの記事は、Jonathan Saring 氏により2018年 6月に公開された『 11 JavaScript Animation Libraries For 2019 』の和訳です。 本記事は原著者から許可を得た上で記事を公開しています。 何かいいJavaScriptのアニメーションライブラリがないかとWebを眺めていても、「おすすめ」されているはずの多くライブラリが、実は長い間メンテナンスされていませんでした。 そこで私は調査を重ね、あなたのアプリにも使える11の優れたライブラリ、そして今はほとんどメンテナンスされていないものの、非常に便利ないくつかのライブラリをまとめてみました。 アドバイス: JSコンポーネントを個別にパッケージ、公開するのにはBitを使いましょう。異なるプロジェクトやアプリケーション間で共有したりすることができ、チーム内でより迅速にアプリケーションを構築するこ
Zdog · Round, flat, designer-friendly pseudo-3D engine for canvas and SVG
Zdog Round, flat, designer-friendly pseudo-3D engine for canvas & SVG What is Zdog? Zdog is a 3D JavaScript engine for <canvas> and SVG. With Zdog, you can design and render simple 3D models on the Web. Zdog is a pseudo-3D engine. Its geometries exist in 3D space, but are rendered as flat shapes. This makes Zdog special. Zdog is small. 2,100 lines of code for the entire library. 28KB minified. Zdo
SVGでリアルな湯気を作ってみる ｜ Tips Note by TAM
もう7年ほど前になりますがFlashでサイト製作をしていた時代に、表現に悩まされるものがありました。 それが『湯気』です。 イラストを使った可愛い表現なら問題ないですが、リアルな感じを作ろうと思うとこれがなかなか難しい。最近では動画やアニメGIFなどで代用されていたりすることも多いと思いますが、今回はそんな素材がない時に使える 『SVGで作るリアルな湯気』 を紹介したいと思います！ See the Pen Steam by uenaka (@uenaka) on CodePen. SVGで湯気を書く まずはSVGで湯気の形を自由に書いてみてください。 難しく聞こえるかもしれませんが、後々ボカして使用しますので形に拘る必要はありません。 参考までに私が書いてみた湯気がこちらです。 SVGにanimateを追記して動す よりリアルな動きに見せるため、SVGで書いた湯気を動かします。 ここも動き
jQuery DrawSVG - SVGをアニメーションしながら描画
画面の解像度が高まるのに合わせて注目を集めているのがSVGです。これまでのバイナリと異なり、SVGはXMLベースのテキストデータなので縮小、拡大しても綺麗なままです。 そしてテキストデータということは、その書き方もデータがすべて読み取れるということです。そこで作られたのがjQuery DrawSVGになります。 jQuery DrawSVGの使い方 jQuery DrawSVGのデモです。SVG画像がアニメーションしながら描かれているのが分かります。 画像と組み合わせるとこんなこともできます。 jQuery DrawSVGを使うとSVGに書かれている内容をアニメーションしながら描写してくれます。アニメーションGIFのようですが、よりスムーズで綺麗に描かれます。SVGを画像とはまた違った使い方で楽しめるのではないでしょうか。 jQuery DrawSVGはjQuery/JavaScript製
JavaScriptとCSSは不要！SVGの気持ちいいアニメーションで作られた超軽量のかわいいローディング -SVG Loaders
JavaScriptもCSSも画像も使用せず、SVGで実装された軽快で気持ちいいアニメーションで動くローディングのアイコンを紹介します。 ページに実装する時もJavaScript/CSSは必要ありません。簡単なHTMLでOK！ デモページ SVG Loadersの使い方 使い方は、簡単！ Step 1: SVGファイルをダウンロード 下記ページの右サイドの「Downlaod ZIP」から、SVGファイルをダウンロードします。 SVG Loaders -GitHub Step 2: HTML あとは、imgタグで配置するだけです。 <img src="svg-loaders/puff.svg" /> アイコンのカラーを変更したい時は、svg要素のfill属性を変更します。 <svg fill="#fff" width="140" height="64" viewBox="0 0 140 64
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
便利なツールが登場！ハンバーガーをXに変形させるのも簡単、SVGアイコンをアニメーション化できる無料ツール
CSSだけでここまで出来る！？タイトルや見出しにオススメなぬるぬる動く最新のCSSテキストエフェクト19選 | WebDesignFacts
🍻 16 Free Pure HTML5 And CSS3 SVG Loaders 🍻
Fabric.js Javascript Canvas Library
よくあるWebデザインにSVGで一手間加え、さまざまな要素がアニメーションで楽しくなる -Elastic SVG Elements