2012年5月4日金曜日

SVG Animation in Dartium

ブラウザ上で何らかのアニメーションをさせようとした場合、選択肢が色々ある。以前はCSS3を使ったし、他にもCanvasを使ったりSVGを使ったりスクリプトベースのアニメーション（要素の位置を定期的に更新する等）もやろうと思えばできる。今回はそのなかでもSVGを用いたアニメーションをDartでやってみた。

SVGでアニメーションする理由

SVGでアニメーションさせようとした理由は主に表現の簡単さから。

SVGはxmlの一種なので、マークアップの形で比較的簡単に文字列を回転させたり指定されたパスの上を通るようなアニメーションを記述することができる。Canvasやスクリプトベースのアニメーションのように1フレームごとにちょっとずつ処理をする、といった下回りを記述する必要もなく、アニメーションの定義だけ書けばあとはブラウザがよろしくやってくれるのはかなり楽。加えてアニメーションの描画に関してもすべてブラウザ側に委託されているので、ブラウザがかしこく描画してくれさえすれば人間が細々チューニングする必要もない。

DartでSVGアニメーション

dartからSVGアニメーションさせようとした場合はいくつか落とし穴があって、そのなかでも一番大きい穴はDartium側のバグだったんだけど、とりあえずうまくいったのでサンプルを示す。

html

まえつくったCSS3のアニメーションとほぼ同等の動きをSVGで再現したつもり。一点違うのがスライダーで速度の調整をできるようにした点。ちなみに、bodyの閉じタグの前に入ってるscriptは現状のDartiumのバグを回避するためのもの。

<!doctype html>
<head>
    <meta charset="utf-8">
    <title>dartlang test</title>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/client.css" />
</head>
<body>
    <script type="application/dart"  src="./script/svgtest.dart"></script>
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <a class="brand" href="#">dartlang test</a>
            </div>
        </div>
    </div>
    
    <div class="container-fluid">
        <div class="row-fluid" >
            <div class="span4">
                <textarea class="input-xxlarge" rows="23" id="remarkText">
　　　　　　　　___|二ニｰ-､、;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:|;::;:;:;:;:;:;:;:;:;:;:;:;:l
　　　　　　　 /rヽ三三三三三─‐-- ､;:;:;:;:;:;:;:|;:;:;:;:;:;:;:;:;:;:;:;:;:;l
　　　　　　　 ',i　,-三三三三三、 　 _,.ニ､ｰ-､!;: -‐二￣彡′
　　　　　　　　',､、ヾ三三'"￣￣　　 `ー‐"　　　 ヾ-'" 　.〉′
　　　　　　　　ヽ ヽヾ三,' 　　 :::..,. -‐- ､　　　　 _,,..-‐､、,'
　　　　　　　　　｀ー',ミﾐ　 　 　::.弋ラ''ｰ､　　 i'"ｨ'之フ　l
　　　　　　　　　／:l lﾐﾐ　　　　 ::::.. 二フ´　　 l　ヽ､.ノ　,' 　　　　
　　　　　　,.-‐フ:::::| |,ミ　　　　　　　　　　　　 l　 　 　 / 　　　 　　
　　　　 ／r‐'":::::::::| |ヾ　　　　　　　 ／__.　 　l　　　 /　　　　　　
　_,. -‐"i .|::::::::::::::::::',.',. ＼　　　　　 　 ⌒ヽ､,ノ　　 /ヽ,＿　　　　　　　　　　　　　
"　　　　l ヽ:::::::::::::::::ヽヽ.　＼　　　＿,＿,.､〃　　／l　|　　　　＿__,. -､
　　　　 ',＼＼:::::::::::::::ヽ＼　 ＼　　､.￣⌒"￣／:::::|　|　　　 （ ヽ-ゝ _i,.＞-t--､
　　　　　＼＼＼;::::::::::::＼＼　 ｀､.__ ￣´￣／::::::::::l　|　　　　｀''''フく　＿,. -ゝ┴-r-､
　　　　　　 ヽ ＼｀ｰ-､::::::ヽ ヽ　　　￣フフ::::::::::::::ﾉ ./　　　,.-''"´ ／￣,.／´　ゝ＿'ヲ
　　　　　　　　　 ｀ー-二'‐┴┴､＿_／‐'‐´二ｰ'".ノ 　　/　_,. く　 ／　ゝ_／￣|
　　　　　　　　　　　　　　￣｀ー─--─‐''"￣　　　　　 /　にﾆ'／,.､-t‐┴―'''''ヽ
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　/　　/　　.（_ヽ-'__,.⊥--t-⊥,,_
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　/　 /　　／　 ￣　　 ）　　ﾉ__'-ﾉ
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　/　　　　　 /　　　 ゝﾆ--‐､‐　　　|
　　　　　　　　　　　　　　　　　　　　　　　　　　　　/ 　　　　　　　　　　/‐＜_　　 ヽ　　|ヽ </textarea>

                <!-- setting panel -->
                <div class="setting">
                    <ul>
                        <li>
                            <label>Display speed</label>
                            <input type="range"  min="0" max="99" value="50" step="1" id="displaySpeed">
                        </li>
                    </ul>
                    <button class="btn-primary" id="postRemark" type="button">Post</button>
                </div>
            </div>

            <div class="span8 offset4">
                <div id="stage">
                </div>
            </div>
        </div>
    </div>
    <!-- workaround for SVG animation bug http://code.google.com/p/dart/issues/detail?id=2856 -->
    <script>navigator.webkitStartDart()</script>
