コード不要で手描き風のSVGアニメーションを自動作成できるエディタ「Vivus Instant」の使い方大公開！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、誰でも超簡単にSVG画像をアニメーション化できる無料のWebサービスをご紹介します！ このサービスは、JavaScriptでSVG画像を制御できる「vivus.js」をベースにしており、誰でもプログラミング不要で簡単に「手描き風」のアニメーションを作れるのが特徴です。 【 Vivus Instant 】 そして本記事の後半では「vivus.js」を使った基本的なプログラミングについても解説しているので、ご興味ある方はぜひ参考にしてみてください！ ■「Vivus Instant」とは？ それでは、実際に「Vivus Instant」を使いながら、どのようなサービスなのかを見ていきましょう！ まずは、サンプルとして次のようなSVG画像を用意しました。 SVGは、ベクター形式で描かれたXML構造を持つデータですが、このままでは当然ながら静止画
一から学ぶベジェ曲線 | POSTD
(編注：SVGアニメーションを元記事にならい追加しました。リクエストありがとうございました。) 皆さんは線分のことをどう表現しますか？ 線分は、端点によって考えられるかもしれません。その端点を P0 、 P1 と呼ぶことにしましょう。 線分を厳密に定義するならば、「 P0 と P1 を結ぶ直線において、 P0 と P1 の間にある全ての点の集合」と言えるかもしれません。これは以下のように表せるでしょう。 便利なことに、上記の定義から、その線分上のどこにある点の座標でも簡単に求めることができます。例えば、中点は L(0.5) にあります。 実は、2点間のどんな値でも、任意の精度で 線形補間する ことが可能です。そのため、時間関数 L(t) の t で線をたどるといった、より複雑なことができるのです。 ここまで来ると、「それが曲線と何の関係があるのか？」と不思議に思うかもしれません。2つの点だ
10分でわかるSVG 基礎編
知って得する、Webブラウザ上で利用できるグラフィック関連技術。HTMLのような感覚で図形が描画できる「SVG」をハックしよう SVGドキュメントの書き方 本連載では、Webブラウザ上で利用できるグラフィック技術を分かりやすく紹介しています。第2回となる今回のテーマはSVGです。 ご存じの方も多いと思いますが、SVGはXMLをベースにしたベクトルグラフィックスの記述言語です。PNGのような画像フォーマットの1つでもありますが、実際にはXMLを記述したテキストファイルであり、HTMLと同様にJavaScript（DOM API）による制御も行えます。HTMLがタグによって文書の構造を記述するのと同様に、SVGはタグで図形を記述します。 ■ XMLでベクトルグラフィックスを記述するSVG 実はSVGの規格自体はかなり以前から存在したのですが、長らくInternet Explorer（以降IE）
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
