Autor Zpráva
woric19
Profil
Ahoj,

nejsem přeborník v oblasti JS nebo Ajax ale snažil jsem se najít a nenašel pro mě srozumitelný návod na vytvoření animace, levitující ve vzduchu částic (třeba: peří).
Chtěl bych si vyzkoušet a naučit,
požadavkem a to jediným je aby se třeba IMAGE1 pohyboval s bodu A do B, C a tam zpět. NO a by to nebylo náročné extra na načítaní :-)
Pokud něco takového je, budu vděčný za rady!


Dík :-)
1Pupik1989
Profil
Přečtěte si o funkci animate(), ta myslím vystihne vše.
woric19
Profil
Četl jako první, jen jsem nedokazal se svými znalostmi získat funkční rotaci bez klikání.
1Pupik1989
Profil
Samotná rotace předmětu bude složitéjší. Půjde jen s CSS3, takže jak komu. Na to je funkce rotate(). Tohle bych vyřešil spíš rotujícím předmětem jako animací v gifu. Pak už jen měnit position a létá identicky jako s rotací v jquery, akorát to půjde každému
Chamurappi
Profil
Reaguji na 1Pupika1989:
Půjde jen s CSS3, takže jak komu. Na to je funkce rotate().
Ta je napsaná docela nešikovně, když neumí zařídit rotace i v Exploreru 5.5 a vyšším. Jediné, co dělá, je zkombinování proprietárních prefixů s transformem. Určitě se najdou mnohem lepší hotové skripty.


Reaguji na worice19:
nejsem přeborník v oblasti JS nebo Ajax
Asynchronní komunikaci se serverem na animace opravdu nepotřebuješ.

požadavkem a to jediným je aby se třeba IMAGE1 pohyboval s bodu A do B, C a tam zpět
Skript může dynamicky upravovat styly, to je skoro všechno, co při animacích dělá. Takže si vezmeš rozdíl souřadnic mezi body A a B a nastavíš každých pár desítek milisekund odpovídající mezistav.
woric19
Profil
Děkuji moderátorovi a 1Pupik1989 za projevený zájem na tématem, po testech nad řešením sem vyložím sám příklad a popis pro další zájemce nad řešením pro své učely.
1Pupik1989
Profil
Otázka je, pokud ten obrazec má chodit uhlopříčkami, nebo různými úhly. Vyzkouším si to taky na arkanoidu, tam je to potřeba a kdyžtak hodím co jsem vymyslel.
Witiko
Profil
Chamurappi:
Určitě se najdou mnohem lepší hotové skripty.
To není bez zajímavosti, vzhledem k tomu, že IE filtry dovolují rotaci pouze po 90 stupních. Máš na mysli něco konkrétního (bez použití plug-inů)?

nastavíš každých pár desítek milisekund odpovídající mezistav.
Případně to v případě webkitu můžeš nechat na css samotném.
Chamurappi
Profil
Reaguji na Witika:
vzhledem k tomu, že IE filtry dovolují rotaci pouze po 90 stupních
Dovolují klasickou maticovou transformaci, tedy libovolné rotace i sešikmení. Funguje to teprve jedenáct let. Škoda, že konkurence neimplementovala filter a musí se to v zájmu standardizace psát všechno trojmo.

to v případě webkitu můžeš nechat na css samotném
Za cenu toho, že to bude muset dělat a případně pak upravovat dvojmo.
Witiko
Profil
Chamurappi:
Dovolují klasickou maticovou transformaci, tedy libovolné rotace i sešikmení. Funguje to teprve jedenáct let. Škoda, že konkurence neimplementovala filter a musí se to v zájmu standardizace psát všechno trojmo.
Ano, o tom vím, rozdíl je ale v tom, že se transformuje pouze vnitřek elementu, samotný element se neotáčí. Vše, co při rotaci "přesahuje" okraj svého layoutu, je utnuto. Druhým problémem, na který jsem při animování tímto způsobem narazil, je vyhazování výjimek při přiřazování do matice. Tzn.:
function setAngle(element, angle) {
  /* Spočítáme si hodnoty transformace */
  var sin, cos, item,
      x = element.offsetWidth / 2,
      y = element.offsetHeight / 2;
  if(angle < 0) angle = angle % 360 + 360
  if(angle >= 360) angle %= 360;
  angle = angle / 180 * Math.PI;
  sin = Math.sin(angle);
  cos = Math.cos(angle);
  
  if(/progid:\s*DXImageTransform\.Microsoft\.Matrix\(.*\)/i.test(element.style.filter) &&
    (item = element.filters.item("DXImageTransform.Microsoft.Matrix"))) {
    /* Filtr již byl aplikován */
    if(angle > 0) {
        /* Zaneseme nové hodnoty */
        item.M11 = cos;
        item.M12 = -sin;
        item.M13 = x;
        item.M21 = sin;
        item.M22 = cos;
        item.M23 = y;
        item.M33 = 1;
      } else {
        /* Odstraníme filtr z kolekce */
        element.style.filter = element.style.filter.replace(/progid:\s*DXImageTransform\.Microsoft\.Matrix\(.*\)/ig,"");
      }
  } else {
    /* Vytvoříme nový záznam filtru */
    element.style.filter += "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos +
                                                                    ",M12=" + (-sin) +
                                                                    ",M13=" + x +
                                                                    ",M21=" + sin +
                                                                    ",M22=" + cos +
                                                                    ",M23=" + y +
                                                                    ",M33=1)";
  }
}

