第８回 インタラ会 資料

テーマは「ランダム」

サンプルファイルはこちら↓↓ github.com

ランダム関数を使った動き

・みんな大好き
・実案件だとノイズ表現とかで使用する
・やりすぎると目が痛い
・作品作りの肝は何をランダムにするか
・目が痛くないギリギリを目指す
・もしくは振り切る

ランダムな動きを実装するのに便利な関数

// ----------------------------------------
// minからmaxまでランダム
// ----------------------------------------
function random(min, max) {
  return Math.random() * (max - min) + min;
}

// ----------------------------------------
// minからmaxまでランダム int
// ----------------------------------------
function randomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

// ----------------------------------------
// -valからvalまでランダム
// ----------------------------------------
function range(val) {
  return random(-val, val);
}

// ----------------------------------------
// 配列の中ランダム
// ----------------------------------------
function randomArr(arr) {
  return arr[randomInt(0, arr.length - 1)]
}

// 1 / rangeの確率でtrueを取得
// -----------------------------------
// @range : 2以上の分母(int)
// return : true or false(boolean)
// -----------------------------------
function hit(range) {
  return (randomInt(0, range - 1) == 0)
}

// ----------------------------------------
// minからmaxまでランダム 半分の確率で-をつける
// ----------------------------------------
function random2(min, max) {
  var val = Math.random() * (max - min) + min;
  if(Math.random() > 0.5) {
    val *= -1;
  }
  return val;
}

スケール、角度をランダムに

See the Pen intr8 sample1 by ikeryou (@ikeryou) on CodePen.

ソースはこちら

色をランダムに

See the Pen intr8 sample2 by ikeryou (@ikeryou) on CodePen.

ソースはこちら

テキストをランダムに

See the Pen intr8 sample3 by ikeryou (@ikeryou) on CodePen.

ソースはこちら

SVGをランダムに

See the Pen intr8 sample4 by ikeryou (@ikeryou) on CodePen.

ソースはこちら

インタラ会とは？

ikeryou.hatenablog.com

第７回 インタラ会 資料

テーマは「ひっぱる」

サンプルファイルはこちら↓↓ github.com

1 まずドラッグで普通に追従させる

See the Pen intr7 sample1 by ikeryou (@ikeryou) on CodePen.

ソースはこちら

・こういうものとしてはアリだが、動きが非現実的っぽすぎて直感的ではない

2 摩擦係数を追加して、ひっぱる感じをだす

(ついでに色々隠し味的なのも追加)

See the Pen intr7 sample2 by ikeryou (@ikeryou) on CodePen.

ソースはこちら

ソース抜粋

var friction = 0.3; // 摩擦係数 小さいとより引っ張られる感じに
mouse.dist.x *= friction;
mouse.dist.y *= friction;

・摩擦係数を追加するだけで、なんとなく引っ張ってる感がでる
・よりリアルで直感的なインタラクションになる

3 テキストのletterSpacingをいじってみる

See the Pen intr7 sample3 by ikeryou (@ikeryou) on CodePen.

ソースはこちら

・若干の煩わしさが何度も引っ張ってみたくなるモチベーションになる。気がする。

4 複数のオブジェクトを動かしてみる

See the Pen intr7 sample4 by ikeryou (@ikeryou) on CodePen.

ソースはこちら

・摩擦係数をランダムにすることで、それぞれ個別の生命体のように。感じるかもしれない。

5 飛び道具的なネタ

(codepenで再現できないので動画と外部リンクで)
https://ikeryou.github.io/intr7/5/ ⁢
ソースはこちら

インタラ会とは？

ikeryou.hatenablog.com

【仕事】Sunny.

sunnny.jp

株式会社Sunny.のWebサイトが公開されました。
僕はフロント実装を担当しております。

シンプルながらも、細かい演出の効いたWebサイトになっております。
ぜひPC、スマートフォンの両端末でご覧ください。

