svgアニメーション(2)— setIntervalを使ったアニメーション
Tips

2016.12.27

svgアニメーション(2)— setIntervalを使ったアニメーション

【お詫び】
以前投稿した「svgアニメーション」の記事ですが、その後、internet explorer(ie)では最新バージョンであるie11でも、css transitionやanimationでのsvgの操作には対応していないということが判明し、記事を御覧頂いた皆様に不完全な内容の記事をご紹介してしまったことをここにお詫びいたします。
(※わたしもその後対応でえらい目にあいました。。。)
ということで第2段です。
svgの手書き風アニメーションについて書かせていただいた前回の投稿では、

  1. 手書き文字のアウトラインを作成する
  2. 手書き文字のストロークを作成する
  3. svgコードを出力して、ストロークにclipPathを適用する
  4. cssでアニメーションを実装する

という4ステップで、ということで書かせていただきましたが、
今回はその4ステップ目の「cssでアニメーションを実装する」を「jQueryでアニメーションを実装する」と書き換える形で
ご紹介したいと思います。
※svgでの画像の作成方法やclipPathの使い方などは前回の記事「svgアニメーション」をご覧ください。

jQueryを使ったアニメーションの原理

まず、jQueryとはjavascriptを簡単に扱うことができるようにする「ライブラリ」と呼ばれるファイルの代表みたいなものでして、ウェブ上に有益な情報もたくさんあるため、ここではjQueryの紹介やインストール方法については割愛させていただきます。
jQueryでアニメーションというと、jQueryを知っている方は、「jQueryにはanimateという素晴らしいメソッドがあるじゃないか」と思われるかもしれませんが、残念ながらsvgのstroke-dashoffsetのプロパティについては、animateメソッドではアニメーションさせることができません。
ですので、今回は昔ながらの方法(?)でのアニメーションの実装方法を簡単にご紹介していきたいと思います。
映像一般に言えることなのですが、モノや人が動く一瞬一瞬を切り取った静止画を連続して見せると、あたかも滑らかに動いているように見えてしまうという人間の目の錯覚を利用しています。
それをjQueryを利用して(地道に)実現しようとする場合、一定間隔で処理を行なうsetTimeoutsetIntervalといったメソッドを利用して、例えば「1秒間に点Aから点Bまで、点Xが移動する」といったような場合、まず一秒間に何コマ画像を用意するか(「フレームレート」)を決めた上で、点Aから点Bまでの距離を「L」とすれば、点Xを「 L / フレームレート 」の距離毎コマ動かした画像を、「 1 / フレームレート 」秒ごとに見せることで実現することができます。
今回はsetIntervalを使った、手書き風のsvg文字のアニメーションの実装方法をご紹介したいと思います。

setIntervalを使った手書き風のsvg文字のアニメーション

ただ点が移動する、というのとは違って見えますが、svgの手書き風アニメーションについても、先程ご紹介した原理の応用で実現することができます。
先程の「点X」を「 描画される線の先端 」、「 点Aから点Bまでの距離 」を「 svgのパスの長さ 」として考え、

  1. 「描画される線の先端」 = 「stroke-dashoffset」の値を、
  2. 毎コマ毎に「 svgのパスの長さ / フレームレート 」、
  3. 最大値( svgのパスの長さ )から減らして行く

という処理を行います。
【1】の処理は、対象のオブジェクトのプロパティの値を変更する、その名もattrというjQueryのメソッドを利用し

var path = $('#stroke'),
length = <先端の位置>;
path.attr('stroke-dashoffset',length);

とて、
【2】の値については、パスの長さが今回は1646、1秒間に30フレーム処理をするとして、

var path_length = 1646,
frame_rate = 30,
stroke_per_frame = path_length / frame_rate;

【3】は【1】と【2】を組み合わせて、setIntervalを利用して、

See the Pen SVG Handwrite-Text with JQuery by Shinji Yamamoto (@commono_yamamoto) on CodePen.


という比較的シンプルな書き方で実装が可能です。

※もし↑にcodepenが表示されていなかったら大変、お手数ですが、リロードをお願いします。。
※今回は一度書き終わったら止まるという処理になっていますので、すでに書き終わっていたら「RERUN」のボタンを押して下さい。

今回は比較的簡単にsvgのpathのアニメーションをjQueryで実装する方法をご紹介いたしましたが、pathの動きが一定のスピードになっていますので、次回は「jQuery easing plugin」の裏技(?)を使って自作のアニメーションの処理にイージングをかける方法をご紹介したいと思います。

前回記事「svgアニメーション

Relative Post

Latest Journal

philosophy | 哲学

philosophy | 哲学

commono
2016.12.19
Vision | 展望

Vision | 展望

commono
2016.12.09
webデザインフロー(1)インサイド→アウト ー理論編ー

webデザインフロー(1)インサイド→アウト ー理論編ー

Shun Uchimura
2017.05.13
オウンドメディア(3)少ないリソースで引力のあるメディア展開をする方法

オウンドメディア(3)少ないリソースで引力のあるメディア展開をする方法

Shun Uchimura
2017.05.13
オウンドメディア(2)押さずに、引き込む。

オウンドメディア(2)押さずに、引き込む。

Shun Uchimura
2017.05.13
オウンドメディア(1)受け手主観でオウンドメディアをつくる

オウンドメディア(1)受け手主観でオウンドメディアをつくる

Shun Uchimura
2017.05.13
デザイナーとしてマーケティングを考える(4)4Pのキモを知る

デザイナーとしてマーケティングを考える(4)4Pのキモを知る

Shun Uchimura
2017.05.12
デザイナーとしてマーケティングを考える(3)4Pは古いのか

デザイナーとしてマーケティングを考える(3)4Pは古いのか

Shun Uchimura
2017.05.12
ajaxっぽいスムーズな画面遷移の方法(3/3)

ajaxっぽいスムーズな画面遷移の方法(3/3)

Shinji Yamamoto
2017.12.28
ajaxっぽいスムーズな画面遷移の方法(2/3)

ajaxっぽいスムーズな画面遷移の方法(2/3)

Shinji Yamamoto
2017.11.24
ajaxっぽいスムーズな画面遷移の方法(1/3)

ajaxっぽいスムーズな画面遷移の方法(1/3)

Shinji Yamamoto
2017.11.22
スムーススクロールがうまく動かない場合の解決方法

スムーススクロールがうまく動かない場合の解決方法

Shinji Yamamoto
2017.11.22
Javascript APIでのストリートビュー実装方法

Javascript APIでのストリートビュー実装方法

Shinji Yamamoto
2017.11.15
指定の範囲までついてくるフローティングバナー

指定の範囲までついてくるフローティングバナー

Shinji Yamamoto
2017.07.13

View ALL

Contact