Форум

raler · #1 (**permalink**) 27.10.2011, 17:23

Всем привет. Для решения одной задачи мне необходимо, чтобы некий обьект (блок) двигался по кривой (типа синусоиды или полудуги).

Существует ли такой плагин, или писать самостоятельно, или такое вообще неосуществимо?)

DjDiablo · #2 (**permalink**) 27.10.2011, 19:05

Осуществимо.
смещение + Math.sin(alpha)*size для синусоиды

setTimeOut - для цикла перемещения
.offset({ top: 10, left: 30 }) - для позиционирования блока
transform:rotate(55deg) Если хочешь наклонять блок (css3)

хотя можно пофантазировать ещё на тему animate

i=0;// i должна быть глобальной переменной, замыкание городить нехочется. 
$("#block").animate({top:function(){i=i+1;return sin(i)*100 ;},left:"+=1"},2000);

При паническом страхе глобальных переменных, угол можно и в атрибуте хранить

$("#block").animate({
                   top:function(){
                         var alpha=$("#block").attr("alpha")+1;
                         $("#block").attr("alpha",alpha);
                         return sin(alpha)*100; // возможно надо +"px" дописать
                   },
                   left:"+=1"
      },2000);

сейчас длительность 2 секунды.

СМОТРЮ НА СЛЕДУЮЩИЙ ДЕНЬ .ПРИМЕРЫ C ANIMATE НЕ РАБОЧИЕ. НАДО БЫЛО ИСПОЛЬЗОВАТЬ СВ-ВО STEP
Прописывать функции к св-вам символизирующим css, бессмысленно.
РАБОЧИЙ СКРИПТ В СЛЕДУЮЩЕМ СООБЩЕНИИ

DjDiablo · #3 (**permalink**) 28.10.2011, 12:03

РАБОЧИЙ ПРИМЕР ANIMATE
( Если песочница не работает, скопируйте код в html файл, и запустите.)

<!DOCTYPE html>
<html>
   <head>
      <script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">

#block {
    position:absolute; 
    background-color:#abc; 
    left:50px;
    width:90px; 
    height:90px;
    margin:5px; 
}
.step {
    position:absolute; 
}

</style>  

 </head>


<div id="block"> </div>

<script>


$(document).ready(function(){

	    $("#block").animate({
                // переместим в координату 500 по x
		"left": "500px"
    	    },{

                // функция степ вызывается на каждом шагу
		// теперь мы можем делать свою "неповторимую" анимацию :)
	         step: function(now, fx) {

                        // собственно само передвижение квадрата по Y 
			// вместо now можно и свою переменную использовать
			$(fx.elem).offset({top: Math.sin(now/80)*200+200});
			
                        
                        // дальше мы немного повыпендриваемся :)

			//добавим какойнибудь обьект на страницу, который будет символизировать след 
			$("body").append("<div class='step'>"+now.toFixed(0)+"</div>");	 		

			// отпозиционируем наш след туда же где и квадрат	
			$(".step:last").offset({top: Math.sin(fx.now/80)*200+200,left:now });


 		        //console.log(fx); если захотим посмотреть что у на в fx		    
		 }
		},"slow"); 


});



</script>
   </body>
</html>

Форум

Справочник

Discord чат

Курсы javascript