SVG ラインアニメーション
Anime.jsを試してみた 6つのサンプル

## Anime.js & Inkscape on Debian ##


SAMPLE01 枠線を往復で動かしてみる
 ▼SVG/JSを展開



SAMPLE02 一筆書き風にしてみる
 ▼SVG/JSを展開



SAMPLE03 続け字書き風にしてみる
 ▼SVG/JSを展開



SAMPLE04 塗りを変化してみる
 ▼SVG/JSを展開



SAMPLE05 変形ロボ風にしてみる
 ▼SVG/JSを展開



SAMPLE06 丸をラインの上に
 ▼CSS/SVG/JSを展開



▼ Line Animation etc. 

[準備中]







 RTERN

2017.09.20

Green-pen miyagi

SVGアニメーションが、ザワザワと注目らしいので試してみた。
CSSにコードを書く方法は、わりと簡単でスムーズに動くのだけれども、後になってIE.Edeが非対応と判明しがっかり Orz...
Google情報を拾うと、SCRIPT:ANIME.JSが軽快で良いとのこと。窓はやめて、Linux/Debianにしよう。そして、ついでにInkscapeもインストールして使ってみた。お高い窓&イラレよりも、かえって使い良いようだ。
そンな訳で、"Inkscape + Anime.js on Debian SVGラインアニメーション"の巻、奮闘の記録でございます。よろしければお立ち寄りください。

1) anime.js
   HomePage: animejs.com
   Download: https://github.com/juliangarnier/anime
   解凍: $ unzip anime-master.zip
   配置: anime.min.jsにパスを通す
2) Inkscape
   Check: $ aptitude show inkscape
   Install: # apt-get install -y inkscape
   File save: 保存用/inkscape SVG(*.svg)
            : Html用/プレーン SVG(*.svg)
   テキストをパス化: [パス]--->[オブジェクトをパスへ]
   パスをまとめる: [パス]--->[連結]
   パスを分ける: [パス]--->[分解]
   パスの動く方向: [パス]--->[向きを逆に]
3) SAMPLE html共通
   <!DOCTYPE html>
   <html lang="ja">
   <head>
   <meta charset=UTF-8">
   <link rel="stylesheet"
       href="./xxxxx.css" type="text/css">
   <script src="./anime.min.js"></script>
   </head>
   <body>
   <section>
   <svg>
     <!--SVGファイルから書き写し(不要部分を除く)
       動きを指定する-->
   </svg>
   </section>
   <script>
     <!--アニメーションのscript-->
   </script>
   </body>
   </html>
4) SAMPLE css共通
   html,
   body {
    background-color: #000000;
    width: 400px;
    height: auto;
    margin: auto;
   }
   .logo {padding: 10px;}
   .text-fills path,
   .lines path,
4) SAMPLE JS
   各SAMPLE 展開を参照してください。
5) 参考サイト
   CODEPEN anime.js https://codepen.io/collection/XLebem/#
     Trlangles-deer or rabbit
     Anime.js'MGS'logo animation
     Follow SVG Path -anime.js
   MIT LICENCE
     https://github.com/juliangarnier/anime/blob/master/LICENSE.md
     https://blog.codepen.io/legal/licensing/