調べて、memo

メモブログ本領発揮

配列の切り出し
Array.prototype.slice.call()
([].slice.call())
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

.getTotalLength()
<path/>の長さの取得。
firefoxだと少し短くなるそう。デフォルトで20~30くらい＋と良いようです。

.querySelectorAll()
element = document.querySelector(selectors);
selectorsはノードリストで戻ってくる。
nodelist–>http://js.studio-kingdom.com/javascript/node_list
http://js.studio-kingdom.com/javascript/element/query_selector_all

Snap Animate Dash Offset
線を引くアニメーション。.animate();
jQueryでもあった。書き方はほぼ同じ。「要素.animate({パラメーター},実行時間);」
http://svg.dabbles.info/snaptut-animateoffset

var s = Snap("#svgout");

var svgString1 = '';
var svgString2 = '';

function Drawing( svgString, transformString, timeBetweenDraws ) {
    this.fragment = Snap.parse( svgString );
    this.pathArray = this.fragment.selectAll('path');
    this.group = s.g().transform( transformString ).drag();
    this.timeBetweenDraws = timeBetweenDraws;
};

Drawing.prototype.init = function( svgString, transformString ) {
      this.group.clear();
      this.currentPathIndex = 0;

};

Drawing.prototype.endReached = function() {
    if( this.currentPathIndex >= this.pathArray.length ) {
        return true;
    };
};

Drawing.prototype.callOnFinished = function() {
}

Drawing.prototype.initDraw = function() {
    this.init();
    this.draw();
};

Drawing.prototype.quickDraw = function() {
    this.init();
    this.timeBetweenDraws = 0;
    this.draw();
};

Drawing.prototype.draw = function() {         // this is the main animation bit
    if( this.endReached() ) {
        if( this.callOnFinished ) {
            this.callOnFinished();
            return
        };
    };
    var myPath = this.pathArray[ this.currentPathIndex ] ;

    this.leng = myPath.getTotalLength();

    this.group.append( myPath );

     myPath.attr({
       fill: 'none',
       "stroke-dasharray": this.leng + " " + this.leng,
       "stroke-dashoffset": this.leng
     });

     this.currentPathIndex++;

     myPath.animate({"stroke-dashoffset": 0}, this.timeBetweenDraws, mina.easeout, this.draw.bind( this ) );

};

var myDrawing1 = new Drawing( svgString1, 't0, 0, s1.8', 800 );
var myDrawing2 = new Drawing( svgString2, 't69,50 s1.8', 3000 );
var myDrawing3 = new Drawing( svgString2, 't150,150 s1.8', 5000 );

myDrawing1.initDraw();
myDrawing1.callOnFinished = function() { myDrawing2.initDraw() };
myDrawing2.callOnFinished = function() { myDrawing3.initDraw() };