Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Проблемы с анимацией (https://javascript.ru/forum/misc/13673-problemy-s-animaciejj.html)

monolithed 26.12.2010 10:18

Цитата:

Сообщение от Kolyaj
Клик прекрасно сработает во время анимации.

Согласен, потому как есть пример (таймер тоже один):

<script type="text/javascript">
window.onload = function(){
    var elem = document.getElementsByTagName('div')[0], i = l = 120, j = k = 0;
    elem.onclick = function(){
        if(k!=0) {
            i = -l;
            return false;
        }
        (function(){
            if(i>=k){
                elem.style.top = --i +'px'; j = i; k = 1;
            }
            else {
                elem.style.top = ++j +'px';
                if(++j>=l) i = l;
            }
            window.setTimeout(arguments.callee, 15);
        })();
        return false;
    };
};
</script>

<div style="background: #0095FF; position: absolute; width: 30px; height: 30px; top: 120px"></div>


Цитата:

Сообщение от Kolyaj
При данном коде подъём и падение будут происходить одновременно.

это же jQuery, там все не так.:)

x-yuri 26.12.2010 10:23

Цитата:

Сообщение от monolithed
это же jQuery, там все не так.

дело не в "все не так". Это только Kolyaj заметил и вряд ли у нее был такой код - похоже не опечатку

dmitriymar 26.12.2010 10:52

Цитата:

Сообщение от x-yuri
p.s. скажи честно, ты умеешь признавать свои ошибки?

ошибки я могу признавать-только где здесь мои ошибки. пересмотри первые страницы-ошибки всех подряд-причём у людей с бешеной кармой.
да вот в том то и момент что если браузер не выдаёт предложение закрыть-то событие он игнорирует. пример этого -предпоследний "рабочий "-фф через раз его критически закрывает. и вопрос как работает дураказащита в браузерах в подобных ситуациях-в пресечениях,незнаю наверное введу новый термин-но в коде изначальном появляются ещё отложенные пресечения-так вот вопрос обрабатываются все они или часть просто отбрасывается? не думаю что ктото сможет дать однозначный ответ. и не важно таймеры или события ещё работают а таймер опять запустился вызывающий их и в этот момент момент ещё добавляются события. взять допустим два таймера сработавшие одновременно и тянущие элемент в разные стороны(на большое расстояние). в какой последовательности они сработают? сработают ли вообщее? как они сработают? будет ли критическая ошибка? в каких браузерах будет одно действие в каких другое?
что имеет больший приоритет-выполняемое действие? действие по таймеру,возникающие событие? какой приоритет у них будет при постановке в очередь? какие возможно станут?-никто об этом не знает.
и если бы не было этого кода изначально ошибочного во всех своих строках(помимо ошибок алгоритма-он не соответствует её заданию ну никак-это я о моментальном падении при клике)-эта тема здесь бы никогда не возникла. могу поспорить что подобная ситуация не рассматривается не в одной книге и не в одном учебном заведении.
рассмотрение этого на уровне рассмотрения пишущих браузеры-ситуация продумывания дуракозащиты:yes:

dmitriymar 26.12.2010 10:54

Цитата:

Сообщение от x-yuri
Это только Kolyaj заметил и вряд ли у нее был такой код - похоже не опечатку

именно такой код у неё и был. ну даже если представить что вместо 40000 у неё 4000. всё равно таймер "должен" запуститься 5 раз пока сработают 2 анимейта
исправил) -забыл слово должен

monolithed 26.12.2010 10:59

dmitriymar
Мне кажется, что если задать эти вопросы Дмитрию Сошникову, то он с удовольствием на них ответит.

dmitriymar 26.12.2010 11:02

Цитата:

Сообщение от monolithed
Согласен, потому как есть пример (таймер тоже один):

да он работает и срабатывает-но ты ведь каждые 15 милисекунд сдвигаешь контейнер на 1 точку. код у тебя выполняется быстрее 15 милисекунд. и появляется окно когда не выполняется никакой скрипт -окно для обработки он клик. клик на мыши(изо физиологии длится ведь дольше 15 милесекунд)-нет у нас таких скоростей движения пальцами.
за твой код я ничего не говорю-в твоём коде (условно провожу аналогии) реализованы "прерывания" на опрос и обработку событий-тем что(опять скажу цикл) движения работает меньший промежуток времени чем промежуток времени через какой таймер его опять вызовет. но ведь он ничего общего не имеет с той ситуацией что рассматривается)

dmitriymar 26.12.2010 11:26

Цитата:

