SVG の path 要素を Canvas や DOM のアニメーションなどに利用する - WebDelog
SVG の path 要素からは、 getTotalLength でパスの全長、 getPointAtLength(n) でパス上の n 地点における位置情報を取得できる。 これができると、複雑な図形の形に沿って Div を配置したり、文字のアウトラインのパスに沿ってペンを動かしたりといったアニメーションを作る際に細かい座標の計算や調整の手間が省ける。 DEMO Sketch.app で作成した SVG のパスにあわせて Div を這わせてみました See the Pen lGvin by turusuke (@turusuke) on CodePen. 参考：Advanced animation path 上記のサイトでは応用デモ、解説が掲載されているので大変参考になりました。 応用例 クリックするとハートのパス上に星を配置したものが現れて、星がバラけるようなデモを作ってみました。 Se
CreateJSで遊んでみる 1日目 EaselJS - WebDelog
2015.06.16 記事の内容を全面的に書き直しました。 目次 CreateJS とは何者なのか? EaselJS をはじめるための準備 EaselJS を使うメリット Canvas にはオブジェクトを管理する機能はない Canvas はウォールペイントのようなもの？ ベクター図形の描画がよりわかりやすく便利に 豊富なフィルター機能 実際に触ってみる CreateJS を使うための準備 Stage を配置する EaselJS DisplayObjects Shepeクラスと Graphicsクラスでベクターシェイプを描く Bitmapクラス で画像を読み込む Tickerクラスを使ってアニメーションを実装する MouseEvent でクリックでアクションを起こす 終わりに CreateJS とは何者なのか? CreateJSはHTML5の技術を利用した インタラクティブなコンテンツを作成
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
