タグ: canvas

単純矩形（グラデ・フェードあり）と画像を使った背景をアニメーションまわすサイトを作る際に
画像あった場合SVGとCanvasどっちにしようとおもって検索したやーつ

SVGのグラデ

グラデーションとパターン – SVG 1.1 （第２版）
https://triple-underscore.github.io/SVG11/pservers.html

SVGとCanvas

HTML5での描画を実現するSVGとCanvasを改めて比較する ｜ SiTest (サイテスト) ブログ

HTML5での描画を実現するSVGとCanvasを改めて比較する

まえから言われてるみたいに単純矩形はsvg、グラデとか複雑になってきたりパーティクル飛ばしたければCanvasなのかしらね

Canvas

HTML canvasを画面いっぱいに表示したい – Qiita
http://qiita.com/gonshi_com/items/e26d57b255319e728a1a

ふむ。。。cssで全画面配置しちゃったけどJSでやっといたほうがええかな。。。。

/<em>#demoCanvas</em>/
canvas {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
}

上下左右中心配置で全画面。
まえにvideo埋め込みの時も使ったのでIE11とかでも動作するはず（はず）
不要なのかしら。まぁあとで消したら書き直そう。

Canvasライブラリとアニメーション

なんでライブラリいんのさ→菩薩曰くリサイズ拡縮めんくさいからとのこと。
単純な配置だけならイラネとのこと

ライブラリ

create.jsしか使ったこと無い（そしてsvgに逃げていたので大分前）なので改めて調べた。

HTML5 CanvasとWebGLの使い分け – ICS MEDIA
https://ics.media/entry/5140

create.js

・おなじみ
・オールマイティー
・グラデや二点間を繋ぐ曲線描画など複雑なのにも強い

pixi.js

・WebGL使えるときはWebGLで描画してくれる
・基本canvasなのでステージ呼ぶときの関数名とかくらいが差
・WebGL非対応環境のフォールバック有り
・SVGでやるような単純矩形と画像の描画＋アニメーションなどにつよい
・アニメーションはTweenMaxとも連携できるみたい

おー。曲線線画の描画とか無ければpixiのほうが早いのか。。。
じゃーそっちで。

pixi.jsチュート

Tutorials – PixiJS v4
http://www.pixijs.com/tutorials

kittykatattack/learningPixi: A step-by-step introduction to making games and interactive media with the Pixi.js rendering engine.
https://github.com/kittykatattack/learningPixi#renderer

pixi+TweenMaxのサンプル

下記1）と2）を見比べて最小限のひな形を構築した。
1)は若干記述が古いみたいなので参考まで。2）は動いた。

1）
PIXI と GSAP で 2D フル WebGL – FrontCore
http://front-core.github.io/ja/blog/2015/03/20/pixi-with-gsap/

sampleのソース
pixi-with-gsap/main.js at master · front-core/pixi-with-gsap
https://github.com/front-core/pixi-with-gsap/blob/master/scripts/main.js

2）
傷物語ティザーサイトのアニメーションをPixi.jsで再現 – /
http://memo.brdr.jp/post/131144378491/%E5%82%B7%E7%89%A9%E8%AA%9E%E3%83%86%E3%82%A3%E3%82%B6%E3%83%BC%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92pixijs%E3%81%A7%E5%86%8D%E7%8F%BE

Kizumonogatari Teaser Animation by Pixi.js

var windowWidth = $(window).width();
    var windowHeight = $(window).height();

<pre><code>// レンダラ
var renderer = PIXI.autoDetectRenderer(windowWidth, windowHeight)
// var renderer = PIXI.autoDetectRenderer(windowWidth, windowHeight, {
//   resolution: window.devicePixelRatio,
//   backgroundColor: 0xffffff,
//   antialias: true
// });
document.getElementById('demoCanvasWrapper').appendChild(renderer.view);
// console.log('devicePixelRatio:'+window.devicePixelRatio);


// ステージ
var stage = new PIXI.Stage();

// フレームごとにレンダリング
var renderPerFrame = function(){
  renderer.render(stage);
  window.requestAnimationFrame(renderPerFrame);
};
renderPerFrame();

// 繰り返しアニメーション
var animation = function(){
  // タイムライン定義
  var timeline = new TimelineMax({
    paused: true,
    onComplete: function(){
        //アニメーションを繰り返したければ全てリセットしていちからやり直す
        stage.removeChildren();
        // 無限ループになる
        animation();
    }
  });
</code></pre>

var cast1_img1 = PIXI.Texture.fromImage('cast1_img1.png');
var texture = PIXI.Texture.fromImage('message1.png');

var logoimg = new PIXI.Sprite(texture);

logoimg.position.x = windowWidth / 2;
logoimg.position.y = windowHeight / 2;
logoimg.anchor.x = 0.5;
logoimg.anchor.y = 0.5;
logoimg.alpha = 0;
// logoimg.rotation = .1;
stage.addChild(logoimg);

var scene1Cast = new PIXI.Sprite(cast1_img1);

scene1Cast.position.x = windowWidth / 2 - 320;
scene1Cast.position.y = 200;
// scene1Cast.anchor.x = 0.5;
// scene1Cast.anchor.y = 0.5;
scene1Cast.alpha = 0;
// scene1Cast.rotation = .1;
stage.addChild(scene1Cast);

<pre><code>  timeline.add("end");
  timeline.to(logoimg, 2, {
      alpha: 1,
      rotation: .2,
      ease: Expo.easeInOut
    },"end");
  timeline.to(scene1Cast, 3, {
    delay:0.1,
      alpha: 1,
      x: '-=130',
      ease: Expo.easeInOut
    },"end");
  timeline.add(
    TweenMax.to(logoimg, 2, {
      alpha: 0,
      ease: Expo.easeInOut
    })
  );

  // circleのアニメーション
  var circle = new PIXI.Graphics();
  circle.beginFill(0xffffff);
  circle.drawCircle(0 ,0 ,100);
  circle.x = windowWidth/2;
  circle.y = windowHeight/2;
  circle.width = 0;
  circle.height = 0;
  stage.addChild(circle);

  timeline.add(
    TweenMax.to(circle, 2, {
      width: windowWidth*2,
      height: windowWidth*2,
      ease: Expo.easeInOut
    })
  );

  // タイムライン開始
  timeline.play();
};
animation();

// リサイズ
$(window).on('load resize', function(){
  windowWidth = $(window).width();
  windowHeight = $(window).height();

  // renderer.resize(windowWidth, windowHeight);
});
</code></pre>