0

私が作成したdivを取得して、p5.jsを使用して1時間ごとに画面上を移動させようとしています.p5.jsで1時間ごとにそのdivの色をランダムに変更できるかどうかも疑問に思っていました.

4

2 に答える 2

1

これを行う 1 つの方法は、window.setInterval関数を使用することです。この関数を使用すると、1 時間ごとにアニメーションを実行できます。ただし、発生する 1 つの問題は、P5.js のドキュメントによると、関数が呼び出されたdraw()後も関数が継続的に実行されることです。と関数setup()を利用することで、これを修正できます。noLoop()loop

noLoop()関数呼び出しは関数の実行を停止し、関数draw()はloop()再び実行を開始します。それでは、これをどのようにコーディングできるか見てみましょう。

注:ドキュメントによると、各スケッチには 1 つの描画関数しか存在できません。そのため、1 時間の間に他のものをアニメーション化している場合、このアプローチは最適な選択ではない可能性があります。

//stores the position of the element on the x-axis of the screen
var xPos = 0;
var delay = 60000 * 60; //1,000 milliseconds in a second

window.setInterval(function(){
    //code to be called every hour; make draw function loop
    loop();
}, delay);

function setup(){
    //create your canvas or div or whatever
    createCanvas(400, 400);
}

function draw(){
    // clear the current background
    background(255);

    // set the fill color of your element
    fill(255, 0, 0);

    //change the x position so it can move across the screen
    xPos = xPos + 1;

    // if the circle moves off screen, it's finished animating for the hour
    if(xpos > width)
    {
        xPos = 0; //reset back to 0;
        noLoop(); //end the looping of the draw function        
    }

    //draw your element to the correct location and size; here I'll use an ellipse
     ellipse(xPos, 100, 25, 25);

}

私が述べたように、私は P5.js に最も精通しているわけではありませんが、うまくいけば、これが機能するのに十分なアイデアを与えるでしょう。

編集:別のアプローチは、CSS アニメーションを使用することです。CSS アニメーションを使用すると、目的の効果を得るために P5.js さえ必要ありません。

HTML:

<div id="my-div" class="my-div"></div>

CSS:

.my-div {
    /* animation name followed by how long the animation takes to perform */
    /* browser prefixes for more browser support */
    animation: slide-across-screen 1s;
    -webkit-animation: slide-across-screen 1s;
    -moz-animation: slide-across-screen 1s;
}

@keyframes slide-across-screen {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: 100%;
    }
}

JavaScript:

var div = document.getElementById("my-div");
div.addEventListener("animationend", function(){
    div.style.marginLeft = 0;
    div.style.animationPlayState = paused;
}

window.setInterval(function(){
    div.style.animationPlayState = running; //might need browser prefixes here as well
}, 60000 * 60);
于 2015-04-25T20:39:22.037 に答える