Таймер моргания глаз

Я создаю этот веб-сайт с несколькими талисманами, и я реализую «таймер моргания глаз», где я заставлю каждый талисман моргать.

У меня вопрос: как реализовать (и как долго?) задержку между морганиями и самим морганием на любом языке (вероятно, я буду использовать 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());
    }
};

javascript animation jquery blink
person Thiago Belem    schedule 04.09.2012    source источник
comment
setInterval   -  person Blazemonger    schedule 04.09.2012
comment
Возможный дубликат: stackoverflow.com/questions/12115247/   -  person Dhruvenkumar Shah    schedule 04.09.2012
comment
Я знаю, как использовать setTimeout и setInterval, мой вопрос здесь больше об алгоритме, чем о самой реализации.   -  person Thiago Belem    schedule 04.09.2012
comment
@TiuTalk, что ты пробовал? как выглядит ваша разметка?   -  person Daniel A. White    schedule 04.09.2012
comment
@TiuTalk В этом нет особого алгоритма.   -  person Waleed Khan    schedule 04.09.2012
comment
Мы понятия не имеем, какой алгоритм вы имеете в виду. Пожалуйста, предоставьте более подробную информацию в своем вопросе, если вы хотите получить более подробный ответ.   -  person Blazemonger    schedule 04.09.2012
comment
Это слишком напоминает мне тег <blink>, и меня бросает в дрожь.   -  person adeneo    schedule 04.09.2012

Ответы (3)


arrow_upward
5
arrow_downward

Частота моргания варьируется, но в среднем глаз моргает раз в пять секунд. Это
соответствует 17 000 раз в день или 6 250 000 раз в год.

Источник

Предполагая, что у вас есть функция blink, которая "мигает", вы можете просто захотеть сделать что-то вроде этого:

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

Если вы хотите немного больше «случайности» в своем моргании, вы можете сделать следующее:

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

Что, если мои расчеты верны, вызовет функцию blink случайным образом между 4000 и 6000 мс, учитывая, что Math.random() возвращает значение от 0,0 до 1,0, поэтому "Math.random() - 0,5" будет между -0,5 и 0,5. . Это умножение на 2000 даст значение от -1000 до 1000.

person fresskoma    schedule 04.09.2012
comment
Хорошо, мне нравится, что в коде есть некоторый контекст. Я бы поставил тебе галочку. - person Hacknightly; 04.09.2012
comment
Круто .. такой ответ я искал :) - person Thiago Belem; 04.09.2012

arrow_upward
2
arrow_downward

Мы склонны «очеловечивать» такие вещи, как талисманы, поэтому вы можете использовать скорость моргания людей, чтобы талисманы казались естественными.

Обычно люди моргают в среднем 10 раз в минуту с интервалом между миганиями 2-10 секунд. [источник]

Сделайте задержку между морганиями случайным образом в диапазоне от 2 до 10 секунд, и в итоге это составит в среднем 10 раз в минуту:

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

Человеческий мозг очень хорошо улавливает закономерности, поэтому, если вы заставите талисманов мигать с заданным интервалом, посетители очень скоро уловят это и решат, что моргание выглядит искусственным.

Проверьте, как это выглядит. Возможно, фактические нормальные интервалы моргания в конце концов не выглядят нормальными, и вам, возможно, придется увеличить интервалы, особенно если вы показываете несколько талисманов рядом друг с другом.

person Guffa    schedule 04.09.2012

arrow_upward
0
arrow_downward

Ваша функция blink, вероятно, будет перемещать некоторые вещи в DOM или манипулировать изображением следующим образом.

var blink = function () {

   // do some work!
}

Затем вы можете использовать setInterval() для обработки интервала мигания.

setInterval(blink, 3000)

Обратите внимание, что setInterval измеряется в миллисекундах, поэтому 3000 — это «каждые 3 секунды». Надеюсь, это поможет. У вас может быть динамический номер, если вы пытаетесь не повторять его каждые три секунды. Например, у вас может быть функция slowDown() and speedUp(), вызываемая случайным образом, которая устанавливает фактический интервал setTimeout().

Что касается алгоритма, вот отрывок, описывающий некоторые трудности.

Процесс моргания человека, выражающий глубокую информацию разума, имеет неопределённости нечеткости и случайности. Предлагается метод, основанный на теории облаков, для реализации контроля неопределенности моргания виртуального человека. Построены облако максимального угла раскрытия глаз и облако интервала моргания. Предлагается облачный алгоритм управления морганием. Результаты сравнения его с методом достоверности показывают, что предложенный алгоритм может генерировать контрольную кривую моргания со случайными максимальными углами раскрытия глаз и интервалами моргания, чтобы реализовать контроль неопределенности моргания.

person Hacknightly    schedule 04.09.2012
comment
Как указано в моем последнем редактировании: я знаю, как использовать setTimeout и setInterval, мой вопрос здесь больше об алгоритме, чем о самой реализации. - person Thiago Belem; 04.09.2012