• Hakkımızda
  • Bize Katıl
  • Sizden Gelenler
  • İletişim
Yazılım Karavanı | Bilişim - Teknoloji - Blog
  • Anasayfa
  • Genel
  • Programlama
    • Ruby
    • Flutter
    • Android
    • Java
    • MySQL
    • Oracle SQL
  • Yaşamdan
  • Algoritmalar
  • Yapay Zeka
  • Topluluklar
No Result
View All Result
  • Anasayfa
  • Genel
  • Programlama
    • Ruby
    • Flutter
    • Android
    • Java
    • MySQL
    • Oracle SQL
  • Yaşamdan
  • Algoritmalar
  • Yapay Zeka
  • Topluluklar
No Result
View All Result
Yazılım Karavanı | Bilişim - Teknoloji - Blog
No Result
View All Result
Home Flutter

Flutter Animasyon İşlemleri

Ali Murat Çevik by Ali Murat Çevik
Nisan 5, 2022
in Flutter
12 min read
0
Flutter Animasyon İşlemleri
WhatsApp'ta PaylaşTwitter'da PaylaşLinkedIn'de PaylaşTelegram'da Paylaş

Herkese merhaba, bu yazıda Flutter’daki animasyon işlemlerine göz atacağız. Mobil uygulamalarınızın daha efektif görünüm kazanması ve kullanıcı üzerinde güzel izlenimler bırakması için animasyonlar olmazsa olmazdır. Bu yazıda bir farklılık olması açısından animasyonları Flutter’ın web çıktısında test edeceğim. Flutter ile yazılmış bir web sitesinde animasyon ihtiyaçlarımızı karşılamaya çalışacağım. Tabi ki aynı koşullar mobil uygulamalarda da geçerlidir.

Flutter’da 4 tane temel animasyon vardır.

Bunlar:

  • Alpha
  • Scale
  • Rotate
  • Translate

olarak sıralanabilir. Tüm animasyonları kullanabileceğimiz basit bir arayüz tasarladım. Charisma ve strength açısından gelişmiş manager bir dash bize bu ekranda eşlik edecek 🙂

Animasyonları kullanabilmek için AnimationController sınıfına ihtiyaç duyarız. Bu sınıf bir animasyonun çalışma şekli, süresi, başlama — bitiş gibi durumlarını belirlememizi sağlar. Cross platformlar için bir önyargı olarak “animasyonlar donarak ilerler, animasyonlar çok verimli çalışmaz” görüşü vardır. Bizim animasyonumuza ekleyeceğimiz vsync özelliği, kullanılan ekranın yenileme hızıyla animasyonumuzu senkronize edecektir.

Animasyonlar ile ilgili bir diğer önemli nokta ise dispose() metodunun uygulanmasıdır. Uygulama arka plana atıldığında veya yeni bir sayfaya geçildiğinde controller’ın mutlaka dispose edilmesi gerekir.

