Javascript.RU

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

Изменяем opacity с помощью animate
<!DOCTYPE html>
<html>
<head>

<style>
.example_path {background:#b3b3b3;width:100px;height:100px;;}

</style>


<script>
function animate(opts) {
  
  var start = new Date; // сохранить время начала 

  var timer = setInterval(function() {

    // вычислить сколько времени прошло
    var progress = (new Date - start) / opts.duration;
    if (progress > 1) progress = 1;

    // отрисовать анимацию
    opts.step(progress);
    
    if (progress == 1) clearInterval(timer); // конец :)
     
  }, opts.delay || 10); // по умолчанию кадр каждые 10мс

}


function stretch(elem) {
to=0.5;
  animate({ 
    duration: 1000, // время на анимацию 1000 мс
    step: function(progress) {
      elem.style.opacity = to*progress;
    }
  });
}

</script>









</head>
<body>


<div onclick="stretch(this)" class="example_path">
 
</div>

</body>
</html>


Как видите при клике на блок, изменяется прозрачность с 0 до 0.5, а как сделать чтобы с 1.0 изменялось до 0.5 ?
Ответить с цитированием
  #2 (permalink)  
Старый 11.11.2012, 14:04
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Лучше в качестве параметров передавать animate({element: elem, opacity: 0.5, duration: 1000}) или animate(elem, {opacity: 0.5}, 1000) и внутри использовать requestAnimationFrame вместо setInterval.


Написать функцию не могу - не хватит опыта сделать это быстро. Будет интересно посмотреть на предложенные реализации опытных программеров (а может к тому времени надумаю и сам че-нибудь свое предложу)
Ответить с цитированием
  #3 (permalink)  
Старый 15.11.2012, 16:09
Кандидат Javascript-наук
Отправить личное сообщение для `p r o x y Посмотреть профиль Найти все сообщения от `p r o x y
 
Регистрация: 04.05.2009
Сообщений: 105

requestAnimationFrame хорошо, но не стоит забывать про кроссбраузерность. Если это критично, то классический вариант с setInterval/setTimeout+window.onfocus/onblur вполне будет уместен.

Последний раз редактировалось `p r o x y, 15.11.2012 в 16:16.
Ответить с цитированием
  #4 (permalink)  
Старый 15.11.2012, 17:05
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

hoax, если несколько анимаций на странице могу предложить расширенную версию animate
function animate(opts){
 var start = new Date();
    
    var timer = setInterval(function (){
      
       var progress = (new Date - start)/opts.duration;
       if(progress > 1)progress = 1;    
       
        opts.step(opts.delta(progress));
        
        if(progress == 1){
            clearInterval(timer);
            opts.compleat && opts.compleat(opts.elem); 
            };
         
        },opts.delay || 40);
    
    return timer;
    }
    
    
function Prop(opts){
 
opts.step = function (prog){    
var value;
 
  for(var i = opts.prop.length;i--;){
  
     value = opts.start[i] + ((opts.value[i] - opts.start[i] )*prog);
    opts.elem.style[opts.prop[i]] = value+ opts.units;
    
}; 
 
}
  if (!opts.delta) {
opts.delta = function (progress){
 
return progress;
 
}
}  
 return animate(opts);
}
/* 
анимация нескольких свойств:
 
-можно анимировать несколько свойств ['opacity','width']
  тогда start передается так [0,100](100 - начальное значение ширины) , а value так [1,500](500 -    конечное значение ширины)
 
*/      
Prop({
  elem:document.getElementById('testBlock'),//элемент на котором происходит анимация 
  start:[0,0],// начальное значение
  value:[100,300],// конечное значение
  prop:['top','left'],// свойство анимации
  duration:2000,// время анимации
  units:'px',//единицы измерение px || % || ''-без единици измерения
  delta: function (progress) {// НЕ обязательные параметр задающий вид анимации
    
    for (var a = 0, b = 1, result; 1; a += b, b /= 2) {
    if (progress >= (7 - 4 * a) / 11) {
      return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2)
    }
  }
  
  
  }    
      });
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #5 (permalink)  
Старый 16.11.2012, 03:59
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от `p r o x y
requestAnimationFrame хорошо, но не стоит забывать про кроссбраузерность. Если это критично, то классический вариант с setInterval/setTimeout+window.onfocus/onblur вполне будет уместен.

Проблема чтоли проверить window.requestAnimationFrame существование функции?
Ответить с цитированием
  #6 (permalink)  
Старый 19.11.2012, 16:22
Профессор
Отправить личное сообщение для hoax Посмотреть профиль Найти все сообщения от hoax
 
Регистрация: 20.09.2012
Сообщений: 151

А как можно сделать opacity в данном коде?

animateProp({ elem: img, prop: 'opacity', start:0.5, end: 1.0, duration: 1000 });
Ответить с цитированием
  #7 (permalink)  
Старый 19.11.2012, 21:08
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

hoax, в каком коде?
кроме вызова функции нечего не вижу..
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
  #8 (permalink)  
Старый 20.11.2012, 16:55
Профессор
Отправить личное сообщение для hoax Посмотреть профиль Найти все сообщения от hoax
 
Регистрация: 20.09.2012
Сообщений: 151

как-то так

function animate(opts) {

  var start = new Date;
  var delta = opts.delta || linear;

  var timer = setInterval(function() {
    var progress = (new Date - start) / opts.duration;

    if (progress > 1) progress = 1;

    opts.step( delta(progress) );

    if (progress == 1) {
      clearInterval(timer);
      opts.complete && opts.complete();
    }
  }, opts.delay || 13);

  return timer;
}





function animateProp(opts) {
  var start = opts.start, end = opts.end, prop = opts.prop;

  opts.step = function(delta) {
    var value = Math.round(start + (end - start)*delta);
    opts.elem.style[prop] = value + 'px';
  }
  return animate(opts);
}



















var div = document.createElement('div');

animateProp({ elem: img, prop: 'opacity', start:0.5, end: 1.0, duration: 1000 });
Ответить с цитированием
  #9 (permalink)  
Старый 21.11.2012, 02:40
Аватар для cyber
I am Student
Отправить личное сообщение для cyber Посмотреть профиль Найти все сообщения от cyber
 
Регистрация: 17.12.2011
Сообщений: 4,415

hoax, если копируете то копируйте правильно...
вот с сделал по той что до пиливал так как у вас много чего не хватает
<!DOCTYPE HTML>
<html>
  <head>
    <style>
      #animate{
       
        width:200px;
        height:200px;
        background-color:red;
       
      }
    </style>
  </head>
  <body>

    <div id="animate"></div>  
    <script>