Сообщение от monolithed
это же jQuery, там все не так.

да чего там не так? то что обаратывачивает скрипт в свои операторы-так от этого он не быстрее выполняется а медленнее. условно его можно сравнить с языком высокого уровня а скрип с языком низкого. уровня.всёравно что сравнивать бейсик с ассемблером-ассемблер сложнее быстрее но в конечном итоге даёт больше возможностей и позволяет сделать то что бейсик никогда не сможет.хотя на первый взгляд так бедно выглядит по сравнению с бейсиком....

x-yuri 26.12.2010 11:53

Цитата:

Сообщение от dmitriymar
ошибки я могу признавать-только где здесь мои ошибки. пересмотри первые страницы-ошибки всех подряд-причём у людей с бешеной кармой.

хорошо, давай попробуем...

Цитата:

Сообщение от vyazovetskova
function goes_up(){
$('#idl').animate({top:'-=180'},40000);//подъем
$('#id').animate({top:'+=180'},1000);//падение
};
setInterval(goes_up, 100);//бесконечный подъем и падение

Цитата:

Сообщение от exec
(function () {
var callee = arguments.callee;
$("#id").animate({
top: "+=180px"
}, 3000, function () {
$(this).animate({
top: "-=180px"
}, 3000, callee);
});
})();

Цитата:

Сообщение от dmitriymar
ну и не упадёт никогда по клику. пока цикл не закончится опросов и других любых действий не будет

ты чей цикл имел в виду?

dmitriymar 26.12.2010 11:59

function goes_up(){
$('#idl').animate({top:'-=180'},40000);//подъем
$('#id').animate({top:'+=180'},1000);//падение
};
setInterval(goes_up, 100);

dmitriymar 26.12.2010 12:02

Цитата:

Сообщение от exec
exec exec на форуме
Профессор
Карма: +843
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
Регистрация: 21.01.2010
Сообщений: 966

Цитата выделенного
dmitriymar, на

показать чистый исходник в новом окнеСкрыть/показать номера строкпечать кода с сохранением подсветки
01 <div id='foo' style='width: 50px; height: 50px; position: absolute; background: #555555'>
02 </div>
03
04 <script type='text/javascript'>
05 window.onload = function () {
06 function delta(progress) {
07 function d(progress) {
08 for(var a = 0, b = 1, result; 1; a += b, b /= 2) {
09 if (progress >= (7 - 4 * a) / 11)
10 return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
11 }
12 }
13 return 1 - d(1 - progress);
14 }
15
16 document.getElementById("foo").onclick = function () {
17 var E = this;
18 this.onclick = new Function;
19 (function (toTop, from, to) {
20 var start = new Date().getTime(),
21 callee = arguments.callee;
22 setTimeout(function () {
23 var progress = (new Date().getTime() - start) / 1000;
24 E.style.top = ((to - from) * (toTop ? progress : delta(progress)) + from) + "px";
25 if (progress < 1)
26 setTimeout(arguments.callee, 13);
27 else
28 callee(!toTop, toTop ? 0 : 180, toTop ? 180 : 0);
29 }, 13);
30 })(false, 0, 180);
31 };
32 };
33 </script>


Просто интересно узнать, что опять не так.

это по поводу второго кода что ты привёл -я его тогда вообще не рассматривал-я рассматривал код человека выложевшего вопрос.
но по поводу кода привёдённого им-вторым постом в этом топике-привожу код какой он положил со всеми доработками-и посмотри коменты к нему.так что думаю что и первый код какой он привёл-не соответветсвует задаваемому вопросу-точнее на нём не возможно сделаить реализацию того что она хотела

dmitriymar 26.12.2010 12:09

x-yuri,
можеш не приводить мне примеры на дждиквери-я его заведомо отказался изучать. понять могу что написано что на нём но на это нужно время. всё что на нём легко сделать-всё тоже можно на скрипте.ну да кода больше-ну дак он используется повторно и позволяет делать то чего не может джиквери

dmitriymar 26.12.2010 12:50

Цитата:

Сообщение от x-yuri
(function () {
var callee = arguments.callee;
$("#id").animate({
top: "+=180px"
}, 3000, function () {
$(this).animate({
top: "-=180px"
}, 3000, callee);
});
})();

