Submit Search
レスポンシブおっぱいでまなぶスケーラブルグラフィックス
•
8 likes
•
9,460 views
minoru nakanou
Follow
第1回 HTML5minutes!! https://atnd.org/events/52545 登壇資料
Read less
Read more
1 of 22
Download now
Download to read offline
More Related Content
レスポンシブおっぱいでまなぶスケーラブルグラフィックス
1.
第1回 HTML5minutes!! ∼triton-js∼
2.
面白法人カヤック HTMLファイ部・人事部 中農稔 http://www.kayac.com/team/nakano-minoru エンジニア(JSer、ASer) ウェブアニメーター 自己紹介
3.
SNS nenjiru https://twitter.com/nenjiru http://qiita.com/nenjiru http://jsdo.it/nenjiru
4.
ぱんちら.js JavaScriptでテクスチャマッピング http://www.slideshare.net/minorunakanou/pantirajs-html5
5.
本日のテーマ
6.
レスポンシブおっぱいでまなぶ スケーラブルグラフィックス
7.
レスポンシブ
8.
応答性のよいデザイン
9.
柔軟性
10.
おっぱい
11.
ウィンドウリサイズに応じて ゆれるおっぱいつくってみた アダルトあ http://adult-ah.com/oppai/
12.
SVG スケーラブルベクターグラフィックス 拡大縮小してもイメージが劣化しない Adobe Illustrator でデータをつくれる DOMのように扱えるグラフィック
13.
書式 <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 二次ベジェ
14.
Illustrator SVG形式で出力
15.
表示デモ demo-svg クリックイベントでアニメーションが開始する *JavaScript未使用!
16.
oh. . . <path
id="bikiniLeft" stroke="#000000" stroke-width="1.3197" stroke-miterlimit="10" d="M3 c-40.545,88.065-76.878,196.041-76.878,196.041S163.219,503.9,163.393,692.887c0,97. c62.188,23.381,146.33,29.262,209.33,6.51c159.213-49.248,157.615-215.391,157.615-2 c-71.497-80.744-96.098-160.163-96.098-160.163s26.907-97.38,66.628-183.228c39.72-85.8 c-9.236,7.918-35.049,22.476-35.049,22.476C426.858,92.042,425.139,86.715,386.276,1 <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. c62.188,23.381,146.33,29.262,209.33,6.51c159.213-49.248,157.615-215.391,157.615-2 c-71.497-80.744-96.098-160.163-96.098-160.163s26.907-97.38,66.628-183.228c39.72-8 c-9.236,7.918-35.049,22.476-35.049,22.476C426.858,92.042,425.139,86.715,386.276,1 ; 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. c62.188,23.381,146.33,29.262,209.33,6.51c159.213-49.248,157.615-215.391,157.615-2 c-71.497-80.744-96.098-160.163-96.098-160.163s26.907-97.38,66.628-183.228c39.72-8 c-9.236,7.918-35.049,22.476-35.049,22.476C426.858,92.042,425.139,86.715,386.276,1 ; 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.
17.
d属性しんどい とても高機能なSVGですが d属性をダイレクトにJSで操作して アニメーションさせるのはつらいです
18.
ライブラリ •Raphaël •Snap.svg •D3.js •Paper.js ←オススメ
19.
Paper.js のオブジェクト構造は Illustratorライクで非常に理解しやすい Path.segments[0].handleIn.x Path.segments[0].handleIn.y Path.segments[0].handleOut.x Path.segments[0].handleOut.y debug-mode
20.
まとめ ・SVGまだまだ可能性ひめてる ・SVGはイラレでデータをつくれる ・SVGもっと普及してほしい ・SVGのライブラリもそれなりにある
21.
https://atnd.org/events/53863 来週やります!
22.
ご静聴ありがとうございました
Download