Форум

Серджио · #11 (**permalink**) 05.07.2013, 17:58

У меня 16 картинок(кадров) из них необходимо сделать моргание глазного века

dmitriymar · #12 (**permalink**) 05.07.2013, 18:23

а зачем 100 кадрос в секунду ? 30-60 оптимально. http://ru.wikipedia.org/wiki/%D0%9A%...BE%D1%82%D0%B0

два - картинки тяжелые? а то ведь одну ещё не дорисует а в очерди уже будет стоять отрисовывание следующей

ну и три

Сообщение от Серджио

У меня 16 картинок(кадров) из них необходимо сделать моргание глазного века

gif анимация и никаго скрипта

Серджио · #13 (**permalink**) 05.07.2013, 18:25

<script type="text/javascript">
  $(document).ready(function(){
    var bl = document.getElementById("blinkright");
    function blink(){
        var bl = document.getElementById("blinkright");
    var i = 1;
    do{
        i = i+1;
        bl.src = "eyeblinking/right/eyeblink"+i+"R.png";

      }
    while (i<5);
    }


  });
</script>
   






</head>
<body onload="blink()">

 <img id="blinkright" />
</body>
</html>

dmitriymar · #14 (**permalink**) 05.07.2013, 18:28

Сообщение от Серджио

do{
i = i+1;
bl.src = "eyeblinking/right/eyeblink"+i+"R.png";

в топку -изображения сначала нужно закешировать, чтоб не ждать их подгрузки

Сообщение от Серджио

я тут набросал кое что, но почему то не работает, подскажите где ошибка

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

ruslan_mart · #15 (**permalink**) 05.07.2013, 18:43

Лучше сделать всё одним спрайтом и менять background-position.

dmitriymar · #16 (**permalink**) 05.07.2013, 18:59

Сообщение от Ruslan_xDD

Лучше сделать всё одним спрайтом и менять background-position.

лучше. а смысл если можно просто собрать в гифку

danik.js · #17 (**permalink**) 05.07.2013, 19:34

Сообщение от dmitriymar

лучше. а смысл если можно просто собрать в гифку

1) Проблемы с управлением частотой кадров
2) Ограниченная палитра цветов и прозрачности.

Но часто это не создает проблем.

Серджио · #18 (**permalink**) 05.07.2013, 20:33

Я тут сам попытался, но чтото не выходит, подскажите может где то ошибка

<script type="text/javascript">
  $(document).ready(function(){
    var bl = document.getElementById("blinkright");
    function blink(){
        var bl = document.getElementById("blinkright");
    var i = 1;
    do{
        i = i+1;
        bl.src = "eyeblinking/right/eyeblink"+i+"R.png";

      }
    while (i<5);
    }


  });
</script>
   






</head>
<body onload="blink()">
<!--<input type="button" value="моргание" onclick="blink()">-->
 <img id="blinkright" src="eyeblinking/right/eyeblink1R.png"/>

vadim5june · #19 (**permalink**) 05.07.2013, 21:03

надо время задействовать каким то образом
и предварительно загрузить картинки не мешало бы

<!DOCTYPE html>
<script type="text/javascript">
var i=0; 
 function blink(){
setTimeout(function(){var bl = document.getElementById("blinkright");
bl.src = "eyeblinking/right/eyeblink"+i+"R.png";
i++;if(i<5)blink() },1000)
 };
</script>
</head>
<body onload="blink()"><input type="button" value="моргание" onclick="i=0;blink()">
 <img id="blinkright" src="eyeblinking/right/eyeblink1R.png"/>

Форум

Справочник

Discord чат

Курсы javascript