Trigonometri ve Koroutinler Kullanan Olağanüstü Animasyonlar (Radar Animasyonu) | tarafından ABHINAV CHAUHAN | Tem, 2022

Trigonometri ve Koroutinler Kullanan Olağanüstü Animasyonlar (Radar Animasyonu) |  tarafından ABHINAV CHAUHAN |  Tem, 2022

İçinde önceki makale düşmanlarımızla savaşmak için bazı jetler uçurduk, bu yazıda ülkemizi düşmanlardan nasıl koruyacağımıza odaklanacağız, böylece düşman jetlerini tespit etmek için bir radar oluşturacağız.

Not: Bu makale için önkoşul olarak android’de tuval çizimleri bilgisine ihtiyacınız olabilir, buna devam etmeden önce aşağıdaki makaleyi okumanızı tavsiye ederim. makale1, makale 2, makale3, makale4.

Radarımızı oluşturmak için aşağıdaki gibi bir pasta şekli çizeceğim ve sonra bu pastayı döndürebilirim ve radar tarama yapıyormuş gibi görünecek.

Bu şekli çizmek için görünümün orta noktasına ve çizgileri çizmek için yüksekliği ve genişliğine ve pasta şeklini çizmek için bir yola ihtiyacım var, bunu yapabiliriz onSizeChaned().

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
midPoint = width / 2f
path.addArc(0f, 0f, width / 1f, height.toFloat(), -90f, 90f)
path.lineTo(width / 2f, width / 2f)
}
override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
with(canvas) {
drawPath(path, alphaPaint)
drawLine(
midPoint,
midPoint,
width.toFloat(),
midPoint,
linePaint)
drawLine(midPoint,
midPoint,
midPoint,
0f,
linePaint)
}
}

burada ekranın orta noktasından kenarlarına bir yay ekliyoruz 90 derecelik bir açıya sahip bu yolu kapatmak için yola bir çizgi ekliyoruz sonra bir çağrıyı tetiklemek için geçersiz kılıyoruz onDraw() yolumuzu ve çizgilerimizi çizmek için, sonra onDraw() yol ve çizgiler çiziyoruz.

Animasyon için eşyordamları kullanmak, oluşturma dünyasında yaygındır, ancak görünüm dünyasında çok fazla değildir, şimdi görünüm dünyasında eşyordamları nasıl kullanabileceğimize bakalım.

var rotationAngle = 0fCoroutineScope(context = Dispatchers.Default).launch {
while (true) {
delay(10)
++rotationAngle
invalidate()
}
}

Burada sonsuz bir döngü başlatan ve dönüş açısını 1 derece artıran ve bir çağrı başlatmak için her 10 milisaniyeden sonra geçersiz kılan bir eşyordam oluşturuyorum. onDraw()

override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
with(canvas) {
//rotating canvas 1 degrees in every 10 millis
rotate(rotationAngle, midPoint, midPoint)
drawPath(path, alphaPaint)
drawLine(
midPoint,
midPoint,
width.toFloat(),
midPoint,
linePaint)
drawLine(midPoint,
midPoint,
midPoint,
0f,
linePaint)
}
}

iyi de bu yeterli değil, hızlı jetler pasta diğer kısmı tararken bir kısımdan kolayca geçebilir. Güvenliğimizi artırmak için başka bir tarama katmanı eklemek istiyorum

Bunun için sürekli büyüyen ve küçülen bir daire çizeceğim, peki bunu nasıl yapacağız?

Lisedeyken benim gibi olsaydın, hayatta bu karmaşık matematiği kullanacağımı düşünürsen, matematikten nefret ederdim 😆

Şimdi eski sorunun cevabını bulacağız, çünkü yukarıdaki problemimizi çözmek için bazı lise trigonometrisini kullanabileceğimiz ortaya çıktı.

kaynak: https://byjus.com/maths/trigonometry-graphs/

Yukarıdaki resimde bunun sinüs grafiği olduğunu hatırlıyorum, sinüs aralığı [-1,1] bu, açıyı artırmaya devam edebileceğiniz anlamına gelir, ancak sinüs değeri -1 ile 1 arasında salınmaya devam eder, yukarıdaki grafikte görüldüğü gibi -1’den 1’e ve 1’den -1’e gider.

Yani eşyordamımızdaki değeri artan bir açı değişkeni alırsam günahı alırsam -1’den 1’e kadar değer almaya devam edeceğim ve bu değerleri çarparsam width/2 Menzili olacak dairemin yarıçapını alabilirim [-width/2,width/2] negatif bir yarıçap mantıklı değil, bu yüzden sinüsün mutlak değerini alacağım, böylece aralık [0,width/2]

override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
var degrees = 0L
CoroutineScope(context = Dispatchers.Default).launch {
while (true) {
delay(10)
++degrees
++rotationAngle
val angleRadians = Math.toRadians(degrees.toDouble())
val sine = abs(sin(angleRadians)).toFloat()
pulseRadius = width / 2f * sine
invalidate()
}
}
}

burada yarıçapı hesaplıyorum ve global bir değişkene atadım, ardından daireyi çizmek için geçersiz kıldım.

override fun onDraw(canvas: Canvas) {
super.onDraw(canvas)
with(canvas) {
rotate(rotationAngle, midPoint, midPoint)
drawPath(path, alphaPaint)
drawLine(
midPoint,
midPoint,
width.toFloat(),
midPoint,
linePaint)
drawLine(midPoint,
midPoint,
midPoint,
0f,
linePaint)
//DRAW OUR CIRCLE
drawCircle(midPoint, midPoint, pulseRadius, alphaPaint)
}
}

havalı, jetlerimizi eklemeyelim önceki makale ve bir savaş bölgesi oluşturmak için arka planı ekleyin

ilginç bulursanız, kodun tamamını benim adresimde bulabilirsiniz. github

teşekkürler iyi günler 😊

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.