по поводу этого сказать ничего не могу-во первых с джиквери не хочу голову морочить и Вторых-значение таймера здесь не присутствует вызывающего функцию. так что всё может быть-только ведь даж если не будет ошибки с таймером-ронять он будет только с верхней точки(если событе он клик вклинится между анимейтами-вклинится или нет -не знаю-но наверное наврядли)-так что вероятнее всего никогда не уронит- поскольку событие роняния может выполнится когда контейнер будет и так в нижней точке.знаю могу налететь на возражение -что может упасть ещё ниже-но этот вариант не рассматриваю поскольку он противоречит условиям задачи. и его выполнение будет означать неправильное решение задачи-не соответствие условиям

x-yuri 26.12.2010 13:33

ну так у exec такая большая карма, потому что всем влом его код читать :) а если серьезно, то где там проблема? Его скрипт упрощенно работает так:
setTimeout(function(){
    <сдвигаем квадрат>
    setTimeout(arguments.callee, 13);
}, 13)

по такой же схеме работает анимация в jQuery. А чтобы не осталось никаких сомнений я добавил возможность остановить квадрат:
<div id='foo' style='width: 50px; height: 50px; position: absolute; background: #555555'>
</div>

<script type='text/javascript'>
window.onload = function () {
function delta(progress) {
     function d(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);
        }
     }
     return 1 - d(1 - progress);
}

	document.getElementById("foo").onclick = function () {
		var E = this;
		var timerId;
		this.onclick = function(){
			clearTimeout( timerId );   // !!! останавливаем квадрат
		};
		var go = function( toTop, from, to ){
			var start = new Date().getTime(),
			callee = arguments.callee;
			timerId = setTimeout(function () {
				var progress = (new Date().getTime() - start) / 1000;
				E.style.top = ((to - from) * (toTop ? progress : delta(progress)) + from) + "px";
				if (progress < 1)
					timerId = setTimeout(arguments.callee, 13);
				else
					callee(!toTop, toTop ? 0 : 180, toTop ? 180 : 0);
			}, 13);
		};
		go(false, 0, 180);
	};
};
</script>

dmitriymar 26.12.2010 13:37

Цитата:

Сообщение от dmitriymar
.animate({
top: "+=180px"
}, 3000,

ты об этом?

dmitriymar 26.12.2010 13:39

запарился-ща гляну -вполне может быть что он код изменил ещё тогда и я не глянув его перепечатал

x-yuri 26.12.2010 13:39

нет, ты же сказал не упоминать jQuery. И ты похоже игнорируешь ссылки "Посмотреть исходный код"... приведу его нескрытым

<div id='foo' style='width: 50px; height: 50px; position: absolute; background: #555555'>
</div>

<script type='text/javascript'>
window.onload = function () {
function delta(progress) {
     function d(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);
        }
     }
     return 1 - d(1 - progress);
}

	document.getElementById("foo").onclick = function () {
		var E = this;
		var timerId;
		this.onclick = function(){
			clearTimeout( timerId );   // !!! останавливаем квадрат
		};
		var go = function( toTop, from, to ){
			var start = new Date().getTime(),
			callee = arguments.callee;
			timerId = setTimeout(function () {
				var progress = (new Date().getTime() - start) / 1000;
				E.style.top = ((to - from) * (toTop ? progress : delta(progress)) + from) + "px";
				if (progress < 1)
					timerId = setTimeout(arguments.callee, 13);
				else
					callee(!toTop, toTop ? 0 : 180, toTop ? 180 : 0);
			}, 13);
		};
		go(false, 0, 180);
	};
};
</script>

x-yuri 26.12.2010 13:42

Цитата:

Сообщение от dmitriymar
запарился-ща гляну -вполне может быть что он код изменил ещё тогда и я не глянув его перепечатал

теоретически возможно, если бы не одно "но": в этой теме все знают, что анимация делается с помощью setTimeout. Я это гарантирую!!!111 :)

dmitriymar 26.12.2010 13:43

кликни по контейнеру когда он будет двигаться в любую сторону-никакой реакции. кликни по нему два раза подряд-браузер рухнет.код я просматривал-посмотри там за ним коменты-но я в него не вчитывался-смысл если по работе примера видно что он не рабочий-говорю о браузере фф

dmitriymar 26.12.2010 13:47

опять приходим к к тому что такое анимация.простите если я изменение координат контейнера в пространстве организую в цикле(допустим от х=10 до х=50). а реализацию того чтобы это движение было видно полностью а не только начало и конец-реализую введением в тело цикла-прокруткой пустого цикла.это будет не анимация?

dmitriymar 26.12.2010 13:50

Цитата:

Сообщение от x-yuri
теоретически возможно, если бы не одно "но": в этой теме все знают, что анимация делается с помощью setTimeout. Я это гарантирую!!!111

