タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Webやスマホアプリに最適なSVGアニメーションのスピナー！ 超軽量サイズで、くるくる快適に動くぞ -SVG Spinners
商用プロジェクトでも完全に無料、コピペで簡単に利用できるSVGアニメーションのスピナーを紹介します。よく見かけるものから変わったものまで、さまざまなスピナーが揃っており、スピナーの素材として重宝すると思います。 SVGのスピナーのほとんどは、300-2500バイトの超軽量サイズ。アニメーションも快適で、くるくる気持ちよく動きます。 SVG Spinners -GitHub SVG Spinnersは、SVGで実装された超軽量のスピナーです。24x24dpで設計されていますが、SVGなのでサイズやカラーを簡単に変更できます。MITライセンスで、商用プロジェクトでも無料で利用できます。 スピナーは44種類あり、その中からいくつかコピペしてみました。 まずはよく見かけるドットが回転するスピナー。 <svg width="24" height="24" viewBox="0 0 24 24" xm
超お手軽モーションパス！SVGアニメーションを簡単に作成できる「SVGator」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、高度なSVGアニメーションを直感的に誰でも作成できるWebサービスをご紹介します。 手持ちのSVGファイルにアニメーションを追加できるのはもちろん、ゼロからイラストを描いてオリジナルのSVGアニメーションを作ることもできます。 記事後半ではモーションパスを活用したダイナミックなアニメーション手法もご紹介していますので、ご興味ある方はぜひ参考にしてください！ 【 SVGator 】 ■「SVGator」の使い方 それでは、「SVGator」をどのように使えばいいのか詳しく見ていきましょう！ まずはサイトにアクセスして、画面上部にある「SIGN UP」ボタンをクリックして無料のユーザー登録を済ませておきます。 ユーザー名、メールアドレス、パスワードを設定するだけなので簡単です。 （※GoogleやFacebookアカウントでもログイン可能）
皆さん、こんにちは。サツキです。 今回は、SVGアニメーションの話をしようと思います。 「SVGアニメーション」と聞いて難しいのでは？と思った方もおられるかもしれませんが、今回はCSSのみを使用した簡単に実装できるSVGアニメーションをご紹介しようと思います。 この先、SVGの利用はますます増えていくことになるかと思いますのでSVGアニメーションの経験の無い方はこの記事を読んで是非一度作成してみてください。 そもそもSVGとは？ SVG（Scalable Vector Graphics）とは、XMLをベースにしたベクターデータで構成された画像形式の一種です。 WEBサイトでよく利用される「PNG」や「JPG」といった画像形式はドット（点）の集まりで構成されるビットマップデータなのですが、このビットマップデータには画像の拡大・縮小などの編集の際に画質が落ちてしまう特徴があります。 一方、ベク
今回はFigmaとSVGatorを使ってアニメーションを作る方法をご紹介します。 手軽にアニメーションを作成してみたいと思った時に触れたSVGatorですが、アニメーションの知識があまりない、私でも簡単に作ることができました。 Lottieアニメーションをつくりたい！という方は、下記の記事もおすすめです。 After EffectsとLottieを使ったアニメーションについて、モーションデザイナーの田口さんが記事を書いています。ぜひ合わせてご覧ください。 ウェブサイトやアプリで使えるLottieアニメーションの基本。作成方法や注意点などを解説 Lottieアニメーションの作成に必要な「Bodymovin」のダウンロード・インストール方法 使ったきっかけ 私が入っているコミュニティで、「SVGatorの有料プラン1ヶ月使えるけど使ってみる？」と声をかけていただいたことがきっかけでした。 SV
ウェブサイトのデザイン演出にSVGアニメーションを入れたいなというときに、とっても便利なジェネレーターをご紹介。 https://svgartista.net/上記のサイトにアクセスしてSVG画像を読み込ませてパラメーターを設定すると、必要なコードを生成してくれるので後はそれを自身のウェブサイトに組み込むだけ。 UIのデザインもシンプルで分かりやすくていいですね。 では、簡単にやり方を解説します。 まずはアニメーションさせるSVG画像を作成します。 今回は線（stroke）がなぞるように描画され、その後に塗り（fill）が付くアニメーションにしたいので、イラストレーターでsezaki-designのロゴに線と塗りを付けました。 プレビュー画面で動作確認できるので便利！作成したロゴをSVG Artistaに読み込み、左のツールバーでパラメーターを設定。 CSSプロパティの種類は「transi
こんにちは。エンジニアのJackieです。 最近Webでよく見られるSVGのアニメーションが簡単に作れるライブラリー「Vivus.js」を紹介したいと思います。 Vivus.jsは簡単にSVG要素をアニメーション化できる軽量のJavaScriptライブラリーです。SVG画像のパスを、一つひとつの線が描いているようなアニメーションが作れるので、手書きな筆記体や複雑なラインアート・線画アニメーションには適していて、かなり手間を減らしてタイトなスケジュールがあった場合には役立ちます。 では手順を確認しましょう。 SVGを用意する。 アニメーションさせたいSVGを用意しましょう。SVG自体はいくつかの条件があります： 要素がStroke属性があることです。Fill属性は使わないです。 例：fill: "none"; stroke: "#FFF";隠れているパス要素、見えない要素をSVGに入っていな
みなさんこんにちは！編集部です。 寒くなってきましたが、しっかり保湿していますか？ 今回はAdobe AfterEffects(以下Ae)を使用してSVGアニメーションを制作する方法をご紹介したいと思います。 Bodymovinをインストールする まずAeのプラグインBodymovinをAdobeストアからDLします。 DLできない場合はLottieのGITHUBからもDLできます。 動かしたいベクターをAi形式で保存する SVGはベクターデータに動きをプラスしていくのでpngやJpgなどは使えません。 動かしたい画像は事前にベクターデータを用意しておきましょう。 ベクターデータをAdobe Illustrator(以下Ai)で開き、新規HDTVにペーストして保存します。 通常のアートボードでも問題ないと思いますがAe用のAiデータはこっちの方がいいって偉い人が言ってたのでわたしはこの形式
SVG アニメーション（SMIL）関連の仕様などの情報 SVG 1.1 仕様 （第２版） アニメーション 日本語訳 Scalable Vector Graphics (SVG) 1.1 (2nd Edition) Animation SMIL Animation 日本語訳 SMIL 3.0 Animation SVG DOM SVG DOM インタフェース SVG 1.1（第２版）スクリプト MDN animate MDN animateTransform MDN animateMotion SVG アニメーション（SMIL）関連の参考サイト MDN SVG animation with SMIL svg要素の基本的な使い方まとめ 12.アニメーション svg要素の基本的な使い方まとめ 15.スクリプティング atmarkit SVGで図形やアニメを描画してみよう SVGアニメーションの現
01AfterEffectsでパスアニメーションを作る この記事は、「デザイン女子部 Advent Calendar 2020」の23日目の記事です！ 今回は、SVGのパスアニメーションを簡単に実装できる、BodymovinとLottie.jsの使い方を簡単に紹介したいと思います。まずは、AfterEffects（以下、AE）を使ってパスアニメーションを作りましょう。AEの使い方については、ここでは詳しい説明は省略します（大変長くなってしまうので…。）ただ、AEを使ってどんなことが出来るのか、少しでもイメージがわくように、私が実際に作業した事例を基に、おおざっぱに紹介しちゃいますね！！！ AfterEffectsの編集画面 AfterEffectsの編集画面はこんな感じ。初めて開く人は何が何やらわからずびっくりしちゃうかもしれませんね。 ペンツールや選択ツール、回転ツールなどを切り替えるツ
リッチな表現に！After Effectsを使った動くSVGアニメーションの作り方と実装方法｜BiNDup こんにちは、デザイナーのオモトです。 私がノーコードCMS「BiNDup」を使う上で、活用している実用的なカスタマイズ・テクニック第3弾です。 今回は、「Adobe After Effectsで作ったSVGアニメーションの作り方と、BiNDupに実装する方法」について解説します。 専門用語や工程数が多く、複数のアプリを経由する、だいぶ高度な使い方になるので、こういうこともできるんだなーぐらいに思っておいていただけると幸いです。 また複数のアプリを経由すると、編集データや素材がごちゃごちゃして、後で見返した時に大混乱が起きることが多いので、フォルダの整理方法を含め、丁寧に解説していきます。 設定できなかった方にはAdobe IllustratorとAfter Effects、BiNDu
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ロゴをリッチに！？SVGアニメーションの簡単作成
Figma×SVGatorでつくるSVGアニメーション - necco note | necco inc.
SVGアニメーションジェネレーター SVG Artista - Blog - sezaki design
Vivus.jsで絵描き風のSVGアニメーションをする
SVGアニメーションをAfterEffectsで作ろう！｜ケーワンプラス｜ケーワン・エンタープライズStaffブログ
SVG アニメーション（SMIL を使ったアニメーション）
AE × Bodymovin × Lottie.jsでSVGアニメーション！ | ノマクリ
リッチな表現に！After Effectsを使った動くSVGアニメーションの作り方と実装方法｜BiNDup｜成果につながるWebスキルアッププログラム
pc.watch.impress.co.jp
ameblo.jp/k-kyokujitsu256
plat-go.com
sp.efight.jp
note.com/oosiroren
shioriko.nm.bex.jp