Форум

hoax · #1 (**permalink**) 11.11.2012, 13:15

<!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 ?

danik.js · #2 (**permalink**) 11.11.2012, 14:04

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

Написать функцию не могу - не хватит опыта сделать это быстро. Будет интересно посмотреть на предложенные реализации опытных программеров (а может к тому времени надумаю и сам че-нибудь свое предложу)

`p r o x y · #3 (**permalink**) 15.11.2012, 16:09

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

cyber · #4 (**permalink**) 15.11.2012, 17:05

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)
    }
  }
  
  
  }    
      });

danik.js · #5 (**permalink**) 16.11.2012, 03:59

Сообщение от `p r o x y

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

Проблема чтоли проверить window.requestAnimationFrame существование функции?

hoax · #6 (**permalink**) 19.11.2012, 16:22

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

animateProp({ elem: img, prop: 'opacity', start:0.5, end: 1.0, duration: 1000 });

cyber · #7 (**permalink**) 19.11.2012, 21:08

hoax, в каком коде?
кроме вызова функции нечего не вижу..

hoax · #8 (**permalink**) 20.11.2012, 16:55

как-то так

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 });

cyber · #9 (**permalink**) 21.11.2012, 02:40

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 посте.

Форум

Справочник

Discord чат

Курсы javascript