⁢

【仕事】ポカリガチダンスFES

pocari-gachidancefes.com

ポカリガチダンスFES特設サイトが公開されました。
僕はTOPページのフロント実装を担当しております。

デザインやイラストから連想される、ポップさ、元気、ガチっぽさ。
このあたりの雰囲気がユーザーに伝わるようにサイトのモーションを実装しました。

また、スマートフォン版では操作性の最適化をしつつ、同様のモーションを実装しております。
ぜひPC、スマートフォンの両端末でご覧ください。

⁢

第６回 インタラ会 資料

第６回のテーマ「ロールオーバー ※PC限定」

サンプルファイルはこちら↓↓
github.com

・PC限定とはいえロールオーバーのアニメーションは、気持ちいい悪いがとても目立つ部分
・この目立つ部分がかっこいいかどうかはサイト全体の印象を大きく決める
・逆にここがイケてないとサイト全体のデザインがかっこよくても一気にかっこ悪くなってしまうことも、、
・今回は主に、複数のボタン要素が隣接してるときの気持ちのいいアニメーションについて

sample1 気持ちのいいロールオーバーアニメーション

See the Pen intr6 sample1 by ikeryou (@ikeryou) on CodePen.

sample2 気持ち悪いロールオーバーアニメーション

See the Pen intr6 sample2 by ikeryou (@ikeryou) on CodePen.

・sample1と2の最大の違いはロールアウトした時の強制ロールアウトアニメーションをやめること

・ロールオーバー、アウトのアニメーションが終わった時の処理がコツ
→ オーバーのアニメーション終了時にマウスが離れてたらアウトのアニメーション開始
→ アウトのアニメーション終了時にマウスが乗ってたらオーバーのアニメーション開始

・ロールオーバー、アウト時は
→ ロールオーバー時になにもアニメーションされてなかったらオーバーのアニメーション開始
→ ロールアウト時になにもアニメーションされてなかったらアウトのアニメーション開始

↓↓sampleのロールオーバー管理クラスの一部を抜粋
ロールオーバー時やアニメーション終了時に色々とチェックしてる

// ロールオーバー
HoverMgr.prototype._eRollOver = function() {

  this.isOver = true;
  if(!this.isPlaying) {
    this._startRollOver();
  }

};

// ロールアウト
HoverMgr.prototype._eRollOut = function(e) {

  this.isOver = false;
  if(!this.isPlaying) {
    this._startRollOut();
  }

};

// ロールオーバーのアニメーション
HoverMgr.prototype._startRollOver = function() {

  this.isPlaying = true;
  TweenMax.to(this.tg, 0.6, {
    scaleX:1,
    ease:Expo.easeOut,
    onComplete:this._eCompleteRollOver.bind(this)
  });

};

// ロールアウトのアニメーション
HoverMgr.prototype._startRollOut = function() {

  this.isPlaying = true;
  TweenMax.to(this.tg, 0.5, {
    scaleX:0,
    ease:Expo.easeInOut,
    onComplete:this._eCompleteRollOut.bind(this)
  });

};

// ロールオーバーのアニメーション終わり
HoverMgr.prototype._eCompleteRollOver = function() {

  this.isPlaying = false;
  if(!this.isOver) {
    this._startRollOut();
  }

};

// ロールアウトのアニメーション終わり
HoverMgr.prototype._eCompleteRollOut = function() {

  this.isPlaying = false;
  if(this.isOver) {
    this._startRollOver();
  }

};

sample3 3Dを使ったアニメーション

See the Pen intr6 sample3 by ikeryou (@ikeryou) on CodePen.

sample4 テキストを使ったアニメーション

See the Pen intr6 sample4 by ikeryou (@ikeryou) on CodePen.

sample5 応用

See the Pen intr6 sample5 by ikeryou (@ikeryou) on CodePen.

インタラ会とは？

ikeryou.hatenablog.com