function animate(opts){
 var start = new Date();
    
    var timer = setInterval(function (){
      
       var progress = (new Date - start)/opts.duration;
       if(progress > 1)progress = 1;    
       
        opts.step(opts.delta(progress));
        
        if(progress == 1){
            clearInterval(timer);
            opts.compleat && opts.compleat(opts.elem); 
            };
         
    },opts.delay || 1000/60);
    
    return timer;
    }
    
    
function Prop(opts){
 
opts.step = function (prog){    
var value;
 
  for(var i = opts.prop.length;i--;){
  
     value = opts.start[i] + ((opts.value[i] - opts.start[i] )*prog);
    opts.elem.style[opts.prop[i]] = value+ opts.units;
    
}; 
 
}
  if (!opts.delta) {
opts.delta = function (progress){
 
return progress;
 
}
}  
 return animate(opts);
}
var elem = document.getElementById("animate");  
      
Prop({
  elem:elem,//элемент на котором происходит анимация 
  start:[1],// начальное значение
  value:[0],// конечное значение
  prop:['opacity'],// свойство анимации
  duration:2000,// время анимации
  units:'',//единицы измерение px || % || ''-без единици измерения
  });


    


    </script>

  </body>
</html>

некоторые коменты удалил , но они есть в 4 посте.
__________________
Цитата:
Если ограничения и условия описываются как "коробка", то хитрость в том что бы найти именно коробку... Не думайте о чем то глобальном - найдите коробку.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получить значение ячейки с помощью onclik Space-06 Events/DOM/Window 4 10.01.2012 09:39
проблема с div И animate g00000dman jQuery 2 24.03.2011 23:34
jQuery, функция animate(), рекурсия xintrea jQuery 12 03.01.2011 12:33
Прокрутка страницы с помощью клавиш Mirgorod Events/DOM/Window 0 17.06.2010 22:39
Проверка наличия логина в БД при регистрации, с помощью ajax storng Общие вопросы Javascript 4 09.04.2010 20:24