Как сделать ф-ю step для opacity?
Для кода
opts.elem.style[prop] = Math.round(start + (end - start)*delta); при условии что start = 0.5, end = 1. Изначально в стилях стоит opacity:0.5 При условии что progress = 0, opacity будет 0.5 Если progress = 1, opacity = 1. |
ммм
|
hoax,
тут медитировали? |
Цитата:
т.е. тут будет либо 0, либо 1. |
Цитата:
|
Цитата:
Цитата:
Как же тогда сделать? Без Math.round не работает ( |
hoax,
Цитата:
|
hoax,
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
<input type="button" name="go" value="go" onclick="show()" /><br />
<img src="http://i032.radikal.ru/0712/f1/9e278e7f8393.jpg" id="example" style="opacity: 0.5; filter: alpha(opacity=50); " />
<script type="text/javascript">
function show()
{
var element = document.getElementById("example");
var from = 0.5; // Начальная координата X
var to = 1; // Конечная координата X
var duration = 2000; // Длительность - 1 секунда
var start = new Date().getTime(); // Время старта
function delta(progress) {
return progress;
}
setTimeout(function() {
var now = (new Date().getTime()) - start; // Текущее время
var progress = now / duration; // Прогресс анимации
var result = (to - from) * delta(progress) + from;
if (progress > 1) result = to;
if (element.filters) {
var f = element.filters["DXImageTransform.Microsoft.alpha"] || element.filters.alpha;
f ? f.opacity = result*100 : element.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity=" + result*100 + ")"
} else element.style.opacity = result ;
if (progress < 1) // Если анимация не закончилась, продолжаем
setTimeout(arguments.callee, 10);
}, 10);
}
</script>
</body>
</html>
|
рони,
спасибо, вот что я искал (to - from) * delta(progress) + from; А вот где сама тема - http://learn.javascript.ru/js-animation#основы-анимации |
Цитата:
|
| Часовой пояс GMT +3, время: 21:41. |