【D3.js】Pathアニメーション
上記記事を参考にして日本の地形でパスアニメーションを行ってみました。
D3のトランジションとCSSアニメーションとを組み合わせたら、なにか面白い表現ができそうですね。
（ちなみに、北方領土が無いのは海外のサイトで取得したデータを利用しているからです。……この辺、まぁ、いろいろとありますねぇ）
サンプル
アニメーションCSS設定
|
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 |
.japan { fill: white; stroke-width:1; stroke-dasharray: 3000; stroke-dashoffset:3000; animation: DASH 6s ease-in alternate forwards; -webkit-animation:DASH 6s ease-in 0s forwards; -o-animation:DASH 6s ease-in 0s forwards; animation:DASH 6s ease-in 0s forwards; } @keyframes DASH{ 0%{stroke-dashoffset:3000;} 100%{stroke-dashoffset:0;fill:green} } @-moz-keyframes DASH{ 0%{stroke-dashoffset:3000;} 100%{stroke-dashoffset:0;} } @-webkit-keyframes DASH{ 0%{stroke-dashoffset:3000;} 100%{stroke-dashoffset:0;fill:green} } @-o-keyframes DASH{ 0%{stroke-dashoffset:3000;} 100%{stroke-dashoffset:0;} } @-ms-keyframes DASHf{ 0%{stroke-dashoffset:3000;} 100%{stroke-dashoffset:0;} } |
fillカラーのアニメーションは初期状態で色を塗っていないと上手く遷移しないようです。
