第1回 HTML5minutes!! ～triton-js～

面白法人カヤック HTMLファイ部・人事部

中農稔http://www.kayac.com/team/nakano-minoru

エンジニア（JSer、ASer） ウェブアニメーター

自己紹介

SNS

nenjiruhttps://twitter.com/nenjiru

http://qiita.com/nenjiru

http://jsdo.it/nenjiru

ぱんちら.js JavaScriptでテクスチャマッピング

http://www.slideshare.net/minorunakanou/pantirajs-html5

本日のテーマ

レスポンシブおっぱいでまなぶ

スケーラブルグラフィックス

レスポンシブ

応答性のよいデザイン

柔軟性

おっぱい

ウィンドウリサイズに応じて ゆれるおっぱいつくってみた

アダルトあ

http://adult-ah.com/oppai/

SVGスケーラブルベクターグラフィックス

拡大縮小してもイメージが劣化しない

Adobe Illustrator でデータをつくれる

DOMのように扱えるグラフィック

書式<svg> <circle cx="0" cy="0" r="30" /> <path d="M 0 0 q 150 -100 300 0" /></svg>

d属性のパスデータ構文 ・M modeTo 座標移動 ・L lineTo 直線をひく ・C curveTo 三次ベジェ ・Q Quadratic 二次ベジェ

Illustrator

SVG形式で出力

表示デモ

demo-svg

クリックイベントでアニメーションが開始する ＊JavaScript未使用！

oh. . .<path id="bikiniLeft" stroke="#000000" stroke-width="1.3197" stroke-miterlimit="10" d="M386.276,171.125 c-40.545,88.065-76.878,196.041-76.878,196.041S163.219,503.9,163.393,692.887c0,97.381,77.704,206.111,169.894,240.775 c62.188,23.381,146.33,29.262,209.33,6.51c159.213-49.248,157.615-215.391,157.615-215.391s-141.136-57.105-266.546-198.732 c-71.497-80.744-96.098-160.163-96.098-160.163s26.907-97.38,66.628-183.228c39.72-85.849,70.855-149.562,70.855-149.562 c-9.236,7.918-35.049,22.476-35.049,22.476C426.858,92.042,425.139,86.715,386.276,171.125z"> <animate attributeType="XML" attributeName="d" repeatCount="" dur="300ms" calcMode = "spline" keySplines = "0 0.5 0.5 1;0.5 0 1 0.5" keyTimes = "0;0.5;1" values=" M386.276,171.125 c-40.545,88.065-76.878,196.041-76.878,196.041S163.219,503.9,163.393,692.887c0,97.381,77.704,206.111,169.894,240.775 c62.188,23.381,146.33,29.262,209.33,6.51c159.213-49.248,157.615-215.391,157.615-215.391s-141.136-57.105-266.546-198.732 c-71.497-80.744-96.098-160.163-96.098-160.163s26.907-97.38,66.628-183.228c39.72-85.849,70.855-149.562,70.855-149.562 c-9.236,7.918-35.049,22.476-35.049,22.476C426.858,92.042,425.139,86.715,386.276,171.125 ; M386.276,171.125 c-40.545,88.065-76.878,196.041-76.878,196.041S163.219,503.9,163.393,692.887c0,97.381,77.704,206.111,169.894,240.775 c62.188,23.381,146.33,29.262,209.33,6.51c159.213-49.248,157.615-215.391,157.615-215.391s-141.136-57.105-266.546-198.732 c-71.497-80.744-96.098-160.163-96.098-160.163s26.907-97.38,66.628-183.228c39.72-85.849,70.855-149.562,70.855-149.562 c-9.236,7.918-35.049,22.476-35.049,22.476C426.858,92.042,425.139,86.715,386.276,171.125 ; M386.276,171.125 c-40.545,88.065-76.878,196.041-76.878,196.041S163.219,503.9,163.393,692.887c0,97.381,77.704,206.111,169.894,240.775 c62.188,23.381,146.33,29.262,209.33,6.51c159.213-49.248,157.615-215.391,157.615-215.391s-141.136-57.105-266.546-198.732

d属性しんどい

とても高機能なSVGですが d属性をダイレクトにJSで操作して アニメーションさせるのはつらいです

ライブラリ•Raphaël •Snap.svg •D3.js •Paper.js ←オススメ

Paper.js のオブジェクト構造は Illustratorライクで非常に理解しやすい

Path.segments[0].handleIn.xPath.segments[0].handleIn.yPath.segments[0].handleOut.xPath.segments[0].handleOut.y

debug-mode

まとめ

・SVGまだまだ可能性ひめてる

・SVGはイラレでデータをつくれる

・SVGもっと普及してほしい

・SVGのライブラリもそれなりにある

https://atnd.org/events/53863

来週やります！

ご静聴ありがとうございました