знать то знают -но как реализуют? допуская косяки в построении алгоритма?))) ну я знаю что в ракете есть двигатель-но знание того это недостаточно будет мне(я так думаю) чтобы построить правильно рабочую ракету.:haha: -это я абстрактно ответил на то что все знают-но творят глупости:yes:

x-yuri 26.12.2010 13:54

для начала, если ошибка в том, что он не реализовал возможность ронять квадрат по клику - тогда да, он это не реализовал. Я это добавил к его коду и оно у меня работает

но, я так понимаю, к его коду осталась единственная претензия - он приводит к тому, что firefox некорректно завершает работу. Только у меня и его код работает, и доделанный мной вариант и ничего не роняется. Те кто в теме, а у вас? Больше похоже, что это не связано со скриптом exec. У тебя есть идеи, что не так в его коде, из-за чего падает firefox?

dmitriymar 26.12.2010 13:56

ну и смысл моего поста был-что то что она хочет в её случае никогда не сможет реализоваться при таком алгоритме.-ошибка с таймером-это приводит к отсутствию раеакции на он клик-причина первая
и то что пока анимейт весь не выполниться-не будет реакции на на он клик-то есть падения. ей же нужно падение с любой точки. и вместо того чтобы прочитать то что я написал-и глянуть на эти грубые ошибки в её алгоритме-все наперебой мне начали доказывать что они п..е мультипликаторы и браузероразработчики. удивляюсь что фраза не прозвучала что анимация это русалочки и т.д и без двд она никак:write:

dmitriymar 26.12.2010 13:59

ты сам сказал что его код никто не в состоянии дочитать до конца.. не реализовал говоришь-почитай посты перед ним-от него. он считает что падение он реализовал. -если идти по логической цепочке пред сообщений-не читая его код

dmitriymar 26.12.2010 14:03

не знаю изза чего-и у меня и монолита тогда браузеры рухнули

monolithed 26.12.2010 14:03

dmitriymar, x-yuri я честно не понимаю уже о чем эта тема, что сделать чтобы вы прекратили эту полемику?

Цитата:

Сообщение от dmitriymar
не знаю изза чего-и у меня и монолита тогда браузеры рухнули

он вроде потом поправил код (не помню уже)

dmitriymar 26.12.2010 14:09

Цитата:

Сообщение от monolithed
dmitriymar, x-yuri я честно не понимаю уже о чем эта тема, что сделать чтобы вы прекратили эту полемику?

тоже самое хотел спросить у тебя что сделать чтобы она прикратилась-и так уже давно пришли к концу-но мне всё равно пытаются даказать что я не прав....:(

x-yuri 26.12.2010 14:52

Цитата:

Сообщение от dmitriymar
ну и смысл моего поста был-что то что она хочет в её случае никогда не сможет реализоваться при таком алгоритме.-ошибка с таймером-это приводит к отсутствию раеакции на он клик-причина первая
и то что пока анимейт весь не выполниться-не будет реакции на на он клик-то есть падения. ей же нужно падение с любой точки.

ну ты ж сам сказал, что не знаешь jQuery. Зачем же говоришь о том, чего не знаешь? Хотя я объяснил, как работает jQuery. Вот добавил onclick к ее реализации:
<!DOCTYPE HTML>
<html>
  <head>   
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script src="my.js"></script>
  </head>
  <body>

<div id="id" style="
    position: absolute;
    top: 80px;
    width: 50px;
    height: 50px;
    background: red;
"></div>

<script type="text/javascript">
function goes_up(){
$('#id').animate({top:'-=80'},40000);//подъем
$('#id').animate({top:'+=80'},1000);//падение


};
setInterval(goes_up, 100);//бесконечный подъем и падение
$('#id').click(function(){
    $(this).stop(true).animate({top: '80'}, 0);
});
</script>


  </body>
</html>

здесь есть один нюанс. Но это не верно: "это приводит к отсутствию раеакции на он клик", "пока анимейт весь не выполниться-не будет реакции на на он клик-то есть падения". Ну хоть здесь ты согласен, что не прав?

Цитата:

Сообщение от dmitriymar
почитай посты перед ним-от него. он считает что падение он реализовал.

возможно, он неправильно понял задание. Но сама анимация у него нормально реализована

Цитата:

Сообщение от monolithed
dmitriymar, x-yuri я честно не понимаю уже о чем эта тема, что сделать чтобы вы прекратили эту полемику?

ну, это довольно сложно. Для этого надо, чтобы dmitriymar признал, что он был не прав :) Есть еще один способ, но я вам о нем не расскажу, вот...