Na řádku 19 vyhazuje při volání MSIE blíže nespecifikovanou chybu.

Za cenu toho, že to bude muset dělat a případně pak upravovat dvojmo.
Webkit nebo autor? Pokud autor, tak jsem měl na mysli přístup a generování těchto animací pomocí scriptu. Stačí oba přístupy skrýt pod jeden interface a jestli se animace provádí ručně nebo ne už uživatel dané metody nemusí zkoumat.
_es
Profil
Witiko:
Na řádku 19 vyhazuje při volání MSIE blíže nespecifikovanou chybu.
Parameter M13 si vzal skadiaľ, tu ani tu o ňom nič nie je. Ani výpočet ostatných „M“ parametrov sa mi nezdá.

Vše, co při rotaci "přesahuje" okraj svého layoutu, je utnuto.
Na to by mal byť parameter SizingMethod.
Witiko
Profil
_es:
Obecná transformační matice?


Pakliže neaplikuji x a y, bude střed rotace v rohu elementu, ne uprostřed.
_es
Profil
Witiko:
Elementární transformace, Rotace (otočení)
Parametre x a y z tvojej matice sú nazvané Dx a Dy, je v tom prvom odkaze v [#11].
Witiko
Profil
_es:
Je tomu tak, díky. Výsledný kód, který funguje:
function setAngle (element, angle) {
  var sin, cos,
      basicImageFilter = element.filters["DXImageTransform.Microsoft.BasicImage"],
      matrixFilter = element.filters["DXImageTransform.Microsoft.Matrix"];
  if(angle < 0) angle = angle % 360 + 360
  if(angle >= 360) angle %= 360;
  
  if(angle % 90 === 0) {
    /* Pakliže je úhel násobkem 90 stupňů, vystačíme si s filtrem BasicImage */
    if(matrixFilter !== undefined) {
      element.style.filter = element.style.filter.replace(/progid:\s*DXImageTransform\.Microsoft\.Matrix\(.*\)/ig,"");
    }
    if(basicImageFilter !== undefined) {
      /* Zaneseme nové hodnoty */
      basicImageFilter.rotation = angle / 90;
    } else {
      /* Vytvoříme nový záznam filtru */
      element.style.filter += "progid:DXImageTransform.Microsoft.BasicImage(rotation=" + (angle / 90) + ")";
    }
  } else {
    /* Pro složitější úhly použijeme maticovou transformaci */
    angle = angle / 180 * Math.PI;
    sin = Math.sin(angle);
    cos = Math.cos(angle);
    if(basicImageFilter !== undefined) {
      element.style.filter = element.style.filter.replace(/progid:\s*DXImageTransform\.Microsoft\.BasicImage\(.*\)/ig,"");
    }
    if(matrixFilter !== undefined) {
        /* Spočítáme si hodnoty transformace a zaneseme nové hodnoty */
        matrixFilter.M11 = cos;
        matrixFilter.M12 = -sin;
        matrixFilter.M21 = sin;
        matrixFilter.M22 = cos;
        matrixFilter.sizingMethod = "auto expand";
    } else {
      /* Vytvoříme nový záznam filtru */
      element.style.filter += "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos +
                                                                      ",M12=" + (-sin) +
                                                                      ",M21=" + sin +
                                                                      ",M22=" + cos +
                                                                      ",sizingMethod='auto expand')";     
    }
  }
}

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: