Cómo agregar efectos de animación de la interfaz de usuario

Hay tutoriales detallados sobre la Escuela de Pintura, gratuitos.

1. Crear un nuevo proyecto de prueba

Primero, creamos un nuevo proyecto llamado Prueba para practicar nuestro contenido esta vez. Después de que el proyecto se haya creado correctamente, creamos un nuevo objeto Botón. , como se muestra a continuación:

La nueva UGUI se basa en un lienzo de Canvas. Si no hay un Canvas en su escena, cuando cree un objeto UI, el editor creará automáticamente un Canvas para usted.

p>

Luego configuramos el modo de escala y el tamaño de Cavans. En este ejemplo, usamos el tamaño del iPhone6 ​​como estándar. Seleccionamos Canvas y luego, en su componente Canvas Scaler, modificamos el modo de escala Ui. Escalar con tamaño de pantalla y luego

Establecer la resolución en 750*1334

2. Establecer las propiedades del botón

Luego ajustamos la posición del botón a la parte superior. a la derecha de la pantalla, luego amplíe el tamaño de fuente y el texto Modifique el contenido para hacer clic en mí (el tamaño y el contenido del texto aquí se pueden ajustar según sus propias preferencias)

3. Objetos UGUI

Métodos para crear dinámicamente objetos UGUI. En pocas palabras, convertimos el objeto UGUI que necesitamos crear en un Prefab, luego usamos el método Instantiate para crear una instancia y finalmente usamos la API relevante para establezca dinámicamente sus propiedades

4. Cree un texto prefabricado personalizado

A continuación, crearemos un texto prefabricado personalizado para prepararnos para la creación dinámica. Primero, personalizaremos un texto como se muestra a continuación:

Representación de texto

Echemos un vistazo al contenido de este Texto personalizado:

El color de fuente es rojo

Después del Texto se crea, se reproducirá una animación de amplificación

Después de que finalice la animación de zoom, el texto se moverá hacia arriba una cierta distancia

Después de que finalice el movimiento, el texto desaparecerá

1. Establezca el atributo MyText

Después de aclarar el contenido requerido para Text, primero creamos un nuevo objeto Text y lo llamamos MyText

Nuevo objeto Text

Luego restablecemos la transformación Rect de MyText y la reiniciamos. Luego configuramos su ancho y alto en 750 y 100 respectivamente, luego configuramos el tamaño de fuente de MyText en 40, el color en rojo y luego configuramos el modo en centrado:

Establecer el ancho y alto de MyText

Establecer los atributos de fuente de MyText

2 Agregar una animación de zoom para Text

Nosotros. Ya hemos configurado la posición y los atributos de fuente de MyText. A continuación, debemos agregar Hay dos efectos de animación de acercamiento y aumento. Primero, seleccionamos MyText y luego abrimos el editor de animación (¿la versión para Mac se puede abrir con la tecla de acceso directo?). +6)

Abre el editor de animación

Luego, en el editor de animación, haz clic en el botón Crear para crear una nueva animación

Crea una nueva animación

Cuando hacemos clic en el botón Crear, el editor abrirá un cuadro de diálogo y debemos especificar la nueva animación. El nombre del archivo y la ruta de almacenamiento de la animación. La primera animación que debemos hacer aquí es el efecto de ampliación. de la apariencia de la fuente, por eso la llamamos Appear. Luego, para que los recursos sean fáciles de administrar, colocamos todos los recursos de animación en _ Debajo de la carpeta Animator (debe crear la carpeta usted mismo; consulte los tutoriales anteriores sobre cómo hacerlo). para crearlo)

Cuadro de diálogo Nueva animación

Después de que la creación sea exitosa, encontraremos que, además de nosotros mismos, para el archivo de apariencia creado, el editor también creó automáticamente un archivo de controlador de animador llamado MyText, como se muestra a continuación, puede ver en el nombre del tipo de archivo que este archivo se usa para controlar y administrar archivos como nuestro. Aparece, según necesitamos. Después de que aparezca el texto implementado, reproduzca la animación de zoom y luego reprodúzcala nuevamente.

Al actualizar la animación, este proceso y esta lógica se implementan a través del Animator Controller. Hablaremos de ello más adelante

Archivo del Animator Controller

A continuación, volvemos al editor de animación. Puede cambiar dinámicamente una propiedad del objeto MyText para formar un efecto de animación. Unity enumera las variables de propiedad que pueden ser manipuladas por cada objeto. Aquí tomamos el objeto Texto como ejemplo. Cuando hacemos clic en el botón Agregar propiedad, el nivel inferior. Menú emergente., podemos ver en el menú que hay tres categorías de variables de atributos que se pueden operar:

Rect Transform: Esta clase es para cambiar las propiedades del componente Rect Transform. estas propiedades para lograr cambios en el tamaño del objeto, o movimiento de posición, etc.

Texto: Esta clase es para cambiar las propiedades del componente Texto. Podemos cambiar estas propiedades para lograr cambios como el color de fuente. cambios, visualización de fuente o no, etc.

Animator: esta clase cambia las propiedades del componente Animator

Botón Agregar propiedad

Para lograr el efecto Para ampliar MyText después de que aparece, agregamos cambios a la propiedad Escala. Dado que la interfaz de usuario es en realidad un plano, y los únicos cambios en su tamaño que pueden producir cambios visuales son los cambios en los tiempos, por lo que agregamos un fotograma clave en 0,25. segundos y luego arrastre el fotograma clave final a 0,5 segundos, como se muestra a continuación:

Agregar un fotograma clave

Luego seleccionamos Para el fotograma clave de 0,25 segundos, configuramos Scale.x y Scale.y del fotograma a 1,5

Establezca el cambio de escala

Luego podemos hacer clic en el botón de reproducción en el editor de animación, probemos el efecto de animación

Efecto de animación

La animación de acercamiento está lista. A continuación, continuaremos creando el efecto de animación ascendente

3. Agregue una animación ascendente al texto.

Primero, hacemos clic en el botón Aparecer y luego seleccionamos Crear nuevo clip... para agregar un nuevo archivo de animación a MyText:

Crear un nuevo archivo de animación

De manera similar en el nuevo cuadro de diálogo cuadro que aparece, le asignamos al archivo de animación el nombre UpRight y lo almacenamos en la carpeta _Animator:

Nuevo cuadro de diálogo

Luego agregamos cambios de posición anclada a la animación UpRight:

Agregar cambios de posición anclada

Animación hacia arriba En este ejemplo, queremos que dure 1 segundo y aumente 100 píxeles, por lo que seleccionamos el fotograma clave final y establecemos su valor Position.y en 100:

Paste_Image.png

Luego podemos probar si el efecto de animación es el que esperábamos:

Probar el efecto de animación

Bien, en En este punto, hemos agregado dos animaciones a MyText, a saber, el efecto de amplificación y el efecto ascendente. A continuación, debemos agregar las dos animaciones

4. p>

Para organizar animaciones, es necesario utilizar el archivo Animator Controller. Si hacemos doble clic para abrir MyText, se abrirá automáticamente el editor Animator:

Abrir el archivo MyText

Podemos ver a través del contenido del editor que el estado actual de la disposición de la animación es que MyText ingresará a la acción Aparecer al principio, por lo que para lograr el efecto deseado, solo necesitamos agregar otra conexión. línea para permitir que MyText ingrese al estado UpRight después de reproducir Aparecer. Hacemos clic derecho en el estado Aparecer, luego seleccionamos Realizar transición y luego nos conectamos al estado UpRight.

Estado del enlace UpRight

A continuación podemos ejecutar el juego para ver si la conexión de los efectos de animación es correcta:

Probar el efecto de conexión

A través de las pruebas, podemos ver que ahora MyText reproducirá el efecto de amplificación después de que aparezca, y luego reproducirá el efecto ascendente, pero hay un problema, siempre reproducirá el efecto ascendente en un bucle, por lo que debemos desactivarlo. la reproducción en bucle de la animación

Desactivar la reproducción en bucle

Aquí necesitamos desactivar la reproducción en bucle de las animaciones Appear y UpRight. Después de desactivarla, si ejecutamos el juego. Nuevamente, encontraremos que la animación no se reproducirá en bucle.

5. Agregue un script de eliminación

Ahora todavía nos queda el último paso, que es después de que se reproduzca la animación ascendente de MyText. , necesitamos eliminar MyText, por lo que debemos agregar un script a MyText, el script se llama DestroyByTime. Dado que el tiempo total de nuestras dos animaciones es de 1,5 segundos, agregué el script para destruir MyText 1,5 segundos después de su generación. El siguiente es el contenido del código del script:

Código completo

6. Conviértalo en una casa prefabricada

Después de completar el trabajo anterior, podemos crear MyText. en un Prefab El método de producción es muy simple. Simplemente arrastre MyText a la carpeta Prefabs, no entraré en detalles aquí.