Projeyi yalnızca animasyonlar için oluşturduğum için detaylı bir katman yapısı oluşturmadım. Sevgili Veli Bacik’in YouTube kanalında Flutter dosya yapınızı ve uygulama katmanlarınızı oluşturmanızda yardımcı olacak mükemmel videolar bulunuyor. Severek takip ettiğim bu playlistin bağlantısını buraya bırakıyorum. (https://youtu.be/fGNXqZd-Als)

Animasyonu kullanacağımız sayfanın build metodunu içeren sınıf TickerProviderStateMixin ile birlikte kullanılmalıdır. Bu yüzden State sonuna with TickerProviderStateMixin eklememiz gerekiyor.

Animasyon durumlarını yönetebilmemiz için bir controller ve Animation sınıfından double değer döndüren bir değişkene ihtiyacımız var.

Sıradaki adım ise initState içerisinde initialize işleminin yapılmasıdır.

1*BHgJ1TM2HhOYTJ92d8LjsQ


Her animasyon için ayrı bir metod yazıp bunların initialize ve dispose işlemlerini yapacağız. Aynı sırayla animasyonları uygulamaya başlayalım:

1. Alpha Animation

Bu animasyon çeşiti ile görselin saydamlığı üzerinde işlemler yapabiliriz. 0 ile 1 arasında değer alabilen alphada; 0 saydam, 1 ise opak anlamına gelmektedir. Kullanıcı deneyimi olarak aktiften pasife veya pasiften aktife geçen komponentler için başarılı bir yöntem olacaktır.

İlk butonumuzu Alpha Animation için kullanacağız. Dash’ın opacitysinin 1.0’dan 0.4’e geçişli bir şekilde düşürelim.

1* AjeR74 RpvzmzquYUuhEg
1*OsRi5XAtdNr4rlZJ4ObGig


Animasyonu tetiklemek için forward(); metodunu çağırmamız yeterli olacaktır. myButton widget’ının onTap metodunda ​​alphaAnimationController.forward(); şeklinde forward() metodunu çağırıp animasyonu çalıştırabiliriz.

Her şey çok güzel.. Peki hangi görsele animasyon uygulandığını Flutter nasıl anlayacak? Bunun için görselimizi Opacity ile sarmalayacağız.

1*Mam2ICqEg5V4m8AkLnXjnw


Son Hali:

1*
Alpha Animation

2. Scale Animation

Yakışıklı dashimizin boyutunu değiştirmek için scale animation kullanacağız. Scale işlemi yapabilmemiz için görselimize bir boyut vermemiz gerekmektedir. Bunun için Icon kullanıyor isek size’a, container ile sarmaladığımız bir görsel kullanıyor isek direkt height ve width değerlerine müdahale edebiliriz.

1*QEDs3rQ0ySO3VoAkt5GMYQ
1*4zHRAmnCXZSu9U9dbLDp1Q


Görselimizi SizedBox ile sarmalayıp height değerine scaleAnimaton.value verebiliriz:


Dash karakterimiz üzerine ekleyerek gidelim tüm animasyonların aynı anda çalıştığını görmek harika bir deneyim olacak 🙂

Son Hali:

1*4B9M cegCbiMdUdOPMMMmQ
Scale Animation

3. Rotate Animation

Adından da anlaşılacağı üzere grafik üzerinde döndürme işlemlerini rotate animation ile yapabiliriz. Döndürme işlemleri X ve Y eksenleri etrafında pi değişkenine bağlı olarak yapılmaktadır. Koordinat sistemi göz önüne alındığı zaman I., II., III. ve IV. bölgeler saat yönünün tersi yönünde sağ üst bölge (0–90 derece) arasında başlar.

0*vHXlP5i

Alıştığımız üzere controller ve value değerini tutacağımız Animation<double> tipindeki değişkenlerimizi tanımlayalım:

1* cbS25QqQzz 5Q2C6cmewg


Rotate işlemlerini gerçekleştirebilmek için görsel içeren widgetımızı Transform.rotate ile sarmalayacağız. “angle” değeri için rotateAnimation.value değerini kullanacağız.

1*dzVXo4IBTPXz770YqSlTiA

 

Son Hali

1*inbnykaGrf
Rotate Animation

4. Translate Animation

Translate animation ekranda öteleme hareketleri için bize yardımcı olur. Dilediğimiz ilerleme oranını kullanarak widgetları ekranda hareket ettirebiliriz.

1*pFu5vKdizQz8h3Iw I3QeQ


Translate işlemlerini gerçekleştirebilmek için ise görsel içeren widgetımızı Transform.translate ile sarmalayacağız. “offset” değeri için translateAnimation.value değerini kullanacağız.

1*6nIRUIh1CB8irXvwr3pgMw


Son Hali

1*zLtGwPtMBbK4FoH2Ze1ReQ
Translate Animation


Son durumda initState ve dispose metodlarımız:

1*6ksCiEXrM rFVlqtDFyKrw


Projenin main.dart dosyasının son hali:

GitHub Reposu: https://github.com/alimcevik/flutter_animations

1*TSDZ4KYmf4cOaLcmZwjrUw
 

Bir sonraki yazıda görüşmek üzere herkese iyi çalışmalar 🙂

alim cevik
Tags: Flutter
SendTweet5Share1Share
Önceki Gönderi

Azure DevOps Rest Api ile Çalışmak

Sonraki Gönderi

Flutter Festivali İçin Buluşmaya Son Günler! 🥳

İlgili Yazılar

Flutter Festivali İçin Buluşmaya Son Günler! 🥳

Flutter Festivali İçin Buluşmaya Son Günler! 🥳

by Ali Murat Çevik
Nisan 12, 2022
0

 Google’ın mobil, web ve masaüstü için güzel, native olarak derlenmiş uygulamaları tek bir kod tabanından hazırlamakta kullanılan Flutter için harika...

AdMob’a En İyi Alternatif: AdColony SDK ve Flutter Kurulumu

AdMob’a En İyi Alternatif: AdColony SDK ve Flutter Kurulumu

by Ali Murat Çevik
Aralık 20, 2021
0

Google’ın pabucu dama mı atılıyor? Google AdMob’a yönelik artan şikayetler doğrultusunda doğal bir davranış olarak kullanıcılarda yeni ağlar keşfetmek eylemi...

Güvenli Mobil Uygulama Geliştirme İpuçları #Flutter

Güvenli Mobil Uygulama Geliştirme İpuçları #Flutter

by Ali Murat Çevik
Haziran 27, 2021
0

Bir mobil uygulama geliştirilirken eğer bilgi güvenliği ekipleriyle işbirliğiniz yoksa, en büyük endişe kaynağınız güvenlik olacaktır. “Acaba uygulamam hacklenir mi?...

Flutter Engage Bizi Neler Bekliyor?

Flutter Engage Bizi Neler Bekliyor?

by Ali Murat Çevik
Mart 5, 2021
0

Son yılların gözdesi Flutter, cross platformlar arasındaki hızlı yükselişiyle dikkat çekmeye devam ediyor. Flutter 1.0 sürümünün yayınlanmasının ardından 2 yılı...

Flutter’da TFLite Kullanımı

Flutter’da TFLite Kullanımı

by Ali Murat Çevik
Ağustos 26, 2020
4

Merhaba arkadaşlar, bu yazımda TensorFlow Lite kullanılarak elde edilmiş .tflite uzantılı dosyanın Flutter projesine entegre edilmesini inceleyeceğiz. Entegrasyonu eğitilmiş bir...

Next Post
Flutter Festivali İçin Buluşmaya Son Günler! 🥳

Flutter Festivali İçin Buluşmaya Son Günler! 🥳

Jhipster – Java Geliştirme Platformu

Jhipster - Java Geliştirme Platformu

Bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

  • Popüler
  • Yorumlar
  • En Yeniler
Sıfırdan Yolo v4 Tiny Özelleşmiş Nesne Tespiti (Custom Object Detection)

Sıfırdan Yolo v4 Tiny Özelleşmiş Nesne Tespiti (Custom Object Detection)

Temmuz 26, 2021
B Ağaçları (B Trees)

B Ağaçları (B Trees)

Ağustos 24, 2020
Splash Screen Yapımı #Flutter

Splash Screen Yapımı #Flutter

Mayıs 25, 2020
Gini Index Kullanılarak Karar Ağacının (Decision Tree)  Oluşturulması

Gini Index Kullanılarak Karar Ağacının (Decision Tree) Oluşturulması

Ağustos 20, 2020
2020 ‘nin En Güncel ve Tehlikeli Zararlı Yazılımları

2020 ‘nin En Güncel ve Tehlikeli Zararlı Yazılımları

6
Magento 2 Detaylı Kurulum & Hatalar

Magento 2 Detaylı Kurulum & Hatalar

5
Flutter’da TFLite Kullanımı

Flutter’da TFLite Kullanımı

4
Bubble Sort (Kabarcık Sıralama) Algoritması

Bubble Sort (Kabarcık Sıralama) Algoritması

2
VGG-19 Transfer Learning ile Görüntü Sınıflandırma

VGG-19 Transfer Learning ile Görüntü Sınıflandırma

Eylül 12, 2022
SOC Sistemler Üzerine Faydalı Notlar

SOC Sistemler Üzerine Faydalı Notlar

Eylül 2, 2022
Python NLTK Kütüphanesi İle Basit Bir Chatbot Yapımı

Python NLTK Kütüphanesi İle Basit Bir Chatbot Yapımı

Ağustos 23, 2022
Makine Öğrenimi Nedir?

Makine Öğrenimi Nedir?

Ağustos 4, 2022

Reklam

Yazılım Karavanı | Bilişim – Teknoloji – Blog

Bilgi Teknolojileri alanına meraklı herkesin buluşma noktası!

No Result
View All Result
  • Anasayfa
  • Genel
  • Programlama
    • Ruby
    • Flutter
    • Android
    • Java
    • MySQL
    • Oracle SQL
  • Yaşamdan
  • Algoritmalar
  • Yapay Zeka
  • Topluluklar

© 2020 Yazılım Karavanı Kaynak gösterilmesini rica ederiz.