Форум

hoax · #1 (**permalink**) 14.02.2013, 15:54

Для кода

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 · #2 (**permalink**) 14.02.2013, 22:18

ммм

рони · #3 (**permalink**) 14.02.2013, 22:45

hoax,
тут медитировали?

melky · #4 (**permalink**) 15.02.2013, 02:15

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

Math.round(start + (end - start)*delta);

округлит дробное до целочисленного

т.е. тут будет либо 0, либо 1.

hoax · #5 (**permalink**) 16.02.2013, 01:18

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

hoax,
тут медитировали?

Ну а как вы думаете? Раз я пишу про ф-ю

hoax · #6 (**permalink**) 16.02.2013, 01:18

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

hoax,
тут медитировали?

Ну а как вы думаете раз я пишу про данную ф-ю

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

округлит дробное до целочисленного

т.е. тут будет либо 0, либо 1.

Даааа, забыл про этой, там же 0.5 блин.
Как же тогда сделать? Без Math.round не работает (

рони · #7 (**permalink**) 16.02.2013, 01:43

hoax,

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

step

не могли бы вы пояснить ?

рони · #8 (**permalink**) 16.02.2013, 02:00

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>

hoax · #9 (**permalink**) 16.02.2013, 12:11

рони,

спасибо, вот что я искал

(to - from) * delta(progress) + from;

А вот где сама тема - http://learn.javascript.ru/js-animation#основы-анимации

melky · #10 (**permalink**) 16.02.2013, 13:55

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

Даааа, забыл про этой, там же 0.5 блин.
Как же тогда сделать? Без Math.round не работает (

а зачем вообще округлять

css двиг сам округлит

Форум

Справочник

Discord чат

Курсы javascript