Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.02.2013, 13:54
Профессор
Отправить личное сообщение для hoax Посмотреть профиль Найти все сообщения от hoax
 
Регистрация: 20.09.2012
Сообщений: 151

Как сделать ф-ю 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, 14.02.2013 в 13:57.
Ответить с цитированием
  #2 (permalink)  
Старый 14.02.2013, 20:18
Профессор
Отправить личное сообщение для hoax Посмотреть профиль Найти все сообщения от hoax
 
Регистрация: 20.09.2012
Сообщений: 151

ммм
Ответить с цитированием
  #3 (permalink)  
Старый 14.02.2013, 20:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,190

hoax,
тут медитировали?
Ответить с цитированием
  #4 (permalink)  
Старый 15.02.2013, 00:15
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от hoax
Math.round(start + (end - start)*delta);
округлит дробное до целочисленного

т.е. тут будет либо 0, либо 1.
Ответить с цитированием
  #5 (permalink)  
Старый 15.02.2013, 23:18
Профессор
Отправить личное сообщение для hoax Посмотреть профиль Найти все сообщения от hoax
 
Регистрация: 20.09.2012
Сообщений: 151

Сообщение от рони Посмотреть сообщение
hoax,
тут медитировали?
Ну а как вы думаете? Раз я пишу про ф-ю
Ответить с цитированием
  #6 (permalink)  
Старый 15.02.2013, 23:18
Профессор
Отправить личное сообщение для hoax Посмотреть профиль Найти все сообщения от hoax
 
Регистрация: 20.09.2012
Сообщений: 151

Сообщение от рони Посмотреть сообщение
hoax,
тут медитировали?
Ну а как вы думаете раз я пишу про данную ф-ю

Сообщение от melky Посмотреть сообщение
округлит дробное до целочисленного

т.е. тут будет либо 0, либо 1.
Даааа, забыл про этой, там же 0.5 блин.
Как же тогда сделать? Без Math.round не работает (
Ответить с цитированием
  #7 (permalink)  
Старый 15.02.2013, 23:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,190

hoax,
Сообщение от hoax
step
не могли бы вы пояснить ?
Ответить с цитированием
  #8 (permalink)  
Старый 16.02.2013, 00:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 32,190

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>
Ответить с цитированием
  #9 (permalink)  
Старый 16.02.2013, 10:11
Профессор
Отправить личное сообщение для hoax Посмотреть профиль Найти все сообщения от hoax
 
Регистрация: 20.09.2012
Сообщений: 151

рони,

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

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


А вот где сама тема - http://learn.javascript.ru/js-animation#основы-анимации
Ответить с цитированием
  #10 (permalink)  
Старый 16.02.2013, 11:55
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от hoax
Даааа, забыл про этой, там же 0.5 блин.
Как же тогда сделать? Без Math.round не работает (
а зачем вообще округлять css двиг сам округлит
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать чтобы функция сработала для подргуженого контента? olexand777 jQuery 5 28.01.2013 15:54
как сделать событие для списка node. DimaRogov Events/DOM/Window 5 18.09.2011 15:52
Как сделать выпадающее меню voloxa89 jQuery 7 20.08.2011 10:27
Как лучше сделать виджет? comentator Элементы интерфейса 0 25.03.2011 07:44
Как сделать функцию типа toDataUrl для рисунка в ie6 ? Олег Общие вопросы Javascript 2 13.09.2008 23:06