tomo.mobi

Representation design of material


Draw SVG よりみち

よりみちしています。
twitterのアイコンをsvgにてパス描画のアニメーションにしてみました。
いろいろつかえる表現。
Demo

Androidの少し古いブラウザでもある程度、動く。
もっと、パスを減らしてシンプルなアイコンだったら、もっとスムーズかな・・・。

マテリアルデザインのアイコンが全てsvgになったことで、ボタンやアクションのフィードバックにsvgのpathアニメーションを上手く取り入れる事は、コンテンツ作りの武器になると思っている。

今のデザインの主流が変わらないまま、ブラウザのレンダリング速度が今よりも早くなり、新しくなったwebViewの普及が爆発的にひろがればの話だけど・・・(汗

Published by tomoka , on 10月 26th, 2015 at 11:13 pm. Filled under: 未分類No Comments
この記事を読む

調べて、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() };
Published by tomoka , on 10月 25th, 2015 at 12:21 am. Filled under: 未分類No Comments
この記事を読む

mask sample

svgでmask

これは、面白いかも。
動かし方でプリローダーとかも作れる。

スクリーンショット 2015-10-24 15.23.14

 <div xmlns="http://www.w3.org/1999/xhtml">
 <svg height="500" version="1.1" width="500" xmlns="http://www.w3.org/2000/svg">
 <desc>Created with Snap</desc>
 <defs>
 <mask id="maskSample">
 <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="sample_img.png" preserveAspectRatio="none" x="0" y="0" width="500" height="500"/>
 </mask>
 </defs>
 <circle cx="250" cy="250" r="200" fill="#ffa500" stroke="#000000" mask="url('#maskSample')" style="stroke-width: 20px;"/>
 </svg>

</div>
Published by tomoka , on 10月 24th, 2015 at 3:27 pm. Filled under: 未分類No Comments
この記事を読む

snap easing

easing test
優良記事:http://www.h2.dion.ne.jp/~defghi/snapsvg/snapsvg.xhtml#article_105

sample
http://www.tomo.mobi/test/snap/starRing_snap2.html

今日はこんな記事を見つけました。
https://github.com/adobe-webplatform/Snap.svg/issues/230
個人的に少し感動してしまいました。tweening engineは扱えるeasingの数が多い方が良い。

Published by tomoka , on 10月 24th, 2015 at 1:22 am. Filled under: 未分類No Comments
この記事を読む

snapサンプル

モバイルの古いブラウザをフォローしたいのならば、svgのアニメーションにはsnap.svgが良さそう!もちろんGreenSockはとても使いやすいのですばらしく良いです。
場合によって使い分けするのが良さそうです。
Snap.svg
http://snapsvg.io/

snapのサンプルです。
transform=”matrix(1,0,0,1,0,0)”
にて、赤い針の回転を表現。
http://www.tomo.mobi/test/snap/
これだったらAndroidの少し古いブラウザでも大丈夫そう。

今のシェア率からみると傾向としては、まだもうすこし古いブラウザ残りそうだしね。
参考資料:https://developer.android.com/about/dashboards/index.html
なお、Android5~の標準ブラウザはmatrix3D()が描画出来るような感じです。
参考資料:http://caniuse.com/#compare=android+44
参考良質記事:http://uupaa.hatenablog.com/entry/2014/04/15/163346

で、snap.svgのライブラリを使ってサンプルを作ってみました。
スクリーンショット 2015-10-22 23.43.40
青枠の中をタップするとほぼ中央に表示された青い★が円状に広がるサンプルです。
http://www.tomo.mobi/test/snap/starRing_snap.html

Published by tomoka , on 10月 20th, 2015 at 12:01 pm. Filled under: 未分類No Comments
この記事を読む

transform:matrix3d()

ここにきてやっと気がついたけれども、<path/>の移動に、transform:matrix3d()は一部のスマホブラウザでは対応していない。3D対応で使っている記述がありました。ライブラリをもうちょっとよく読んで調べてみる必要があります。

PCに限らせるのだったら、古いバージョンにはSMILで対応するようなので、とても使いやすい優れたライブラリだと思いました(未検証)。ライブラリのカスタマイズも考えてみたいけれども、メンテナンスしにくくなる。でも、アニメーションにはTweenのライブラリは使いたい。

