単純矩形（グラデ・フェードあり）と画像を使った背景をアニメーションまわすサイトを作る際に
画像あった場合SVGとCanvasどっちにしようとおもって検索したやーつ
SVGのグラデ
グラデーションとパターン – SVG 1.1 （第２版）
https://triple-underscore.github.io/SVG11/pservers.html
SVGとCanvas
HTML5での描画を実現するSVGとCanvasを改めて比較する ｜ SiTest (サイテスト) ブログ
まえから言われてるみたいに単純矩形はsvg、グラデとか複雑になってきたりパーティクル飛ばしたければCanvasなのかしらね
Canvas
HTML canvasを画面いっぱいに表示したい – Qiita
http://qiita.com/gonshi_com/items/e26d57b255319e728a1a
ふむ。。。cssで全画面配置しちゃったけどJSでやっといたほうがええかな。。。。
[css]
/#demoCanvas/
canvas {
position: absolute;
top: 0;
left: 50%;
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%);
transform: translate(-50%);
}
[/css]
上下左右中心配置で全画面。
まえに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
[html]
var windowWidth = $(window).width();
var windowHeight = $(window).height();
// レンダラ
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();
}
});
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);
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);
});
[/html]