Weboldalunk cookie-kat használhat, hogy megjegyezze a belépési adatokat, egyedi beállításokat, továbbá statisztikai célokra és hogy a személyes érdeklődéshez igazítsa hirdetéseit. További információ
Kezdőoldal » Számítástechnika » Programozás » Hogyan tudnék egy CSS-el...

Hogyan tudnék egy CSS-el animált (össze-vissza forgó) dobó kockát random 6 fix pozícióban gombnyomásra megállítani?

Figyelt kérdés
Ha valaki eltudná küldeni a kódot nagyon megköszönném.

aug. 6. 00:09
1 2
 1/15 anonim ***** válasza:
100%
Például úgy, hogy nem @Keyframes animationnal mozgatod, hanem időzített ciklusból, JS-ből adod meg neki a pozíciókat, és a pozik között pedig CSS transitionnel teszed simává a mozgást. A gombra meg nyilván rákötsz egy event listenert, és ha elsül, megállítod a ciklust.
aug. 6. 04:12
Hasznos számodra ez a válasz?
 2/15 anonim ***** válasza:
100%

Visszavonom az előző kommentemet, van rendes és egyszerű módja pause-olni a CSS animationt, itt a leírás és működő példa is van rá:


[link]

aug. 6. 04:29
Hasznos számodra ez a válasz?
 3/15 anonim ***** válasza:
Ha kifejezetten bizonyos pozíciókban akarod megállítani, akkor egy kis csalást javaslok: állíts be neki CSS-el végtelen pörgés-forgás animációt, majd a gombnyomásra állíts elő egy véletlenszámot 1 és 6 között, állítsd le az animációt, és CSS transitionnal forgasd bele a véletlenszerűen kiválasztott 6 pozíció egyikébe.
aug. 6. 22:15
Hasznos számodra ez a válasz?
 4/15 A kérdező kommentje:
3-as, hogy kell leállítani, mert csak szüneteltetni sikerült?
aug. 7. 19:32
 5/15 A kérdező kommentje:

1-es megoldás működhet.

2-es nem jó a pause, mert nem a megfelelő helyre pozíciónál.

aug. 7. 19:35
 6/15 anonim ***** válasza:

(az első 3 válaszoló is én voltam)


Akkor legyen úgy, hogy beállítasz egy intervalt ami mondjuk fél másodpercenként fut le, és ez beállít a kockán a hatból egy random pozíciót. CSS-ből előírod, hogy a forgatás lineáris translate-tel legyen, fél másodperces lefutással. Az intervalt addig ismétled, amíg gombnyomás nem történik, akkor leállítod. Így folyamatos, sima lesz a forgás a gombnyomásig, akkor befordul egy random poziba a 6 közül és úgy marad.


Így egyáltalán nem is lesz szükség CSS animationre.

aug. 7. 19:41
Hasznos számodra ez a válasz?
 7/15 A kérdező kommentje:
Ez már jó lehet, köszi.
aug. 7. 20:01
 8/15 A kérdező kommentje:
Javascriptben, hogy tudnám megforgatni?
aug. 7. 20:58
 9/15 anonim ***** válasza:
A CSS classokat cserélgeted rajta a JS-sel. .pozi1 .pozi2 ... .pozi6
aug. 7. 23:42
Hasznos számodra ez a válasz?
 10/15 anonim ***** válasza:

Vagy még jobb, ha számon tartod a három dimenzió szerinti elforgatásokat változóban, és mindig csak az egyiket inkrementálod. Így folyamatosabb lesz a mozgás, minden ciklusban csak 90 fokot fordul vmelyik tengelyen.

Ez esetben ne adj neki classokat, hanem direktben forgasd JS-sel.

aug. 8. 00:13
Hasznos számodra ez a válasz?
1 2

További kérdések:





Minden jog fenntartva © 2022, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | WebMinute Kft. | Facebook | Kapcsolat: info@gyakorikerdesek.hu

A weboldalon megjelenő anyagok nem minősülnek szerkesztői tartalomnak, előzetes ellenőrzésen nem esnek át, az üzemeltető véleményét nem tükrözik.
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!