もうすぐ7月ということで、かに座のプログラムを書きました。プログラムのソースと結果をこちらに公開します。
今回はカニの目に瞬きするアニメーションを加えるため、SVG では目の円に eye1, eye2 という id を付けました。
<svg id="Zodiac" xmlns="http://www.w3.org/2000/svg" width="640" height="400">
<rect x="0" y="0" width="640" height="400" style="fill:#111"/>
<g id="Cancer">
<ellipse cx="126.966" cy="123.23" rx="62" ry="89" style="fill: #661f1f; stroke: #000; stroke-width: 2px;"/>
<circle id="eye1" cx="67.966" cy="98.23" r="9" style="fill: #3d1313; stroke: #000; stroke-width: 2px;"/>
<circle id="eye2" cx="69.966" cy="144.23" r="9" style="fill: #3d1313; stroke: #000; stroke-width: 2px;"/>
Snap.svg を利用して、この目の色を3秒間に300ミリ秒だけ色を変えるようにしました。
/**
* closeEyes function
* @since 0.3
*/
const closeEyes = function() {
for (i = 1; i <= 2; i++) {
eye[i] = Snap.select('#eye' + i);
eye[i].attr({fill: '#4f1818'});
}
setTimeout(openEyes, delay2);
}
/**
* openEyes function
* @since 0.3
*/
const openEyes = function() {
for (i = 1; i <= 2; i++) {
eye[i] = Snap.select('#eye' + i);
eye[i].attr({fill: '#3d1313'});
}
}
のんきさんの年月記 
“JavaScript (60) カニの瞬き” への2件の返信