</body>
</html>

svgtest.dart

mainにあたる部分。ここでは別のファイルに定義されているクラスを生成して、あとはボタンのハンドラに表示処理をつなげている。

#import("dart:html");
#import("RemarkDisplayer.dart");
#import("SVGRemarkDisplayer.dart");
#import("Unit.dart");

void main() {
    final int MAX_NUMBER_OF_REMARKS = 10;
    final int MAX_SPEED = 100;

    var displayer = new SVGRemarkDisplayer();
    displayer.initialize("#stage", MAX_NUMBER_OF_REMARKS);

    var postButton = document.query("#postRemark");
    InputElement speed = document.query("#displaySpeed");
    TextAreaElement textNode = document.query("#remarkText");
    postButton.on.click.add((Event e) {
            var num = speed.valueAsNumber;
            var duration = (MAX_SPEED - num.toInt()) * 100;
            var param = new DisplayParameter(textNode.value, duration, Unit.Millisecond);
            displayer.display(param);
    });
}

SVGRemarkDisplayer.dart

SVGでの表示処理を行うクラス。initializeで各文字列の親にあたるg要素を生成しておいて、実際に表示を行うdisplayでは渡された文字列をtspanで複数行に分解して、アニメーションをくっつけて表示している。アニメーション自体は左から右に要素を移動させる単純なもの。スライダーによって指定された秒数でアニメーションの速度を調整することができる。

#library("SVGRemarkDisplayer");
#import("dart:html");
#import("RemarkDisplayer.dart");

/**
 * Class that displays remarks via SVG
 */
class SVGRemarkDisplayer implements RemarkDisplayer {
    SVGRemarkDisplayer() {
        _remarkList = new List<SVGElement>();
        _currentRemark = 0;
        _numberOfRemarks = 0;
    }

    /**
     * Create remark nodes under the tag with the given ID
     */
    void initialize(String stageID, int numberOfRemarks) {
        _numberOfRemarks = numberOfRemarks;
        var stage = document.query(stageID);

        var svg = new SVGSVGElement();
        for (int i=0; i<numberOfRemarks; i++) {
            SVGGElement g = new SVGElement.svg("<g></g>");
            _remarkList.add(g);
            svg.nodes.add(g);
        }

       stage.nodes.add(svg);
       _root = svg;
    }

    /**
     * Display given remark at the current node
     */
    void display(DisplayParameter parameter) {
        var node = _remarkList[_currentRemark];

        // delete any nodes we already have
        node.nodes.clear();

        // convert text to svg
        var lines = parameter.remark.split("\n");
        SVGTextElement text = new SVGElement.svg("<text font-family='IPA モナーPゴシック' y='300'></text>");
        for (int i=0; i<lines.length; i++) {
            var line = lines[i];
            SVGTSpanElement span = new SVGElement.svg("<tspan x='0' dy='15'>${line}</tspan>");
            text.nodes.add(span);
        }
        
        node.nodes.add(text);
        var duration = "${parameter.duration}${parameter.durationUnit.toString()}";
        SVGAnimationElement animation
            = new SVGElement.svg("<animateTransform attributeName='transform' type='translate' from='0' to='1300' dur='${duration}' fill='freeze' begin='indefinite' />");
        node.nodes.add(animation);
        animation.beginElement();

        // proceed to next remark
        _currentRemark++;
        if (_currentRemark >= _numberOfRemarks) {
            _currentRemark = 0;
        }
    }

    int _numberOfRemarks;
    List<SVGElement> _remarkList;
    int _currentRemark;
    SVGSVGElement _root;
}

RemarkDisplayer.dart

文字列の表示をつかさどるクラスのインタフェース定義。CSS3を使ってアニメーションするクラスの方（今回は未使用）もおなじインタフェースを実装している。

#library("RemarkDisplayer");
#import("dart:html");
#import("Unit.dart");

/**
 * Parameter for displaying
 */
class DisplayParameter {
    DisplayParameter(this.remark, this.duration, this.durationUnit);
    String remark;
    int duration;
    Unit durationUnit;
}

/**
 * Class that manages remark display
 */
interface RemarkDisplayer {
    /**
     * Display given remark
     */
    void display(DisplayParameter param);
}

Unit.dart

表示単位を隠蔽するためのクラス。本当はenumを使用したいものの、現状のdartにはenumが無いためconstつきコンストラクタで代用している。

#library("Unit");

/**
  * Unit for animation
  */
class Unit {
    const Unit(int id) : _id = id;

    String toString() {
        switch (_id)
        {
        case PixelID:
            return "px";
        case MillisecID:
            return "ms";
        default:
            return "px";
        }
    }

    final int _id;

    static final int PixelID = 0;
    static final int MillisecID = 100;
    static final Pixel = const Unit(PixelID);
    static final Millisecond = const Unit(MillisecID);
}

結果

PostをクリックするとSVGアニメーションが左から右へ流れる。またスライダーを左に寄せるとゆっくり、右に寄せると速いアニメーションで表示することができる。

投稿者 Masato 時刻: 15:23
ラベル: , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)