dmitriymar 26.12.2010 14:59

Цитата:

Сообщение от x-yuri
setInterval(goes_up, 100);//бесконечный подъем и падение
$('#id').click(function(){
$(this).stop(true).animate({top: '80'}, 0);

но ты ведь раелизовал остановку функции выполняймой по таймеру-она же не реализовывала остановку-ты изменил алгоритм-ввел зис -у неё её не было.. так что ты опять перекручиваеш чуть.-мы говорим о её алгоритме без зис стоп и т.д.
способ-можно сломать тебе пальцы чтобы ты не мог печатать-вот всё и остановится.)))
дак я и не говорю что не нормально -движение -опрос-движение-это я помоему с самого начала говорил

dmitriymar 26.12.2010 15:11

Цитата:

Сообщение от vyazovetskova
Старый 09.12.2010, 14:02
vyazovetskova vyazovetskova вне форума
Новичок на форуме
Карма: 0
Отправить личное сообщение для vyazovetskova Посмотреть профиль Отправить письмо по электронной почте для vyazovetskova Найти все сообщения от vyazovetskova
Регистрация: 08.12.2010
Сообщений: 9

Цитата выделенного
dmitriymar,
Правильно ли я понимаю:
Делаем цикл:
Подвинем немного, проверим, кликали ли;
Если кликали, то уроним элемент; если нет, то подвинем вверх.
Так?

чем то что я говорил отличается от его алгоритма? а это было сказанно гораздо раньше публикации его алгоритма.

x-yuri 26.12.2010 15:19

Цитата:

Сообщение от dmitriymar
но ты ведь раелизовал остановку функции выполняймой по таймеру-она же не реализовывала остановку-ты изменил алгоритм-ввел зис -у неё её не было.. так что ты опять перекручиваеш чуть.-мы говорим о её алгоритме без зис стоп и т.д.

я сужу по коду, который она привела. И твои слова "это приводит к отсутствию раеакции на он клик", "пока анимейт весь не выполниться-не будет реакции на на он клик-то есть падения" воспринимаю, как "обработчик onclick не запустится". Обработчик onclick запустится, просто без stop это не будет видно неискушенному наблюдателю :lol:
<!DOCTYPE HTML>
<html>
  <head>   
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script src="my.js"></script>
  </head>
  <body>

<div id="id" style="
    position: absolute;
    top: 80px;
    width: 50px;
    height: 50px;
    background: red;
"></div>

<script type="text/javascript">
function goes_up(){
$('#id').animate({top:'-=80'},40000);//подъем
$('#id').animate({top:'+=80'},1000);//падение


};
setInterval(goes_up, 100);//бесконечный подъем и падение
$('#id').click(function(){
    $(this).animate({top: '80'}, 0);
    alert('click');
});
</script>


  </body>
</html>

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

x-yuri 26.12.2010 15:20

Цитата:

Сообщение от dmitriymar
чем то что я говорил отличается от его алгоритма? а это было сказанно гораздо раньше публикации его алгоритма.

ну когда мы знаем, что ты под этими словами подразумеваешь - да, ты все правильно сказал. Просто не удивляйся, что тебя не понимают, когда используешь свою терминологию ;)

dmitriymar 26.12.2010 15:27

а в какой очереди выстроиться?пока анимейт 40 раз в очередь станет при одном проходе вверх вниз.
x-yuri,ну вот ты написал алгоритм и мой первый пост в этой теме-ответь для себя-упадёт ли он когда нибудь при этом алгоритме по клику? и опять ты чуть перекрутил слова мои-когда я говорил что не обработается он клик-я тогда (найди историю переписки)имел в виду именно ту ситуацию что таймер запускается когда функция ещё не отработала.
мои слова-отсутсвие реакции на он клик в этом случае-она будет заметна без алерт?не будет заметна-и участок кода реагирующий на он клик-никогда не выполниться-соответсвено реакции на он клик -не будет. и что имеет больший приоритет-таймер или клик?не будут ли копится клики в низу стека? и если будут копится внизу-может копятся(и очередь до них никогда не дойдёт) мож не попадают -проверять не особо хочется-тратить время на чушь подобную. главное знать что при подобном обработки не будет да и всё. ну и фиксация события(алерт и стоп-имеют больший приоритет чем функции простые-иначе было бы по клику заметно припадение-поскольку скорость падения выше чем подъёма) и его обработка это разные вещи


Часовой пояс GMT +3, время: 08:07.