Изменяем 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 ? |
Лучше в качестве параметров передавать animate({element: elem, opacity: 0.5, duration: 1000}) или animate(elem, {opacity: 0.5}, 1000) и внутри использовать requestAnimationFrame вместо setInterval.
Написать функцию не могу - не хватит опыта сделать это быстро. Будет интересно посмотреть на предложенные реализации опытных программеров (а может к тому времени надумаю и сам че-нибудь свое предложу) |
requestAnimationFrame хорошо, но не стоит забывать про кроссбраузерность. Если это критично, то классический вариант с setInterval/setTimeout+window.onfocus/onblur вполне будет уместен.
|
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) } } } }); |
Цитата:
Проблема чтоли проверить window.requestAnimationFrame существование функции? |
А как можно сделать opacity в данном коде?
animateProp({ elem: img, prop: 'opacity', start:0.5, end: 1.0, duration: 1000 }); |
hoax, в каком коде?
кроме вызова функции нечего не вижу.. |
как-то так
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 }); |
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 посте. |
Часовой пояс GMT +3, время: 23:47. |