Extraordinarias animaciones con trigonometría y corrutinas (animación radar) | de ABHINAV CHAUHAN | julio 2022

En el artículo anterior, volamos algunos jets para luchar contra nuestros enemigos. En este artículo nos centraremos en cómo defender nuestro país de los enemigos por lo que crearemos un radar para detectar aviones enemigos.

Una noticia: Es posible que necesite conocimientos sobre el dibujo en lienzo en Android como requisito previo para este artículo. Recomiendo leer el siguiente artículo antes de continuar con este Artículo 1, Artículo 2, Artículo 3, Artículo 4.

Para crear nuestro radar, dibujo una forma circular como la que se muestra a continuación y luego puedo rotarla y parece que un radar está escaneandoPara dibujar esta forma, necesito el centro de la vista y su altura y anchura para dibujar las líneas y un camino para dibujar la forma circular. Podemos hacer esto onSizeChaned().override fun onSizeChanged(w: Int, h: Int oldw: Int, oldh: Int) { super.onSizeChanged(w, h, oldw, oldh)midPoint = ancho / 2fpath.addArc(0f, 0f, ancho / 1f, altura.toFloat(), -90f, 90f)ruta. lineTo(ancho/2f, ancho/2f)} anular la diversión onDraw(canvas: Canvas) { super.onDraw(canvas)with(canvas) {dibujarRuta(ruta, pinturaalfa)drawLine(puntomedio,puntomedio,ancho.toFloat(),puntomedio,pinturalinea)drawLine(puntomedio,puntomedio,puntomedio,0f,pinturalinea)}} aquí agregamos un arco desde el centro hasta los bordes de la pantalla, tiene un ángulo de 90 grados. También agregamos una línea a la ruta para cerrar esa ruta, luego invalidamos para inducir una llamada a onDraw() para dibujar nuestra ruta y líneas, luego en onDraw() dibujamos ruta y líneas. El uso de rutinas para la animación es común en el mundo de la composición, pero no mucho en el mundo de la vista. Veamos cómo podemos usar corrutinas en el mundo de la vista. var rotaciónAngle = 0fCoroutineScope (Contexto = Dispatchers.Default).lanzamiento {while (verdadero) {retraso (10) ++ rotaciónAngleinvalidate()}}Aquí creo una corrutina que inicia un ciclo infinito y aumenta el ángulo de rotación en 1 grado e invalida cada 10 milisegundos para hacer una llamada a onDraw() anula la diversión onDraw(canvas: Canvas) {super.onDraw(canvas)with(canvas ) { //Rotar el lienzo 1 grado cada 10 milisegundosGirar (ángulo de rotación, punto medio, punto medio) dibujar ruta (ruta, pintura alfa) dibujar línea (punto medio, punto medio, ancho. para flotar (), punto medio, pintura de línea) dibujar línea (punto medio, punto medio, punto medio, 0f, pintura de línea)}}Bueno, eso no es suficiente, los chorros rápidos pueden penetrar fácilmente desde una parte mientras el pastel escanea la otra parte. Me gustaría agregar otra capa de escaneo para aumentar nuestra seguridad. Para ello dibujaré un círculo que crece y se encoge continuamente. ¿Como hacemos eso? Para usar estas matemáticas complejas, odiaba las matemáticas 😆 Vamos a encontrar una respuesta a la vieja pregunta ahora porque resulta que podemos usar algo de trigonometría de la escuela secundaria para resolver nuestro problema anterior.Fuente: https://byjus.com/maths/trigonometry-graphs/ Recuerdo que este es un gráfico de seno en la imagen de arriba donde se encuentra el área del seno [-1,1] significa que puede seguir aumentando el ángulo, pero el valor del seno sigue oscilando entre -1 y 1, va de -1 a 1 y de 1 a -1 como se muestra en el gráfico anterior. Entonces, si tomo una variable de ángulo cuyo valor se incrementa en nuestra rutina, luego tomo sin, siempre obtengo el valor de -1 a 1 y si multiplico estos valores por ancho/2 puedo obtener el radio de mi círculo, cuya área vendrá [-width/2,width/2] un radio negativo no tiene sentido, así que tomo el valor absoluto del propio seno para obtener el rango [0,width/2]Fun override onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) { super.onSizeChanged(w, h, oldw, oldh)var grado = 0LCoroutineScope(contexto = Dispatchers.Default).launch {while (verdadero) {retraso(10)++grados++rotaciónÁnguloval ánguloRadianes = Math.toRadianes(grados.toDoble())val seno = abs(sen(ánguloRadianes)).toFloat()pulseRadius = ancho / 2f * sineinvalidate() }}} aquí calculo el radio y lo asigno a una variable global y luego lo invalido para dibujar el círculo. {Rotate(ángulo de rotación, punto medio, punto medio) dibujarRuta(ruta, pintura alfa) dibujarLínea(punto medio,puntomedio,ancho.toFloat(),puntomedio,pintarlínea) dibujarLínea(puntomedio,puntomedio,puntomedio,0f,pinturalínea)//DIBUJAR NUESTRO CÍRCULO dibujarCírculo(puntomedio , punto medio, radio de pulso, pintura alfa)}}No es genial, agreguemos nuestros aviones del artículo anterior y agreguemos el fondo para crear una zona de guerra.Si te parece interesante, puedes encontrar el código completo en mi githubGracias, que tengas un buen día 😊