Bu yazımda APP INVENTOR kullanarak bir uygulama yaptım. APP INVENTOR ile uygulama yaparken genelde durağan TEXTBOX ya da LABEL gibi araçları kullanırız.
Yaptığımız uygulamalarda biraz resim, biraz renk kullanarak görsel zenginlik sağlamaya çalışırız.
Fakat Animasyon yapacak araç bulamayız. Bu fikirle yola çıkınca animasyon yapılabildiğini göstermeye çalıştım.
Bu animasyonun mantığı, gelen Sıcaklık değerlerini bir BAR gösterim olarak hareketlendirdim. Bir de GRAFİK ortamda OLED ekranları gibi bir hareketli derece kabı ile gösterdim.
Her iki şekilde de kolaylıkla yapabileceğiniz bir animasyon şekli. Sadece gerekli hesaplamaları kendinize uyarlamanız gerekir.
Bu hesaplamalar kolaydır. Bu hesapların amacı, değişen ekran boyutlarına uydurmaktır. Bunun için 0-50 derecelik bir sıcaklık için kullandığımız TEXTBOX genişliğe göre ayarlanır.
Önce telefon ekranından bahsedelim. Dikey olduğunda genişlik 300, yükseklik 600 olduğunu varsayalım. Bu bar gösterim için ekranın %80 nini işaretleyelim. Yani bar sağa doğru sona gitmesin %80 genişliğe kadar gitsin.
Ekranı çevirdiğimizde YÜKSEKLİK değeri, GENİŞLİK değeri olur ve Genişlik değeri de yükseklik değeri olur. Bunu öncelikle algılamamız lazım.
Burada devreye SCREEN1 ORIENTATION blok girer. Bu dönüşü hissettiğinde içindeki işlemleri yapar. Biz de buraya bir değişken koyarız ve bu değişken dikey=0 yatay=1 olacak şekilde bize verir. Tabii ki döndüğünde GENİŞLİK VE YÜKSEKLİK yer değiştirir. Biz de yeni WIDTH ve HEIGHT değerlerini değişkene aktarırız. Bir de yeni WIDTH değerinin %80 ni bir değişkene aktarılır. Artık yeni hesaplamada bu kullanılacaktır.
300ms de bir çalışan CLOCK bloğu bulunmaktadır. Bu blok hem grafik ekrandaki çizimi yapıyor, hem de yeni WIDTH durumuna göre değişken ayarını yapıyor. Sonrasında ise BUTON1 ve BUTON2 yi çalıştırarak ekrandaki BAR kısmının hareketini sağlıyor.
Biz butonlara basınca da hesap işlemleri yapılarak ekrandaki BAR hareketi sağlanıyor.
CLOCK ateşleme zamanı 300ms geldiğinde, Grafik ekrandaki hareket de tamamlanıyor.
Programın zaten grafik kısmını videoda anlattım. Sizler istediğiniz gibi geliştirebilirsiniz.
Bunun yanısıra ANİHESAP diye bir blok var. Bu blok sadece grafik ekrandaki derece hareketi için hesaplama yapıyor.
Bu hesaplamada TEXT9BOX kullanılıyor. Fakat bu kutu ekranda görünmüyor. NON VISIBLE yapıldı. Arka planda çalışıyor. Bunun görevi grafik ekranın içindeki karakterleri tutmak. Bu karakterler büyük I ya da küçük L harfinden oluşabilir. Sıcaklık 10 derecede 5 karakter diyelim.
Hesaplamada sıcaklık 20 dereceye çıktığında 10 karakter yazılmalı. Bunun için önce TEXT9 da kaç karakter var diye bakıyoruz. ( LENGTH komutuyla) sonrasında bize gereken kaç karakter bunu sıcaklık değerine göre hesaplıyoruz. Sonrasında ise bunu birbirinden çıkarıyoruz. aradaki fark kadar TEXT 9 kutusuna karakter yazmamız gerekiyor.
Bunu JOIN komutuyla TEXT9 kutusuna ekliyoruz. Ya da azalma varsa çıkarıyoruz. Buna göre TEXT9 kutusu son halini alıyor. Sonrasında CLOCK ateşleme zamanı geliyor ve son değeri GRAFİK ekrana yazıyor.
Videoda grafik ekranda sıcaklık değerini yazdırdım devamlı değişiyor. fakat sadece aynı yerde yazıyor. Sizler isterseniz yeni bir hesaplamayla bu yazının koordinatını değiştirerek son değer çizgisinin yanına getirebilirsiniz. Bu da hem değer çizgisini değiştirecek hem de değerin yerini değiştirerek animasyonunuza bir hava katacaktır.
Bu animasyonları sadece sıcaklık olarak değil başka amaçlarla da kullanabilirsiniz. Hatta yeni animasyonlar da elde edebilirseniz buraya eklerseniz biz de öğrenmiş oluruz.
Tüm kaynak dosyalarına buradan ulaşabilirsiniz.
Video: