最近のトラックバック

2018年8月
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
無料ブログはココログ

« スピリッツ 目次 2012年 11月 19日号 NO. 49 | トップページ | スピリッツ 目次 2012年 11月 26日号 NO. 50 »

2018-05-22

svg で 駒が動く

svg では、簡単なアニメーションができる。下の図の三角をクリックすれば、駒が動き始める。

と飛歩香香 銀歩桂 持駒 なし

しかし、動かないプラウザ(IE など)があるようだ。

対象駒の 3個には、増分とタイミングのペアを与えている。それ以外は前回と同様。

7手詰だから、0.1 で初手 0.2 で2手目 0.3で3手目のタイミングとしている。 

玉は、 同じタイミングで増分を 2値 指定している。ジャンプしているように見える。

桂は、取られたときに、表示外へジャンプさせている。

馬は、0.05 ずれたタイミングなので、移動がみえる。

対象駒が 3個で、手数も短い。また「成」や「持駒の使用」もないので、データ作成は簡単だった。 もっと複雑になってくると面倒だ。

<svg width="300pt" height="300pt" viewBox="0 0 11 13"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">

<path id="start" stroke-width="0.08" stroke="#c44" fill="#fee"
     d="M5 10 l1.73 1 l-1.73 1 v-2 Z"/>

<g stroke="brown">
  <path stroke-width="0.08" 
    d="M0.95 0.18 h9 v9 h-9 v-9 Z" fill="none" />
  <path stroke-width="0.02" 
    d="M0.95 1.18 h9 m-9 1 h9 m-9 1 h9 m-9 1 h9 m-9 1 h9 m-9 1 h9 m-9 1 h9 m-9 1 h9
        m-8 -8 v9 m1 -9 v9 m1 -9 v9 m1 -9 v9 m1 -9 v9 m1 -9 v9 m1 -9 v9 m1 -9 v9" >
</g>

<g font-size="0.9" font-family="serif monospace" >
<text x="3 1 6 5 8" y="3 5 8 9 9" >と飛歩香香</text>
<text x="6 6 6" y="3 4 6" rotate="180" transform="translate(0.9,-0.64)">銀歩桂</text>
<text x="10 10 10 10 10" y="5 6 7 8 9">持駒 なし</text>

<text x="5" y="4" rotate="180" dx="0.9" dy="-0.64" >玉
<animateTransform
  attributeName="transform"
  attributeType="XML"
  begin="start.mouseup" restart="whenNotActive"
  dur="20s"
  values="0; 0; 1 1; 1 1; 2 2; 2 2; 2 3; 2 3"
  keyTimes="0; 0.2; 0.2; 0.4; 0.4; 0.6; 0.6; 1"
  type="translate"/>
</text>

<text x="7" y="6" >桂
<animateTransform
  attributeName="transform"
  attributeType="XML"
  begin="start.mouseup" restart="whenNotActive"
  dur="20s"
   values="0; 0; -10 -10; -10 -10"
  keyTimes="0; 0.4; 0.4; 1"
  type="translate"/>
</text>

<text x="5" y="8" >馬
<animateTransform
  attributeName="transform"
  attributeType="XML"
  begin="start.mouseup" restart="whenNotActive"
  dur="20s"
  values="0; 0.3 -1; -3 -3; -3 -3; 1 -7; 1 -7; 4 -4; 4 -4; 1 -1; 1 -1"
  keyTimes="0; 0.1; 0.15; 0.3; 0.35; 0.5; 0.55; 0.7; 0.75; 1"
  type="translate"
  />
</text>



</g>
</svg>
>

« スピリッツ 目次 2012年 11月 19日号 NO. 49 | トップページ | スピリッツ 目次 2012年 11月 26日号 NO. 50 »

「パソコン・インターネット」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/148337/66748790

この記事へのトラックバック一覧です: svg で 駒が動く:

« スピリッツ 目次 2012年 11月 19日号 NO. 49 | トップページ | スピリッツ 目次 2012年 11月 26日号 NO. 50 »