Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   как лучше сделать покадровую анимацию javascript (https://javascript.ru/forum/misc/39582-kak-luchshe-sdelat-pokadrovuyu-animaciyu-javascript.html)

Серджио 05.07.2013 17:58

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

dmitriymar 05.07.2013 18:23

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

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

ну и три
Цитата:

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

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

Серджио 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 05.07.2013 18:28

Цитата:

Сообщение от Серджио
do{
i = i+1;
bl.src = "eyeblinking/right/eyeblink"+i+"R.png";

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

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

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

ruslan_mart 05.07.2013 18:43

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

dmitriymar 05.07.2013 18:59

Цитата:

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

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

danik.js 05.07.2013 19:34

Цитата:

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

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

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

Серджио 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 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"/>


Часовой пояс GMT +3, время: 21:19.