ロケットの形状を変えました。ロケットを左向きに回転し、左向きに飛ぶようにしました。 さらに上向きに戻してから着陸するようにしました。 アニメーションを再度見るには、ブラウザの再読み込みを行ってください。
<script type="text/javascript" src="js/svg.min.js"></script> <script type="text/javascript" src="js/svg06.js"></script>実行結果のところには "svg" という id の div 要素と "code" という id の pre 要素を用意しました。中身は svg05.js の中で作って入れます。
<h2>実行結果</h2> <div id="svg"> </div> <h3>生成されたコード</h3> <pre id="code" class="brush: xml; class-name: 'code'"> </pre>
ロケットの頭部を三角形ではなく筍形に変更しました。 横への移動を追加するため、星空は use 要素で3枚配置し、ロケットと 反対方向に移動させました。 ロケットは use 要素で配置し、アニメーションで上昇・下降する間に、 左回転と右回転を追加しました。
window.onload = function() {
// Generate svg element
//<svg width="640" height="400" style="border: solid 1px lightgray">
const width = 640;
const height = 400;
const max = 200; // number of stars
const size = 2; // size of a star
const xmax = width - size - 1;
const ymax = height - size - 1;
var draw = SVG().addTo('#svg').size(width, height).css('border', 'solid 1px lightgray');
//<defs>
//<g id="stars">
var stars = draw.defs().group({id: 'stars'});
// <ellipse cx="?" cy="?" rx="1" ry="1"
// fill="#fff" stroke="none"/>
for (i = 0; i < max; i++) {
var x = Math.floor(Math.random() * xmax + size / 2);
var y = Math.floor(Math.random() * ymax + size / 2);
stars.ellipse(size, size).cx(x).cy(y).fill('#fff').stroke('none');
}
//</g>
//<g id="rocket">
var rocket = draw.defs().group({id: 'rocket'});
var dh = -40;
// Generate polygon, path, ellipse elements
// <polygon points="21,194 0,273 42,273"
// style="fill:#6e6e6e;stroke:#000;stroke-width:2"/>
rocket.polygon(`21,${194 + dh} 0,${273 + dh} 42,${273 + dh}`).fill('#6e6e6e').stroke({color: '#000', width: 2});
// <polygon points="162,193 141,273 183,273"
// style="fill:#6e6e6e;stroke:#000;stroke-width:2"/>
rocket.polygon(`162,${193 + dh} 141,${273 + dh} 183,${273 + dh}`).fill('#6e6e6e').stroke({color: '#000', width: 2});
// <polygon points="56,239 52,259 134,259 130,239"
// style="fill:#1f1f1f;stroke:#000;stroke-width:2"/>
rocket.polygon(`56,${239 + dh} 52,${259 + dh} 134,${259 + dh} 130,${239 + dh}`).fill('#1f1f1f').stroke({color: '#000', width: 2});
// <path d="M22,96
// A595,204 0 0 1 92,0
// A595,204 0 0 1 162,96
// V239
// H22
// V96"
// style="fill:#6e6e6e;stroke:#000;stroke-width:2"/>
rocket.path(`M22,96 A595,204 0 0 1 92,0 A595,204 0 0 1 162,96 V${239 + dh} H22 V96`).fill('#6e6e6e').stroke({color: '#000', width: 2});
// <polygon points="92,192 71,273 113,273"
// style="fill:#6e6e6e;stroke:#000;stroke-width:2"/>
rocket.polygon(`92,${192 + dh} 71,${273 + dh} 113,${273 + dh}`).fill('#6e6e6e').stroke({color: '#000', width: 2});
// <ellipse cx="92" cy="143" rx="42" ry="42"
// style="fill:#6e6e6e;stroke:#000;stroke-width:2"/>
rocket.ellipse().attr({cx: 92, cy: 143 + dh, rx: 42, ry: 42}).fill('#6e6e6e').stroke({color: '#000', width: 2});
// <ellipse cx="92" cy="143" rx="34" ry="34"
// style="fill:#217dbb;stroke:#000;stroke-width:2"/>
rocket.ellipse().attr({cx: 92, cy: 143 + dh, rx: 34, ry: 34}).fill('#217dbb').stroke({color: '#000', width: 2});
// <ellipse cx="146" cy="220" rx="6" ry="6"
// style="fill:#6e6e6e;stroke:#000;stroke-width:2"/>
// <ellipse cx="122" cy="220" rx="6" ry="6"
// style="fill:#6e6e6e;stroke:#000;stroke-width:2"/>
// <ellipse cx="64" cy="220" rx="6" ry="6"
// style="fill:#6e6e6e;stroke:#000;stroke-width:2"/>
// <ellipse cx="37" cy="220" rx="6" ry="6"
// style="fill:#6e6e6e;stroke:#000;stroke-width:2"/>
for (var theta = 30; theta < 180; theta += 30) {
var _cx = 92 + Math.round(70 * Math.cos(theta * Math.PI / 180));
if (theta != 90) {
rocket.ellipse().attr({cx: _cx, cy: 220 + dh, rx: 6, ry: 6}).fill('#6e6e6e').stroke({color: '#000', width: 2});
}
}
var x = Math.floor((width - rocket.width()) / 2);
var y = height - rocket.height();
//<ellipse cx="93" cy="351" rx="28" ry="73"
// style="fill:#ff0f0f;stroke-width:0"/>
rocket.ellipse().attr({cx: 93, cy: 351 + dh, rx: 28, ry: 73}).fill('#ff0f0f').stroke('none');
//<ellipse cx="94" cy="337" rx="18" ry="51"
// style="fill:#ff930f;stroke-width:0"/>
rocket.ellipse().attr({cx: 94, cy: 337 + dh, rx: 18, ry: 51}).fill('#ff930f').stroke('none');
//<ellipse cx="94" cy="316" rx="9" ry="25"
// style="fill:#ffef0f;stroke-width:0"/>
rocket.ellipse().attr({cx: 94, cy: 316 + dh, rx: 9, ry: 25}).fill('#ffef0f').stroke('none');
//</g>
//</defs>
//<rect x="0" y="0" width="640" height="400"
// fill="#000" stroke="none"/>
var sky = draw.rect(width, height).fill('#fff').stroke('none');
sky.animate({duration: 2000}).fill('#000');
sky.animate({delay: 6000, duration: 2000}).fill('#fff');
//<use xlink:href="#stars" x="0" y="0"/>
var use1 = draw.use(stars).move(0, 0);
use1.animate({duration: 2000}).move(0, height);
use1.animate({delay: 6000, duration: 2000}).move(0, 0);
//<use xlink:href="#stars" x="0" y="-400"/>
var use2 = draw.use(stars).move(0, -height);
use2.animate({duration: 2000}).move(0, 0);
use2.animate({delay: 2000, duration: 2000}).move(width, 0);
//<use xlink:href="#stars" x="-480" y="0"/>
var use3 = draw.use(stars).move(-width, 0);
use3.animate({delay: 4000, duration: 2000}).move(0, 0);
use3.animate({delay: 2000, duration: 2000}).move(0, -height);
//<use xlink:href="#rocket" x="?" y="?"/>
var use4 = draw.use(rocket).move(x, y);
use4.animate({duration: 2000}).move(x, y / 2);
use4.animate({duration: 2000}).rotate(-90, width / 2, height / 2);
use4.animate({delay: 2000, duration: 2000}).rotate(90, width / 2, height / 2);
use4.animate({duration: 2000}).move(x, y);
//</svg>
var svgNode = document.getElementById('svg').children[0];
var codeNode = document.getElementById('code');
// Get generated SVG code
var svgText = new XMLSerializer().serializeToString(svgNode);
// Show the code with additional new lines
codeNode.textContent = svgText.replace(/></g, '>\n<');
}
このプログラムは以下の情報またはソフトウェアを参照しています。