Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.10.2015, 20:42
Профессор
Отправить личное сообщение для xTODx Посмотреть профиль Найти все сообщения от xTODx
 
Регистрация: 04.02.2014
Сообщений: 167

как ПРАВИЛЬНО крутить куб
Всем привет, вот, видел где-то как крутится кубик, и решил изобрести велосипед.
Главная цель - понять как это всё должно работать правильно.
Пока-что есть вот что
и то, на jsfiddle почему-то отказалось работать
Сейчас он просто переворачивается, но есть ряд проблем
1. Перевёрнутые грани, оно вроде так и должно быть, но не юзабильно если применять
2. После некоторых манипуляций, поворачивает не туда, куда хотелось-бы, оси что-ли поворачиваются тоже? О_О
3. отдаление при перевороте. но думаю это реально сделать, если добавить анимацию в каком-нить классе, и просто добавлять класс.
4. запрет следующего вращении, пока не закончено это, я пытался сделать

Последний раз редактировалось xTODx, 09.10.2015 в 20:58.
Ответить с цитированием
  #2 (permalink)  
Старый 09.10.2015, 21:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от xTODx
на jsfiddle почему-то отказалось работать
ставьте загрузку
No wrap - in <body>
потому что у вас onclick="rotY(-90)" а не $(...).click
Ответить с цитированием
  #3 (permalink)  
Старый 09.10.2015, 21:20
Профессор
Отправить личное сообщение для xTODx Посмотреть профиль Найти все сообщения от xTODx
 
Регистрация: 04.02.2014
Сообщений: 167

Поправил
Вот а теперь. жду идей, советов)
Ответить с цитированием
  #4 (permalink)  
Старый 09.10.2015, 21:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от xTODx
запрет следующего вращении, пока не закончено это, я пытался сделать
var nowX = 0;
var nowY = 0;
var nowZ = 0;
var off = true;
function rotX(angle){
if(off){
var $elem = $(".cube");
off = false;
$({deg: nowX}).animate({deg: nowX+angle}, {
duration: 2000,
step: function(now) {
$elem.css({
transform: 'rotateX(' + now + 'deg) '+'rotateY('+nowY+'deg) '+'rotateZ('+nowZ+'deg)'
});
}
},100 сюда надо ставить off=true;
);
off=true; а не тут
nowX = nowX + angle;
}
}
Ответить с цитированием
  #5 (permalink)  
Старый 09.10.2015, 21:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

xTODx,
смотря какой синтаксис вы используите
callback — функция, которая будет вызвана после завершения анимации
или
complete — функция, которая будет вызвана после завершения анимации
цифра 100 бесполезная величина в коде , но jQuery этим не испугать.
Ответить с цитированием
  #6 (permalink)  
Старый 09.10.2015, 21:50
Профессор
Отправить личное сообщение для xTODx Посмотреть профиль Найти все сообщения от xTODx
 
Регистрация: 04.02.2014
Сообщений: 167

Да, я уже сам к этом упришёл, исправил.
НО оно всё-равно работает, в функцию его:

Последний раз редактировалось xTODx, 09.10.2015 в 21:52.
Ответить с цитированием
  #7 (permalink)  
Старый 09.10.2015, 21:52
Профессор
Отправить личное сообщение для xTODx Посмотреть профиль Найти все сообщения от xTODx
 
Регистрация: 04.02.2014
Сообщений: 167

После одного поворота - не крутит
Ответить с цитированием
  #8 (permalink)  
Старый 09.10.2015, 22:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от xTODx
После одного поворота - не крутит
Сообщение от рони
смотря какой синтаксис вы используите
смотреть
http://api.jquery.com/animate/#anima...erties-options

или
Цитата:
.animate( properties, options )
или
Цитата:
.animate( properties [, duration ] [, easing ] [, complete ] )
function rotX(angle){
		if(off){
			var $elem = $(".cube");
			off = false;
			$({deg: nowX}).animate({deg: nowX+angle}, {
			duration: 2000,
				step: function(now) {
					$elem.css({
						transform: 'rotateX(' + now + 'deg) '+'rotateY('+nowY+'deg) '+'rotateZ('+nowZ+'deg)'
					});
				},
*!*
            complete : function(){off=true;}
*/!*			
});
			nowX = nowX + angle;
		}
	}

Последний раз редактировалось рони, 09.10.2015 в 22:19.
Ответить с цитированием
  #9 (permalink)  
Старый 09.10.2015, 22:23
Профессор
Отправить личное сообщение для xTODx Посмотреть профиль Найти все сообщения от xTODx
 
Регистрация: 04.02.2014
Сообщений: 167

Действительно работает
Ответить с цитированием
  #10 (permalink)  
Старый 09.10.2015, 22:26
Профессор
Отправить личное сообщение для xTODx Посмотреть профиль Найти все сообщения от xTODx
 
Регистрация: 04.02.2014
Сообщений: 167

из идей, по поводу того, чтобы текст был всегда правильно повёрнутым, есть идея - поворачивать его тогда, когда уже повернул кубик. Т.е. на соседних гранях он уже будет правильным.
Ноо..
нужно тогда сделать как-то отслеживание положения куба.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Пасоны, как правильно парсить параметры? megaupload Оффтопик 15 05.05.2013 14:44
Как правильно прицепить обработку события slowklg Events/DOM/Window 6 15.03.2012 16:20
Как правильно очистить maxlength в input? Маэстро Events/DOM/Window 10 22.06.2011 18:14
Подскажите как правильно оформить код frolvict Общие вопросы Javascript 4 30.04.2010 10:51
Как правильно оформить Send() Алекс97 AJAX и COMET 20 30.10.2008 19:19