POPSブログ

ブログ記事一覧: canvas

CreateJS 3D Carousel もどき、Matrix2Dで円周上に配置したインスタンスを回転させる

円周上に配置したインスタンスを回転させる 3D Carousel もどきですが「2D」で作成しています。Matrix2Dクラスを使用していますので、問題となる重なり順をsort()を使用して修正しています。
中に画像を配置していない、簡略化した原型です。
easeljs-0.7 でのテストです。

≫ 続きを読む

javascript 2014/01/14 pops

CreateJS Matrixで円周上に配置した図形Shapeなどを回転

円周上に配置した図形ShapeなどをMatrixクラスを使用して回転させます。画像などをも配置出来ますので色々な応用が可能です。Matrixですのでマウス位置に対応して、回転方向速度変化など操作出来ます。簡単な「デモ」と共に掲載します。
easeljs-0.7 でのテストです。

≫ 続きを読む

javascript 2014/01/10 pops

CreateJS Loading 円周上にgraphicsラインを描画し、Shapeを回転させる簡易形です

画像読み込み時に表示するLoading、コンテナの円周上にgraphicsラインを描画(配置)し、イベント毎に回転する形式で最も単純なものですが、回転が判り易いように段階的に透明度を付けました。単純ですが、簡単に設置できるのが強みです。
easeljs-0.7 でのテストです。

≫ 続きを読む

javascript 2014/01/03 pops

CreateJS Loading 円周上にShapeを配置し、コンテナを回転させる簡易形です

画像読み込み時に表示するLoading、コンテナの円周上に図形Shapeを配置し、イベント毎に回転する形式ですが親であるコンテナを回転させて、グラフイックの書き換えを行っていない簡単なものです。
円周配置の図形Shapeの角度を変更出来ますので多用な形に作れます。
easeljs-0.7 でのテストです。

≫ 続きを読む

javascript 2014/01/01 pops

CreateJS Loading Shape (弧状) 回転テスト3

画像読み込み時に表示するLoading、扇形をarc()で弧状に円周に配置し、イベント毎に単純にShapeをrotationで回転させています。グラフイックを書き換えて回転する形式では有りません。(グラフイック書き換え方式も掲載)
easeljs-0.7 でのテストです。

≫ 続きを読む

javascript 2013/12/22 pops

CreateJS Loading Shape 回転テスト2

画像読み込み時に表示するLoading、Circle図形を円周上に配置し、イベント毎にグラフイックを書き換えて回転する形式で作りました。matrix変換、transformPoint()を利用すると簡単に仕上がります。但し、Circle以外は描画できない問題が発生しました。
easeljs-0.7 でのテストです。

≫ 続きを読む

javascript 2013/12/17 pops

CreateJS Loading Shape 回転テスト1

画像読み込み時に欠かせないのがLoadingです。画像読み込み中回転を続けるShape、イベント毎にグラフイックを書き換えて回転する形式で作りました。matrix変換、transformPoint()を利用すると簡単に仕上がります。
easeljs-0.7 でのテストです。

≫ 続きを読む

javascript 2013/12/12 pops

CreateJS 画像分割とTransitionMask等を組み合わせてアニメ表示する2、番外編

複数の形状の違う画像分割とTransitionMask等多数を組み合わせた 番外編です。1枚画像スライド、ダブルスライド、レーダーエフェクトなどを加えました。かなり「重体お病気系エフェクト」ですが、CreateJSが進化すればモット「エフェクト」が増えるでしょうから危篤状態も間近です。ボタンで任意に画像を読み込み表示する形式で作りました。
easeljs-0.7 でのテストです。

≫ 続きを読む

javascript 2013/12/09 pops

CreateJS 画像分割とTransitionMaskを組み合わせてアニメ表示する、番外編

複数の形状の違う「画像分割」と「マスク要素」を組み合わせて画像エフェクトする TransitionMask 番外編です。かなり複雑で「重症お病気系エフェクト」ですが、目の錯覚で区別の付かないものも有ります。
easeljs-0.7 でのテストです。

≫ 続きを読む

javascript 2013/11/30 pops

CreateJS Transition Mask マスク要素を組み合わせてアニメ表示する、番外編

複数の形状の違うマスク要素を組み合わせてマスクで画像エフェクトする Transition Mask 番外編です。マスク要素をシェイプトゥイーンもどきでグラフイックをカキカエ、マスクを着色して変化させる「お病気系エフェクト」です。
easeljs-0.7 でのテストです。

≫ 続きを読む

javascript 2013/11/25 pops

ブログ記事一覧

年別アーカイブ一覧



[1]