レスポンシブおっぱいでまなぶスケーラブルグラフィックス

第1回 HTML5minutes!! ∼triton-js∼

面白法人カヤック HTMLファイ部・人事部中農稔 http://www.kayac.com/team/nakano-minoru エンジニア（JSer、ASer）ウェブアニメーター自己紹介

SNS nenjiru https://twitter.com/nenjiru http://qiita.com/nenjiru http://jsdo.it/nenjiru

ぱんちら.js JavaScriptでテクスチャマッピング http://www.slideshare.net/minorunakanou/pantirajs-html5

本日のテーマ

レスポンシブおっぱいでまなぶスケーラブルグラフィックス

レスポンシブ

応答性のよいデザイン

柔軟性がある

おっぱい

DEMO アダルトあ 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>

Illustrator

表示デモ demo-svg クリックイベントでアニメーションが開始する＊JavaScript未使用！

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.

d属性しんどい

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

Paper.js のオブジェクト構造は非常に理解しやすい Path.segments[0].handleIn.x Path.segments[0].handleIn.y Path.segments[0].handleOut.x Path.segments[0].handleOut.y debug-mode

まとめ・SVGまだまだ可能性ひめてる・SVGはイラレでデータをつくれる・SVGもっと普及してほしい・SVGのライブラリもそれなりにある

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

https://atnd.org/events/53863 来週やります！

レスポンシブおっぱいでまなぶスケーラブルグラフィックス

by Minoru Nakanou, エンジニア at KAYAC Inc.

on Jul 25, 2014

Statistics

Views

Actions

1 Embed 1

Accessibility

Categories

Upload Details

Usage Rights

Report content

レスポンシブおっぱいでまなぶスケーラブルグラフィックス Presentation Transcript