webfontでアニメーションに挑戦

方法は単純、予めパラパラマンガsvg素材をつくっておき、
IcoMoon Appでwebfont化、JSで文字を切り替えてアニメーションです。

前エントリーでは、IcoMoon Appで、イラストの webfont化を紹介しました。
今回は、イラストのアニメーションに挑戦します。
その中身はというと、文字を切り替えるだけなので簡単です。

前回作った、▼このwebfontイラストの背景の集中線的な部分を回転アニメーションさせたいと思います。

&

!

"

#

$

%

準備として、パラパラマンガの要領で、少しずつ回転させた素材を用意します。
1コマだった背景部分を、2度ずつ回転させ計9コマ作成しました。
index.html - blog.quq.jp

これらの追加イラストを SVG化、font化します。
方法は、前エントリーにならい webfont化します。

あとは、jQueryで文字を切り替えるだけです。

(function($){

	//文字を表示している要素
	var trg=$("#textbox"); //例ではidにtextboxを振った要素です
	
	//文字をリストアップ
	var bgchs=["&","+",",","-",".","/","'","(",")","*"];
	
	//現在のindex値
	var bchindex=0;

	//タイマーで切り替え処理
	setInterval(function(){
		
		//文字の入れ替え
		trg.html(bgchs[bchindex]);
		
		bchindex ++;
		if(bchindex==bgchs.length){
			bchindex = 0;
		}

	},1000/24); //24fps

})(jQuery);

できたものがこちらです。

&

!

"

#

$

%

単色の制限がありますが、うまく活用するとCanvasでの描画よりも軽い?のでよいかもしれません。