SVG 描画 (2) -- 満天の星空のレンダリング_html/css_WEB-ITnose

いくつかのクールなアニメーションを見て、それを達成したいという願望が常にありますが、腹部には無力なコードはなく、未知である必要があります。大きな目は新しいものへの欲求でいっぱいです。 Animationsを使用してWebページに埋め込まれた、Falsh、Java Applet、Microsoft Silverlightは人気がありました。 GIF は依然として良い選択ですが、残念ながら DOM を使用してその要素を制御することはできません。 SVG、HTML5、CSS3 の登場以来、いくつかのシンプルなフラット アニメーションの実装は便利になりましたが、互換性や操作性などのいくつかの点ではまだ満足のいくものではありませんが、Web 開発者を興奮させるには十分です。 「グレースフル デグラデーション」や「プログレッシブ エンハンスメント」などのアイデアが人気になりました。 WebGL は、Web 描画という点では比較的優れていますが、ページ上にクールな 3 次元アニメーションをレンダリングできます。しかし、そのネイティブ インターフェイスは習得が難しく、WebGL 開発者はグラフィックに関する一定の基礎を必要とし、参入障壁が高くなります。その結果、WebGL のネイティブ インターフェイスをカプセル化するフレームワークが次々に登場しましたが、その中で最も有名なのは three.js でしょう。この記事では、SVG と JavaScript を使用してクールなデモを作成し、ブラウザーが満天の星空を自動的にレンダリングできるようにします。 (IE8 以下のブラウザには何も読み込まれないとは言わないでください。これは、SVG が IE9 以上およびその他の主流ブラウザとのみ互換性があるためです。ただし、これで SVG の魅力が止まるわけではありません~)

これが私たちが望むものです効果を発揮するために。

先先先先先先

<svg width="100%" height="100%" viewBox="-400 -300 800 600" preserveAspectRation="xMinYMid slice"><!-- 绘制星星原型 --><defs><polygon id="star" points="0 -10 2 -2 10 0 2 2 0 10 -2 2 -10 0 -2 -2" fill="white"></polygon></defs><!-- 装载满天星辰 --><g id="star-group"></g></svg>

E ここでは星を描き、多角形を作成します。パスは Points = "0 -10 2-2 10 0 2 0-2 2- 2- 10 0 -2 -2」。 use 属性を使用して、このスター要素のコピーを多数コピーし、 に配置する予定です。これは JavaScript ループを使用して実現できます。
CSS では、まず真っ青な空を描画し、スクロール バーのないページを全画面表示にします。 CSS コードは次のとおりです。

html, body {margin: 0; padding: 0; width: 100%; height: 100%; background: #012; font-size: 0; line-height: 0;}

2. JavaScript コードを記述します コードを直接入力します:

window.onload=function () {// 页面加载完毕后，执行满天星辰的渲染rederStar();}// SVG元素的命名空间var svgNS = "http://www.w3.org/2000/svg";var XLINK_NS = "http://www.w3.org/1999/xlink";// 将use属性封装成函数，以便调用function use(origin) {var _use = document.createElementNS(svgNS, "use");_use.setAttributeNS(XLINK_NS, "xlink:href", "#" + origin.id);return _use;}// 创建任意两个数之间的随机数function random(min, max) {return min + (max - min) * Math.random();}// 绘制满天星星function rederStar() {// 获取星星原型和装载满天星星的容器star-groupvar starRef = document.getElementById("star");var starGroup = document.getElementById("star-group");// 星星的总数量var starCount = 500;// 循环，画出 starCount 个星星for(var i = 1; i < starCount; i++) {// star引用starRef原型var star;star = use(starRef);// 让星星的透明度、位置和大小随机变化star.setAttribute("opacity", random(0.1, 0.4));star.setAttribute("transform", "translate(" + random(-1000, 1000) + "," + random(-400, 400) + ") " + "scale(" + random(0.1, 0.6) + ")");// 将绘制好星星置入starGroup的DOM子元素中starGroup.appendChild(star);}}

ペンを参照 <a href= "http://codepen.io/dengzhirong/pen/ZGKKXd/" data-ke-src="http://codepen.io/dengzhirong/pen/ZGKKXd/"&アンプ;アンプ;アンプ;アンプ;アンプ;gt;ZGKKXd&アンプ;アンプ;アンプ;アンプ;アンプ;アンプ;アンプ;アンプ;アンプ;アンプ;LT;/a&アンプ;アンプ;アンプ;アンプ; ;amp ;amp;amp;amp;amp;gt; by dengzhirong (<a href="http://codepen. io/ dengzhirong" data-ke-src="http://codepen.io/dengzhirong">@dengzhirong& amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a>) で;amp ;amp;amp;amp;amp;amp;amp;amp;amp;lt;a href="http://codepen.io" data-ke-src="http://codepen.io"&アンプ;アンプ;アンプ;アンプ;アンプ;アンプ;アンプ;アンプ;アンプ;アンプ;アンプ;アンプ;アンプ;アンプ;アンプ;lt;/a&amp ;amp;amp;amp;amp;amp;amp;amp;amp;gt;
さて、この方法は一般に 2 つの数値間の乱数を取得するために使用されることに注意してください: min + (max - min) * Math.random()。
SVG 要素を動的に作成するには、名前空間 http://www.w3.org/2000/svg を追加する必要があります。動的に作成された SVG 要素の xlink リンク属性にも名前空間 http://www.w3 を追加する必要があります。 org/1999/xlink。

改善する価値のある領域は次のとおりです:
1. ここでは 500 個の DOM 要素が HTML に挿入されていますが、DOM 要素を変更するたびにページの読み込み速度が大幅に低下するため、最適化する必要があります。 creatDocumentFragment の使用を検討することも、文字列を使用して新しく作成した DOM テキストを保存し、それを HTML にすぐに挿入することもできます。
2. 星座の描画範囲はSVGの幅と高さ、viewBoxの値に大きく影響し、結合度は若干高くなります。 (通りすがりの専門家がヒントをくれるといいですね~)

デモはこちらです(2KB)

3. 何か楽しいことをしましょう 星だけの夜空は少し単調です。文学的、芸術的な絵画要素を追加することも検討できます。 用自己 もともとAIを使って何かを描きたかったのですが、AIがつまづいたので、大きな牛の裸の写真を撮って使用しました。ソースコードを修正し、風の吹くアニメーション効果を追加します。

SVG は次のとおりです。(5KB)
さて、一般的に言えば、単純なグラフィックスは SVG コードを使用して直接入力できます。ただし、一部の複雑な SVG パスの場合は、AI または SVG-Edit を使用して描画し、SVG 形式で保存し、パス ノードを抽出して編集する SVG ファイルに配置し、塗りつぶし属性を変更することをお勧めします。アニメーション効果を追加します。
SVG ファイルを HTML に挿入します。いくつかの方法があります。http://www.w3school.com.cn/svg/svg_inhtml.asp を参照してください。私は SVG 画像を背景画像として挿入することに慣れています。 最後に、スタイルを再度変更して完了です。
効果は次のとおりです:

ペンを参照 <a href="http://codepen.io/dengzhirong/pen/YXVVEV/" data-ke - src="http://codepen.io/dengzhirong/pen/YXVVEV/">YXVVEV&amp ; amp;lt;/a> by dengzhirong (<a href="http://codepen .io/dengzhirong" data-ke-src="http://codepen.io/dengzhirong">@dengzhirong& amp;amp ;amp;amp;amp;lt;/a>) オン &lt ;a href ="http://codepen.io" data-ke-src="http://codepen.io">CodePen& ;amp;amp;amp;lt;/a>

デモはこちら (7KB)