カテゴリー
js

[2017.2.23]今週のJS関連

忘れてたものから調べたものまで

inputへの入力値の監視

jQueryでテキストボックスの変更を監視/検知する – Qiita
http://qiita.com/maruyam-a/items/cf0168f91d934b449a07

javascriptで数値の入力を自動的にカンマ区切りにする方法 – URAGAMI
http://blog.higty.xyz/archives/547/

まだインラインハック必要だよね

【音声対応】 iPhone Safariで動画をインライン再生する方法続き – Qiita
http://qiita.com/hadakadenkyu/items/b8accc395ccfa8348faf

video要素のループを滑らかにする – Qiita
http://qiita.com/shinnn/items/83c2493ab3bbf49b1949

Canvasの画像をリサイズする簡単な方法【HTML5・javascript】

Canvasの画像をリサイズする簡単な方法【HTML5・javascript】

iPhoneでvolumeいじっても値上書きできなかったmutedいじるのならきいたからとりあえずはそれで。私の記法のせいかも。
音量とミュート-JavaScript入門(HTML5編)
http://www.pori2.net/html5/Video/040.html

Promiseってなに、ってとこから///

IE爆発して?
今更だけどPromise入門 – Qiita
http://qiita.com/koki_cheese/items/c559da338a3d307c9d88

爆速でわかるjQuery.Deferred超入門 – Yahoo! JAPAN Tech Blog
https://techblog.yahoo.co.jp/programming/jquery-deferred/

Deferredな $.ajax をラップしてコールバック関数(done/fail)に共通処理を追加する – Qiita
http://qiita.com/kawanamiyuu/items/9312e5d99b2b26bd6074#-%E3%83%A9%E3%83%83%E3%83%91%E3%83%BC%E3%81%8Creturn%E3%81%99%E3%82%8Bdeferredpromise%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AEmerge%E9%A0%86%E3%81%8C%E9%80%86

背景の矩形や画像を動かすにはsvg?canvas?

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

SVGのグラデ

グラデーションとパターン – SVG 1.1 (第2版)
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>