css3 と Canvas_html/css_WEB-ITnose で実装されたハニカムアニメーション効果-htmlチュートリアル-php.cn

css3 と Canvas_html/css_WEB-ITnose で実装されたハニカムアニメーション効果

WBOY

リリース： 2016-06-24 12:01:27

オリジナル

1936 人が閲覧しました

私は最近、仕事で CSS3 アニメーションと JS アニメーションを勉強しました。主に仕事中のページの面白さを高めるために、誰もが意図的または意図せずに多くのアニメーション効果を追加しました。もちろん、それらのほとんどは CSS3 アニメーション効果です。これにより、モバイル端末のパフォーマンス要件が軽減されます。

今日は主にハニカム効果について説明します。特定の効果のソースコードは後で実行できるので、ここには gif は含めません。

css3の原理は非常に簡単で、background-sizeを変更するだけで、css3では背景にrepeat属性を設定できるので、背景画像をx,y方向に並べて表示することができます。最初に、backg-size: 10%、10% を設定します (この値は自由に定義できますが、大きすぎても問題ありません。そうしないと、効果が明確になりません)。最後に、backg-size: 100%、100 を変更します。 %; これにより、背景が画面全体に表示されます。ちなみに、background-position: 50% 50% を設定することを忘れないでください。そうしないと、背景がタイル状になってしまいます。画像は中心点に配置され、システムのデフォルトでは左上隅にタイル表示されます。次に、アニメーションを呼び出すようにアニメーションを設定することでこの効果を実現できます

<pre name="code" class="html">.honey {			position: absolute;			top: 0;			left: 0;			height: 100%;			width: 100%;			background: url(2.jpg) repeat;			background-size: 30% 30%;			background-position: center center;			-webkit-animation: honeycomb 3s 1 linear;		}				@-webkit-keyframes honeycomb {			0% {				background-size: 10% 10%;			}			100% {				background-size: 100% 100%;			}		}

ログイン後にコピー

このハニカムアニメーション効果を実現するには css3 を使用します。原理は単純で、効果は完璧ですが、唯一の不完全さは、一部のモバイルに存在する可能性があることです。電話機には互換性がありません。アニメーションの背景サイズを変更すると、この動作はまれですが、ブラウザのリフローは発生しませんが、ブラウザのローカルでの再描画も発生します。

キャンバスを使用してそれを実現することについては、私にとってはまったく退屈な方法なので、キャンバスを使用して描画することはお勧めしませんが、キャンバスアニメーションに興味がある場合は、お金を払うことができます。次のキャンバスの実装計画に注意してください。キャンバス描画の原理は非常に簡単で、幅と高さのパーセンテージを渡すことで、合計で描画する必要がある長方形の数と、各長方形の中心点の座標を計算できます。このコードをモジュールにカプセル化しました。ステップバイステップで読むことができます。まず、オブジェクトを定義します

次に、このオブジェクトのデフォルトの描画イメージを左上から定義します。コーナーは描画を開始するため、中心点から描画するメソッドを自分で記述する必要があります。これは、プロトタイプを通じて属性に追加できます

var Honey = function (options) {				for (var i in options) {			if (options.hasOwnProperty(i)) {				this[i] = options[i];			}		}		this.canvas = this.canvasId || document.getElementById(this.canvasId) || document.getElementById('#canvas');		this.ctx = this.canvas.getContext('2d');		this.canvasWidth = document.body.getBoundingClientRect().width;		this.canvasHeight = document.body.getBoundingClientRect().height;		this.canvas.width = this.canvasWidth;		this.canvas.height = this.canvasHeight;		this.stopped = true;		this.width = options['width'] || 10;		this.height = options['height'] || 10;		this.dwidth = options['dwidth'] || 1;		this.dheight = options['dheight'] || 1;		this.img = options.img;		/*if (!options.img) {			console.log('没有传入图片地址')；		}*/	};

ログイン後にコピー

このメソッドは非常に簡単で、半分だけオフセットするだけです。幅と高さを指定してから、キャンバスのデフォルトの描画関数を呼び出します

次のメソッドは、描画する必要がある四角形の中心点の位置を取得することです。まずコードを見てみましょう:

drawImage : function (x, y, w, h) {			var width = w * this.canvasWidth / 100,				height = h * this.canvasHeight / 100;			var top = y - height / 2,				left = x - width / 2;			var self = this;			// var img = self.img;			// img.onload = function () {				self.ctx.drawImage(self.img, left, top, width, height);			// }		},

ログイン後にコピー

numW と numH はそれぞれ、キャンバスの中心点 50、50 から始まることがわかります。ここで、確実に切り上げるために Math.ceil が使用されていることに注意してください。キャンバス全体を塗りつぶすことができ、x = 50 + width * i; は、x 方向の幅を引いた値が中心点の左側の x 値に等しいことを表します。これは y 方向にも当てはまります。最後に、この関数はすべての座標点を含む配列を返します。次のステップでは、この配列と上記の描画メソッドを使用して、すべての画像を 1 つずつ描画します。

完全なモジュールのソースコードは次のとおりです:

		// 获取所有显示小图片的中心点位置		getPoints : function (width, height) {			// var width = parseInt(w), height = parseInt(h);			var numW = Math.ceil(100 / width), numH = Math.ceil(100 / height);			var result = [];			for (var i = -Math.ceil(numW * 0.5); i <= Math.ceil(numW * 0.5); i++) {				var x = 50 + width * i;				for (var j = -Math.ceil(numH * 0.5); j <= Math.ceil(numH * 0.5); j++) {					var y = 50 + height * j;					result.push({x: x * this.canvasWidth / 100, y: y * this.canvasHeight / 100});				}			}			return result;		},

ログイン後にコピー

ここでは、一般的な setTimeout の代わりに requestAnimatioFrame が使用されています。具体的な理由はおそらく Google です。キャンバスを使用して描画すると、パフォーマンスの消費が高くなりますが、キャンバスアニメーションを作成する場合は、そのようなアニメーション効果を追加することを検討してください。

css3 と Canvas_html/css_WEB-ITnose で実装されたハニカム アニメーション効果

css3 と Canvas_html/css_WEB-ITnose で実装されたハニカムアニメーション効果