SVG画像をアニメーション化する「SVG Artista」

◆ SVG Artista
https://svgartista.net

紹介

「SVG Artista」は、SVGグラフィックのストロークをアニメーション化してコード出力してくれるツールです。

はじめに、「OPEN SVG」から既存のSVG画像を取り込みます。

左側のコントロールパネルは、アニメーションのストロークを調整したり

背景色を変更することができます。

アニメーションが完成したら「GET CODE」を押すと、コードとCSSを出力してくれます。

あとはSVGをどう出力するかに依存しますが、今回はシンプルにオンロードで表示するJS書いてみました。

<div class="wrapper">
  <h2 class="title">SVG Drawing Animation</h2>
 
<svg id="Logo_FIXED" data-name="Logo — FIXED" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400"><defs><style>.cls-1{fill:none;}.cls-2{fill:#1da1f2;}</style></defs><title>Twitter_Logo_Blue</title><rect class="cls-1 svg-elem-1" width="400" height="400"></rect><path class="cls-2 svg-elem-2" d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23"></path></svg>

  <div class="controls">
    <button class="btn-draw">Draw</button>
    <button class="btn-erase">Erase</button>
  </div>
</div>
/***************************************************
 * Generated by SVG Artista on 8/29/2019, 8:45:54 AM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

svg .svg-elem-1 {
  -webkit-transition: fill 1.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
          transition: fill 1.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s;
}

svg.active .svg-elem-1 {
}

svg .svg-elem-2 {
  fill: transparent;
  -webkit-transition: fill 1.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
          transition: fill 1.7s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s;
}

svg.active .svg-elem-2 {
  fill: rgb(29, 161, 242);
}
var wrapper = document.querySelector('.wrapper svg')
var btnDraw = document.querySelector('.btn-draw')
var btnErase = document.querySelector('.btn-erase')

// We are only adding and removing the 'active' class,
// the entire animation is defined in the CSS code
function draw() {
  wrapper.classList.add('active')
}

function erase() {
  wrapper.classList.remove('active')
}

// Add handlers to our buttons
btnDraw.addEventListener('click', draw, false)
btnErase.addEventListener('click', erase, false)

// Play draw animation once
setTimeout(draw, 300)

参考までに今回のコードはこちらになります。

◆ SVG Artista
https://svgartista.net


コメントを読む

新着ピック  






















新着ニュース

テクノロジーへの信頼、世界的に低下傾向--エデルマン調査

“副業型クラウドキッチン”で飲食店のキッチン稼働率を上げる「クラウドフランチャイズ 」が資金調達 | TechCrunch Japan

Amazonが初のレジなし食品スーパーをシアトルに出店 | TechCrunch Japan

「CPUは同じだけどMaxとはこれいかに」なGPD P2 Maxを検証する

Comcastが広告入りの無料ストリーミングサービスXumoを買収 | TechCrunch Japan

GitHub ActionsワークフローでAmazon S3のオブジェクトにアクセスする | Developers.IO

グーグル、「Chrome」のゼロデイ脆弱性などを修正

HPがXeroxによる敵対的買収回避のために数千億円規模の配当を株主に提案 | TechCrunch Japan

Facebook、VRゲームのSanzaru Gamesを買収 Oculus Studio傘下に

G-SHOCKに心拍計・GPS機能搭載の新モデル 健康チェックやトレーニングに対応 5万5000円

5Gの課題は「ビジネスモデル」と「端末価格」にあり 4キャリアがディスカッション

「iPhone」と「Apple Watch」を活用した心臓研究プログラムが米で開始

行列ができる店があるのに、なぜ「たい焼き店」は増えないのか

クアルコムの5G対応「Snapdragon 865」、70機種超のスマホに--サムスン、ソニーなど

3Dインテリアコーディネート「KAREN」は「COSIC」に、インテリア通販「FLYMEe」との資本業務提携を締結 | TechCrunch Japan

ディズニーのアイガーCEOが退任--置き土産は「Disney+」

「GIFをジフと呼ばないで」キャンペーン GIPHYとピーナツバター「Jif」メーカーがコラボ

Salesforce共同CEOのキース・ブロック氏が辞任 | TechCrunch Japan

「Firefox」、「DNS over HTTPS(DoH)」をデフォルトで有効化--米国で

外国人労働者のビザ取得をサポートするone visaが「GovTechカオスマップ 2020」を公開 | TechCrunch Japan

もっと見る
記事をPICKする
会員登録
Register
記事をPICKする

会員登録すると、もっと便利に利用できます。