HTML5NAGOYA #16

"HTML5NAGOYA" は、HTML / CSS / JavaScript を始めとした Web のフロントエンドの技術全般を学び合う勉強会です。 毎回講師を呼んで座学を行うスタイルではなく、お互いがアウトプットすることで共にスキルアップしていくことを目指しています。 皆さんのアウトプットで成り立っている会です。お誘い合わせのうえご参加ください!
1
Nagoya Frontend User Group @nagoya_frontend

次はKasumiMoritaさんで『CSSで実装できる SVGアニメーション(仮)』です! #html5nagoya

2015-08-21 19:56:01
XYZ+ @xyzplus_net

アニメーションの方法 ・CSSアニメーション ・SMILアニメーション ・JSアニメーション #html5nagoya

2015-08-21 19:56:10
Nagoya Frontend User Group @nagoya_frontend

さっそく SVG のアニメーションに関するデモ #html5nagoya

2015-08-21 19:56:23
XYZ+ @xyzplus_net

どのブラウザでもアニメーションさせるならJSアニメーションを使うが吉 #html5nagoya

2015-08-21 19:58:52
Nagoya Frontend User Group @nagoya_frontend

CSSアニメーションでは、モーフィングアニメーションはできない、IE, Edge では対応していない #html5nagoya

2015-08-21 20:00:12
XYZ+ @xyzplus_net

SVGに指定できるCSSは限られている。詳しくはW3C参照 #html5nagoya

2015-08-21 20:02:00
Nagoya Frontend User Group @nagoya_frontend

SVG でドローイングアニメーション、点線(stroke-dasharray, stroke-dashoffset)を変えることでアニメーションさせる #html5nagoya

2015-08-21 20:07:46
XYZ+ @xyzplus_net

stroke-dasharrayとstroke-dashoffsetの組み合わせでアニメーションを実現 #html5nagoya

2015-08-21 20:07:47
井畑テツヤ👏Clap @tihata

SVGのドローイングの仕組みが分かって目から鱗 #html5nagoya

2015-08-21 20:14:46
XYZ+ @xyzplus_net

SVG2.0ではCSSから装飾できるプロパティが増える #html5nagoya

2015-08-21 20:15:32
杉にゃん @taroe_suginyan

あそこに点線を使う発想はなかった #html5nagoya

2015-08-21 20:16:44
Nagoya Frontend User Group @nagoya_frontend

次は1shiharaTさんで『SVG と JavaScript』です! #html5nagoya

2015-08-21 20:21:23
XYZ+ @xyzplus_net

よくみたら、このスライドSVGでできている...! #html5nagoya

2015-08-21 20:22:13
一打一打丁寧に打つ、少し疲れてる時や体調が悪めの時に絶対に打たない @levena_evenas

#html5nagoya ちなみにSVGDOMはsvg2からは一般的なHTMLインターフェースを継承した普通のDOMになります

2015-08-21 20:24:15
XYZ+ @xyzplus_net

SVGはベクター、Canvasはビットメップベース #html5nagoya

2015-08-21 20:25:39
Nagoya Frontend User Group @nagoya_frontend

SVG と Canvas の比較について、SVG は複雑な構造が苦手、パフォーマンスが著しく落ちる #html5nagoya

2015-08-21 20:27:22
XYZ+ @xyzplus_net

動的にオブジェクトを増やしていくような作業はCanvasの方が向いている #html5nagoya

2015-08-21 20:29:32
一打一打丁寧に打つ、少し疲れてる時や体調が悪めの時に絶対に打たない @levena_evenas

SVGは学習コスト高いよな、うん 俺もぜんぜんだし 割とpngとかに比べたらメリットは多いけど #html5nagoya

2015-08-21 20:29:48