[DL]Animacja poklatkowa

[bnmbb]

A więc jak zrobić animację poklatkową mając obrazek jak w załączniku i żeby jeszcze cyfry pokazały się ładnie po kolei ?

 

Tu z pomocą przychodzi nam JavaScript :].

Tak trochę z nim popisałem i wyszło mi coś takiego :

<script type="text/javascript">
var klatka_per, animacja ,fixed_klatka, row, rows, animacja_wd, animacja_he, interwal;

function play() {
klatka_per = document.getElementById("time_per_klatka").value;
animacja = document.getElementById("animate");
fixed_klatka = klatka_per;
row = document.getElementById("poziomo").value;
rows = document.getElementById("pionowo").value;
//##################################################
animacja_wd = row * parseInt(animacja.style.width);
animacja_wds = animacja_wd;
animacja_he = rows * parseInt(animacja.style.height);
animacja_hes = animacja_he;

interwal = setInterval('animacja.style.backgroundPosition =  animacja_wds+"px "+animacja_hes+"px"; animacja_wds=animacja_wds - parseInt(animacja.style.width); if(animacja_wds <= 0) { animacja_wds = animacja_wd; animacja_hes = animacja_hes - parseInt(animacja.style.height); } if(animacja_hes == 0) { animacja_hes = animacja_he; animacja_wds = animacja_wd; clearInterval(interwal); }', klatka_per);
}
</script>
<style type="text/css">
.animacja {
background-image: url('freeze_0.bmp');
}
</style>
<div class="animacja" style="width: 80px; height: 80px;" id="animate"></div><br>
czas w milisekundach na klatkę : <input type="text" id="time_per_klatka"><br>
Klatka posiada <input type="text" id="poziomo" value="3" style="width: 30px;"> klatek poziomo i <input type="text" id="pionowo" value="3" style="width: 30px;"> klatek w pionie<br>
<a OnClick="play();">(Odtwórz)</a><br>
Created by Kongo. All rights reserved. Kongo 2011<br>
<a href="http://kongo.webege.com/">Strona autora</a>

 

pewnie ktoś się spyta jak to skonfigurować

A więc proste :

Przechodzimy do 21 linijki - mamy tu background-image. Więc ustawiamy adres obrazka :].

Ale to nie wszystko !

Przechodzimy na 24 linijkę z div'em mamy tam podane w stylu width i height. Ustawiamy je na rozmiary JEDNEJ klatki .

Później wchodzimy na stronę ustawiamy ile to ma klatek i rzędów + ile milisekund dać na jedną klatkę (1000 ms = 1s) i klikamy odtwórz .

 

Wiem ,że nikomu się to nie przyda ,ale akurat do moich kolejnych gier będzie to pomocne

PS: Proszę nie usuwać stopki

 

ZMIENIONO ! WDARŁ MI SIĘ MAŁY BŁĄD

[kam100ban]

Do shakesa się przyda :P dzięki

[bartek93]

no, jak mu zawracałeś tym głowę A po drugie co ci się stało że na forum tak ambitnie się udzielasz, może czas coś napisać do projektu?

[bnmbb]

Nie zawracał mi tym głowy bartek . Po prostu zrobiłem to dla naszych grafików ,ale pomyślałem ,że komuś też się przyda.

 

I co go poganiasz z projektem ? Zainstalowałeś Apacha itd. na VPS ^.- ?

[bartek93]

Ha, dopiero nie dawno udało mi się zrobić upgrade zrobić teraz myślę co dać. Apache czy lighttpd?

[Scolari]

NGINX + Apache.

A co do grafiki, animate().

[bnmbb]

chodzi ci o Animate z JQuery ? W sumie można i by użyć . Nie pomyślałem. Ale jakoś co do animacji w JQuery nie mam zbyt zaufania i to przez funkcję Fade... - manipuluje własnością opacity w CSS. No tak tu racja - ,ale nie uwzględniono animacji na obiektach ,które już wcześniej otrzymały atrybut opacity.