3

私はマスコットの数が少ないこのウェブサイトを作成しており、すべてのマスコットをまばたきさせる「まばたきタイマー」を実装します。

ここでの私の質問は、どの言語でも、まばたきとまばたき自体の間の遅延をどのように実装するか（そしてどのくらいの長さですか？）です（おそらくJavascriptを使用しますが、今は問題ではありません）。

「点滅アルゴリズム」などに関するリソースはありますか？

編集：setTimeoutとsetIntervalの使用方法を知っています。ここでの私の質問は、実装自体よりもアルゴリズムに関するものです。

最終結果：

var blink = {
    delay: function() {
        return Math.random() * 8000 + 2000;
    },
    duration: function() {
        return 100 + Math.floor(Math.random() * 100);
    },
    blinkAgain: function() {
        return (Math.random() < .2);
    },
    betweenBliks: function() {
        return blink.duration() / 2;
    }
};

$.fn.blink = function(continueBlinking) {
    var $element = $(this);

    // Star the blink
    $element.addClass('blink');

    // Finish the blink
    setTimeout(function() {
        $element.removeClass('blink');

        // Change of blinking again
        if (blink.blinkAgain()) {
            setTimeout(function() {
                $element.blink(false);
            }, blink.betweenBliks());
        }
    }, blink.duration());

    // Continue blinking?
    if (continueBlinking) {
        setTimeout(function() {
            $element.blink(true);
        }, blink.delay());
    }
};
4

3 に答える 3

5

まばたきの速度はさまざまですが、平均して5秒に1回まばたきします。これ
は、1日あたり17,000回、または1年あたり625万回に相当します。

ソース

「点滅」を行う関数があるとするとblink、次のようなことをしたいと思うかもしれません。

setInterval(blink, 5000); // 5000ms i.e. 5s

まばたきにもう少し「ランダム性」が必要な場合は、次のようにすることができます。

function blink() {
    [...] // The blinking
    setTimeout(blink, 5000 + ((Math.random() - 0.5) * 2000));
}

これは、私の計算が正しければ、4000〜6000msのランダムな方法でblink関数を呼び出します。これは、0.0〜1.0Math.random()の値を返すため、「Math.random（）-0.5」は-0.5〜0.5の間になります。その倍数2000は、-1000から1000の間の値になります。

于 2012-09-04T16:51:21.863 に答える
2

私たちはマスコットのようなものを「人間化」する傾向があるので、人間のまばたき率を使用してマスコットを自然に見せることができます。

人間は通常、1分間に平均10回まばたきをし、まばたきの間隔は2〜10秒です。[ソース]

まばたき間の遅延を2〜10秒の間でランダムにすると、平均して1分間に10回になります。

function blink() {
  // do the blinking stuff
  window.setTimeout(blink, Math.random() * 8000 + 2000);
}

人間の脳はパターンを拾うのがとても上手なので、マスコットを一定の間隔で点滅させると、訪問者はすぐにそれを拾い、点滅が人工的に見えたと思います。

それがどのように見えるかを確認してください。実際の通常の点滅間隔が結局正常に見えないためである可能性があり、特に複数のマスコットを並べて表示している場合は、間隔を長くする必要があります。

于 2012-09-04T16:56:33.520 に答える
0

あなたの点滅機能はおそらくDOM内でいくつかのものを動かしたり、そのように画像を操作したりします

var blink = function () {

   // do some work!
}

次にsetInterval()、点滅間隔を処理するために使用することができます。

setInterval(blink, 3000)

setIntervalはミリ秒単位で計測されるため、3000は「3秒ごと」であることに注意してください。うまくいけば、これがお役に立てば幸いです。3秒ごとに動的な数値を正しく設定しないようにしようとしている場合は、動的な数値を使用できます。たとえばslowDown() and speedUp()、実際のsetTimeout（）間隔を設定するランダムに呼び出される関数を使用できます。

アルゴリズムに関して、いくつかの難しさを説明する抜粋を次に示します。

人間の瞬きが心の深い情報を表現するプロセスには、あいまいさとランダム性の不確実性があります。仮想人間の瞬きの不確実性制御を実現するために、雲理論に基づく方法を提案した。目の最大オープンアングルクラウドとブリンクインターバルクラウドが設計されています。クラウドベースの点滅制御アルゴリズムが提案されています。それを確実性法と比較した結果は、提案されたアルゴリズムがランダムな目の最大開角と瞬き間隔で瞬きの制御曲線を生成し、瞬きの不確実性制御を実現できることを示しています。

于 2012-09-04T16:48:16.580 に答える