画像アニメーションの動的な描画を実現するjQueryプラグイン ImageDrawer.js (ソースコードダウンロード付き)_jquery

ImageDrawer.js は、画像アニメーションを動的に描画できる jQuery プラグインです。 ImageDrawer.js プラグインを使用すると、ページ上に画像を描画する動的なプロセスを作成できます。描画アニメーションの継続時間などのパラメーターを制御できます。これは非常に興味深いことです。

エフェクト表示 ソースコードダウンロード

使用方法

この動的に描画される画像プラグインを使用するには、imagedrawer.css、jquery、imagedrawer.js ファイルをページに導入する必要があります。

<link rel="stylesheet" href="css/imagedrawer.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/imagedrawer.js"></script>

HTML 構造

描画する必要がある画像をページに挿入します。

<div id="container">
<img  src="/static/imghwm/default1.png"  data-src="img.jpg"  class="lazy"  id="example" alt="画像アニメーションの動的な描画を実現するjQueryプラグイン ImageDrawer.js (ソースコードダウンロード付き)_jquery" >
</div>

プラグインの初期化

ページ DOM 要素が読み込まれた後、次の方法で画像描画プラグインを初期化できます。

$('div#container').drawImage();

設定パラメータ

ImageDrawer.js 画像描画プラグインには、次の使用可能な構成パラメータがあります。

$(div#container).drawImge({
duration: 20, @number - seconds it's take to draw the entire picture
Instead of specifying the duration on the whole animation,
|| { it's also possible to set the duration of single drawing phases:
borderPencil : 9, @number - seconds it's take to draw the picture by using only the pencil for borders
pencilShades : 6, @number - seconds it's take to draw sharpest shades with black pencil
colorShades : 7.5, @number - seconds it's take to draw first, basic, vanish colors
fullColors : 7.5 @number - seconds it's take to define better all colors on the picture
},
background: '#949494', @string - background color for image while it's been drawing
callback: fn(), @function - function to execute after the last phase
pencil: {
height: '50px',
width : '50px',
src : './img/pencil.png' @string - path to the pencil image
}
});

duration: アニメーションの描画時間。整数またはオブジェクトを指定できます:

{
borderPencil : 9, 
pencilShades : 6, 
colorShades : 7.5, 
fullColors : 7.5 
}

borderPencil: 境界線を描画するのに必要な時間。
pencilShades: 白黒の影を描画するのに必要な時間。
colorShades: カラーシャドウの描画に必要な時間。
fullColors; 色を塗りつぶすのにかかる時間。
背景: キャンバスの背景色。

callback: コールバック関数。

鉛筆: キャンバスの上に表示される小さな鉛筆アイコン。

以上、エディターが画像アニメーションを動的に描画するためのjQueryプラグインImageDrawer.jsについての知識を紹介しました（ソースコードダウンロード添付）。皆様のお役に立てれば幸いです。