他にもいろいろと見てみよう。
http://snapsvg.io/
https://github.com/julianshapiro/velocity
(http://julian.com/research/velocity/#transforms)
http://d3js.org/
そもそも、スマホで実装するのはまだ早いのかどうか。
多少の重さは感じるけど、とりあえず、何か作ってみる。

以下ももうちょっと見てみよう。
https://w3c.github.io/web-animations/
https://drafts.fxtf.org/motion-1/

で、以下サンプルは前回transform:matrix3d()を使ってDOMの追加とstyleの設定を検証したデータでライブラリは使っていないです。アニメーションを実装する前準備で調べた事を使ったサンプルです。
http://tomo.mobi/test/greensock/star_position2D.html
とりあえず、transform:matrix3d()をtransform:translate()に置き換えた。
webkitのベンダープレフィックスも付けた。
scale()とrotate()の設定もいれて、やっと、matrix3d()と同じ表現になったけどstyleの設定が長くなってしまった。使うCSSを選別すればとりあえず実装には問題は無い。

Published by tomoka , on 10月 18th, 2015 at 6:29 am. Filled under: 未分類No Comments
この記事を読む

SVGアニメーションgreenSockのcallBack

アニメーションを使うのだったら、callBackの確認は必要。
いまのところ分かっているのはTweenMaxのcallBackの設定。

TweenMaxのto()に”onComplete”でfunction関数の指定をします。
ちなみに、TweenLiteの場合も同じ。

var tween = TweenMax.to($box,1,{
     x: '-=50',
     y: '+=50',
     onComplete: callBackFunc,
     ease:Back.easeOut
     });
to.add(tween,2); //2はtimelineを2秒で進める指定

function callBackFunc(){
     alret('Complete!!');
     }

まだ、使い込んでいないのでTweenMaxとTweenLiteのAPIの違いがよくわかっていない。
ActionScriptの方が先に開発されていたことをこないだ知った。
Tweenerしか使った事が無かった。余裕無いなぁ。

Published by tomoka , on 10月 17th, 2015 at 11:57 pm. Filled under: 未分類No Comments
この記事を読む

SVG内の<path/>の位置設定

<path/>の位置を設定するときstyleのtransform:matrix3d()を使うと良いのですが、なんだかtransform:matrix3d()の仕様が複雑なのでメモ書きを残します。
参考文献:http://www.htmq.com/css3/transform_matrix3d.shtml

平行移動のみで、回転・拡大縮小をしない場合

var _x = Math.random()*400;
var _y = Math.random()*400;
var _z = 1;
path.setAttribute('style', 'transform:matrix3d(1, 0, 0, 0,0, 1, 0, 0,0, 0, 1, 0,'+ _x + ',' +  _y + ',' +  _z + ', 1)');

これも足して・・・。

Z軸回転のみで、拡大縮小・平行移動をしない場合
matrix3d(
Math.cos(角度値), Math.sin(-角度値), 0, 0, 
Math.sin(角度値), Math.cos(角度値), 0, 0, 
0, 0, 1, 0, 
0, 0, 0, 1 
)

拡大縮小も足した。
黒枠の中をクリックした時に雪の結晶がスタンプされるのですが、調節不十分なため座標がたまにviewBoxから外れる時があります。
http://tomo.mobi/test/greensock/star_position.html

やっぱり、何か作る材料をそろえるのが一番時間かかる。
もっと、まともな物を作れるようになりたいな・・・

Published by tomoka , on 10月 17th, 2015 at 10:51 pm. Filled under: 未分類No Comments
この記事を読む

SVGのViewBox

なんか一番大切な部分を忘れている。
SVGの描画領域のこと。

<svg width="400" height="400" viewBox="0 0 400 400" style="border:solid 1px #000"  onClick="creatObj();" />

大きさ以外に”viewBox”なる指定があります。
これは文字通り表示領域の指定です。

viewBox(min-x,min-y,width,height)

Published by tomoka , on 10月 17th, 2015 at 3:43 am. Filled under: 未分類No Comments
この記事を読む

SVGのDOM追加について

SVGはHTMLではなくXMLなので、DOMの追加には一癖あります。
setAttributeNSでxlinkを追加してあげる必要があります。
createElementNSで新規のDOMの追加をします。

var xlinkns = "http://www.w3.org/1999/xlink";
var svgns = "http://www.w3.org/2000/svg";
var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
・
・
・
細かいパラメータの追加
・
・
・
circle.setAttributeNS(xlinkns, "href", "#circle");
・
・
・

上記のような感じです。
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/types.html#InterfaceSVGURIReference
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/svgdom.html#RelationshipWithDOM2Events
とりあえず、次のSVGの記事ではもう少しまともな何かを作ってみます。

Published by tomoka , on 10月 15th, 2015 at 9:37 pm. Filled under: 未分類1 Comment
この記事を読む