как лучше сделать покадровую анимацию javascript
Всем, привет!
Подскажите пожайлуста, какими средствами лучше сделать покадровую анимацию на javascript, так, чтобы она работала под всеми основными браузерами? |
а по конкретней?? что вам надо, какую именно анимацию..??
движение блочных элементов или слайд картинок.. или еще что то |
Вот чето в этом роде, там же есть ссылка на урок с фигурной анимацией: http://javascript.ru/forum/misc/3946...ostanovit.html
|
|
Покадровую анимацию лучше делать во Flash.
|
Цитата:
|
статейка. Если нужна бесконечная анимация:
var timer = setInterval(animation,10); // Включает анимацию на 100 кадров в секунду
function animation() {
if(progress == 1000){prog = 0} // На эту переменную пусть опираются все расчёты, цикл анимации займёт 10 сек
prog++;
}
clearInterval(timer); // Выключит анимацию если нужно, потом можно опять включить
|
Аргументирую
Нужно сделать моргание глазных век в помощью png картинок, и так чтобы оно происходило в случайном интервале времени, один раз моргнули, потом случайный промежуток времени, моргнули второй и т.д.
Flash не подходит, необходим именно javascript)) |
Серджио, у Вас плавная анимация? В смысле, у Вас несколько кадров моргания глаз? Или просто два спрайта: открытые глаза и закрытые глаза?
|
Если быть точным 16 картинок(кадров)!
|
У меня 16 картинок(кадров) из них необходимо сделать моргание глазного века
|
а зачем 100 кадрос в секунду ? 30-60 оптимально. http://ru.wikipedia.org/wiki/%D0%9A%...BE%D1%82%D0%B0
два - картинки тяжелые? а то ведь одну ещё не дорисует а в очерди уже будет стоять отрисовывание следующей ну и три Цитата:
|
я тут набросал кое что, но почему то не работает, подскажите где ошибка
<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>
|
Цитата:
Цитата:
поток один |
Лучше сделать всё одним спрайтом и менять background-position.
|
Цитата:
|
Цитата:
2) Ограниченная палитра цветов и прозрачности. Но часто это не создает проблем. |
Я тут сам попытался, но чтото не выходит, подскажите может где то ошибка
<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"/>
|
надо время задействовать каким то образом
и предварительно загрузить картинки не мешало бы
<!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, время: 02:46. |