お世話になります。
概要
ただいまSVGで「秒針が進む度に、一番外側の枠が1目盛りづつ増えるアナログ時計」を作ろうとしています。
使用しているのはSnap.svgです。
ソースコード
現状のコードは以下となります。
html
1<!-- analog_watch.html --> 2<!DOCTYPE html> 3<html lang="ja"> 4 <head> 5 <script src="snap.svg-min.js"></script> 6 <script src="analog_watch.js"></script> 7 </head> 8 <body> 9 <svg id="container" width="400" height="400"></svg> 10 </body> 11</html>
javascript
1// analog_watch.js 2const WIDTH = 400; 3const HEIGHT = 400; 4const CX = WIDTH / 2; 5const CY = HEIGHT / 2; 6const R = WIDTH / 2 * 0.8; 7 8document.addEventListener("DOMContentLoaded",function () { 9 Snap.plugin(function(Snap, Element, Paper, glob){ 10 Snap.do = function(set){ 11 set(); 12 var anim = mina(0,1,0,1, function(){return 0.5;},set,mina.liner); 13 return anim; 14 } 15 }); 16 var paper = Snap("#container").attr({strokeLineCap:"round"}); 17 var around_circle = paper.circle(CX, CY, R * 1.1).attr({ 18 fill: "none", 19 stroke:"#fa0", 20 strokeWidth: R * 0.2, 21 strokeDashOffset: 25 22 }); 23 var circle = paper.circle(CX, CY, R).attr({fill: "#333", stroke: "#666", strokeWidth:4}) 24 25 var r = R; 26 27 r *= .75; 28 var hour = paper.line(CX, CY, CX, r).attr({stroke: "#ffc", strokeWidth: 4}); 29 r *= .75; 30 var minute = paper.line(CX, CY, CX, r).attr({stroke: "#fff", strokeWidth: 2}); 31 r *= .75; 32 var second = paper.line(CX, CY, CX, r).attr({stroke: "#f66", strokeWidth: 1}); 33 34 var anim = Snap.do(function () { 35 var now = new Date(); 36 var s = now.getSeconds(); 37 var m = now.getMinutes() + s / 60; 38 var h = now.getHours() + m / 60; 39 40 var now_arc_end = 0; 41 42 second.transform("r" + s * 6 + "," + CX + "," + CY); 43 44 around_circle.animate({strokeDashArray: "30, 70"}) 45 minute.transform("r" + m * 6 + "," + CX + "," + CY); 46 hour.transform("r" + h * 30 + "," + CX + "," + CY); 47 }) 48} , false); 49
※申し訳ございません、実際の動作はソースコードをコピーして手もとのブラウザでご確認ください。
現状
実現したいこと
上記の画像のオレンジ色の部分を、秒針の位置に合わせて扇形上に増えていくアニメーションを実装したいです。
やってみたこと
- Snap.svgのpathにはUコマンドがあるので、それをtransformで使えないかとやってみましたが、動きませんでした。
- pathをtransformメソッドを使い、三角関数で座標を指定して描画しようとしましたが、正直頭が追いつかず、コードも汚くなってしまったため、一度諦めてます。おそらくこの方法がベターだと思いますが。
- オレンジの枠をCircle属性にしてanimationさせようとしましたが、そもそも動かし方がよくわかっていません。
拙い質問かと思いますが、ご回答いただければ幸いです。
参考資料
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/14 13:35