質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • JavaScript

    16481questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

葉っぱを降らせるJSアニメーションについて

解決済

回答 1

投稿

  • 評価
  • クリップ 3
  • VIEW 680

葉っぱを降らせるアニメーションを作成しております。

既存の桜吹雪系のJSを探してきて実装しました。
現在はランダムに選択された一つの葉っぱが大量に降る流れとなっています。

ただ、出来れば10種類の葉っぱ(leaf_1.png〜leaf_10.png)をランダムに表示させて、
降らせたいです。

流れとしては、1〜10までの画像を読み込み

読み込みが完了したら、アニメーションスタート。
それぞれ割り振られたランダムな葉っぱを降らせる

JSに不慣れで記述方法がわかりません。

よろしければアドバイス等いただければと思います。

<script type="text/javascript">
var canvas = document.getElementById("cvs");
var ctx = canvas.getContext("2d");
var imgCnt = 18;
var aryImg = [];
var cvsw = 560;
var cvsh = 790;
var imgBaseSizeW = 15;
var imgBaseSizeH = 18.5;
var aspectMax = 1.5;
var aspectMin = 0.5;
var speedMax = 1.2;
var speedMin = 0.3;
var angleAdd = 4;

var img = new Image();
var no = Math.floor(Math.random()*10+1);
img.src = "leaf/leaf_"+ no +".png";
img.onload = flow_start;

function setImagas(){
  var aspect = 0;
  for(var i = 0;i < imgCnt;i++){
    aspect = Math.random()*(aspectMax-aspectMin)+aspectMin;
    aryImg.push({
      "posx": Math.random()*cvsw,
      "posy": Math.random()*cvsh,
      "sizew": imgBaseSizeW*aspect,
      "sizeh": imgBaseSizeH*aspect,
      "speedy": Math.random()*(speedMax-speedMin)+speedMin,
      "angle": Math.random()*360,
    });
  }
}

var idx = 0;
var cos = 0;
var sin = 0;
var rad = Math.PI / 180;

function flow(){
  ctx.clearRect(0,0,cvsw,cvsh);
  for(idx = 0;idx < imgCnt;idx++){
    aryImg[idx].posy += aryImg[idx].speedy;
    aryImg[idx].angle += Math.random()*angleAdd;
    cos = Math.cos(aryImg[idx].angle * rad);
    sin = Math.sin(aryImg[idx].angle * rad);
    ctx.setTransform(cos, sin, sin, cos, aryImg[idx].posx, aryImg[idx].posy);
    ctx.drawImage(img, 0, 0 , aryImg[idx].sizew , aryImg[idx].sizeh);
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    if(aryImg[idx].posy >= cvsh){
      aryImg[idx].posy = -aryImg[idx].sizeh;
    }
  }
}

function flow_start(){
  setImagas();
  setInterval(flow,10);
}
</script>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+4

動作サンプル(舞っているのがjsFiddleのロゴなのは気にしないでください)
https://jsfiddle.net/twsv2bjd/1/

重要なところだけ抜粋して紹介します

// 必要な画像のパスの配列
var imagePathList = [
  'leaf/leaf_1.png',
  'leaf/leaf_2.png',
  'leaf/leaf_3.png',
  /*中略*/
];
// 読み込んだ画像を格納しておく配列
var images = [];

//////////////////////////////////

// 必要な画像を読み込み、全部読み終わったらスタートするための処理
function imageLoad() {
  // countは読み込み完了した枚数を数える変数
  var count = 0;
  // 読み込み完了時の処理
  function onLoad(e) {
    // 読み込み完了
    count++;
    if (count >= imagePathList.length) {
      // 必要な枚数読み込み終わったら描画を開始する
        flow_start();
    }
  }
  // leaf_XXの枚数分配列へImageを作成する
  for (var index in imagePathList) {
    var path = imagePathList[index];
    var image = new Image();
    image.onload = onLoad; // 各画像で読み込み完了処理を呼ぶ
    image.src = path; // srcを設定するのはonloadを設定後でないとonloadが呼ばれない可能性がある
    images.push(image);
  }
}

//////////////////////////////////
    aryImg.push({
      "img": images[Math.floor(Math.random()*images.length)], // 画像のランダム性はここで決める
      /*中略*/
    });

//////////////////////////////////
    ctx.drawImage(aryImg[idx].img, 0, 0, aryImg[idx].sizew, aryImg[idx].sizeh);// いままで固定の一枚のimgを使っていたが、aryImgが持つimgを使う

//////////////////////////////////
    if (aryImg[idx].posy >= cvsh) {
      aryImg[idx].posy = -aryImg[idx].sizeh;
      aryImg[idx].img = images[Math.floor(Math.random()*images.length)]; // 画像も切り替える
    }

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/02 12:02

    早々にご返答いただき、ありがとうございます。
    サンプルも提示いただき簡単に対応させることが出来ました。

    ありがとうございました

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16481questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。