Javascript анимация
студия ad, 17.02.2009 Вторник, 23:19
Теги:
Теги:
Те, кто занимается javascript, наврняка знают такие библиотеки как prototype или jquery. Одним из основных достоинств этих библиотек (тулкитов) является возможность создания js анимации без лишних хлопот. Но как же быть, если неохота грузить страницу 50 лишними килобайтами из за пары анимированных эффектов? А очень просто! Нажмите на квадрат:
Нравится? И никаких библиотек. Это пример создания правильной геометрической анимации. Функцию написал я. Функция позволяет изменить некоторые параметры положения объекта и его вида: topLeft topRight width height - остальные параметры, коих достаточно большое количество, я добавлять не стал, так как основа ясна и это не составило бы у вас труда. Самое приятное, что функция-аниматор вызывается как дополнительный метод объекта, имеет callback, то есть возможность выполнить заданную функцию после завершения анимации, а так же позволяет выстраивать цепи анимаций:
Вот полный код второго примера:
Жду комментариев!
UPD
Много ды утекло, я научился писать гораздо более удобные функции анимации.
- Цветовая анимация на js: пертекание одного цвета в другой
- Анимация прозрачности на js
Нравится? И никаких библиотек. Это пример создания правильной геометрической анимации. Функцию написал я. Функция позволяет изменить некоторые параметры положения объекта и его вида: topLeft topRight width height - остальные параметры, коих достаточно большое количество, я добавлять не стал, так как основа ясна и это не составило бы у вас труда. Самое приятное, что функция-аниматор вызывается как дополнительный метод объекта, имеет callback, то есть возможность выполнить заданную функцию после завершения анимации, а так же позволяет выстраивать цепи анимаций:
Вот полный код второго примера:
Code
<html>
<head>
</head>
<body>
<div id="mydiv" onClick='gogogo(this)' style="position:absolute;width:100px;height:100px;left:0;top:0;background:red;"></div>
<script>
Object.prototype.animate = function(mass,time,callback){
var obj = this;
var x = parseInt(mass.width);
var y = parseInt(mass.height);
var t = parseInt(mass.top);
var l = parseInt(mass.left);
var width = obj.offsetWidth;
var height = obj.offsetHeight;
var top = obj.offsetTop;
var left = obj.offsetLeft;
var step = 1;
function doAnimation(){
if(step==time){
obj.style.width = x + 'px';
obj.style.height = y + 'px';
obj.style.top = t + 'px';
obj.style.left = l + 'px';
setTimeout(callback,0)
}
if(step<=time){
obj.style.width = Math.round(width + ((x-width)/time) * step)+'px';
obj.style.height = Math.round(height + ((y-height)/time) * step)+'px';
obj.style.top = Math.round(top + ((t-top)/time) * step)+'px';
obj.style.left = Math.round(left + ((l-left)/time) * step)+'px';
step++;
setTimeout(doAnimation,1);
}
};
doAnimation();
return obj;
};
function gogogo(obj){
obj.animate({height:"50",width:"50",top:"25",left:"400"},100,function(){
obj.animate({height:"10",width:"10",top:"0",left:"200"},30,function(){
obj.animate({height:"100",width:"100",top:"0",left:"0"},200);
});
});
};
</script>
</body>
</html>
<head>
</head>
<body>
<div id="mydiv" onClick='gogogo(this)' style="position:absolute;width:100px;height:100px;left:0;top:0;background:red;"></div>
<script>
Object.prototype.animate = function(mass,time,callback){
var obj = this;
var x = parseInt(mass.width);
var y = parseInt(mass.height);
var t = parseInt(mass.top);
var l = parseInt(mass.left);
var width = obj.offsetWidth;
var height = obj.offsetHeight;
var top = obj.offsetTop;
var left = obj.offsetLeft;
var step = 1;
function doAnimation(){
if(step==time){
obj.style.width = x + 'px';
obj.style.height = y + 'px';
obj.style.top = t + 'px';
obj.style.left = l + 'px';
setTimeout(callback,0)
}
if(step<=time){
obj.style.width = Math.round(width + ((x-width)/time) * step)+'px';
obj.style.height = Math.round(height + ((y-height)/time) * step)+'px';
obj.style.top = Math.round(top + ((t-top)/time) * step)+'px';
obj.style.left = Math.round(left + ((l-left)/time) * step)+'px';
step++;
setTimeout(doAnimation,1);
}
};
doAnimation();
return obj;
};
function gogogo(obj){
obj.animate({height:"50",width:"50",top:"25",left:"400"},100,function(){
obj.animate({height:"10",width:"10",top:"0",left:"200"},30,function(){
obj.animate({height:"100",width:"100",top:"0",left:"0"},200);
});
});
};
</script>
</body>
</html>
Жду комментариев!
UPD
Много ды утекло, я научился писать гораздо более удобные функции анимации.
- Цветовая анимация на js: пертекание одного цвета в другой
- Анимация прозрачности на js
