¿Cómo crear el efecto prototipo de la lotería aleatoria Axure?
Tutorial de producción de efectos de prototipo de lotería aleatoria de Axure:
1. Repetidor Este tutorial se realiza principalmente a través de repetidores, porque los repetidores son altamente reutilizables. Una vez completada la producción, solo es necesario mantener la información del premio en la tabla del repetidor y el diseño del efecto interactivo se puede generar automáticamente: distribuido horizontalmente, con 5 elementos en cada fila, los componentes requeridos dentro del repetidor: rectángulo interno; : establece el estilo seleccionado en color azul (efecto de flash durante la lotería), el estilo deshabilitado es naranja (efecto después de la lotería). Elemento de imagen: el contenido de la imagen del premio y luego configure la imagen en el repetidor para este elemento configurando la interacción de la imagen. Etiqueta de texto: el contenido de texto del premio. Luego, configure el texto del premio en el repetidor en el componente configurando la interacción del texto. Los rectángulos internos, los elementos de imagen y las etiquetas de texto se combinan y se colocan en repetidores. Configuración de la tabla interna del repetidor: se deben configurar 5 columnas en la tabla del repetidor * * *: Sin columna: columna de número de serie, complete de acuerdo con 12345, el número de serie se utilizará para el muestreo aleatorio posterior Columna de texto: columna de texto, correspondiente; al contenido de la etiqueta de texto, aquí Simplemente complete la información del premio; columna de imagen: columna de imagen, haga clic derecho para importar imágenes locales o complete la dirección en línea de la columna de anuncio: vacía de forma predeterminada, solo se usa para; procesamiento lógico durante la lotería. Columna Jin Yong: está vacía de forma predeterminada y solo se usa para el procesamiento lógico del fondo del premio que cambia de color una vez completada la lotería. 2. Botón de lotería. Puede diseñar el estilo del botón según sus propias necesidades. 3. Las etiquetas de texto deben agregar dos textos, que solo se utilizan para el procesamiento lógico. De forma predeterminada, el texto de hora oculto se utiliza para registrar la hora en que parpadea la lotería.
Grabar texto: se utiliza para registrar la posición parpadeante; el valor predeterminado es 1.
2. Producción interactiva 1. Interacción interactiva al cargar cada elemento del repetidor. Primero, debemos configurar la información del premio (texto e imágenes) en el repetidor en los componentes correspondientes. Establecer el texto: Establezca la etiqueta de texto en el repetidor (el contenido de texto del premio). Establezca la imagen: Establezca el componente de imagen (la imagen del premio) en el repetidor al contenido de item.pic, y luego necesitamos. para configurarlo según la situación. Si el valor en la selección es 1: Establecer marcado: entonces debemos seleccionar el rectángulo de fondo para que cambie de color. Controlamos el estado del rectángulo de fondo a través del valor del repetidor. Si el valor en la columna Xuanzhong es 1, se selecciona el cambio de color. Si no es igual a 1, el texto de configuración no se seleccionará: aquí también debemos configurar el texto de grabación. Configúrelo en item.no+1, donde item.no es el número de serie actual. Más uno significa que he terminado de flashear y registrar el siguiente número de premio para flashear. A continuación, configuramos el evento deshabilitado, que es similar al evento seleccionado. Si el valor de jinyong es 1, el rectángulo de fondo está deshabilitado. Si no es 1, no necesitamos escribirlo. Debido a que el valor predeterminado no es 1, por supuesto, también puede escribir que si deshabilitado no es igual a 1, el rectángulo de fondo está habilitado, pero no importa si lo escribe aquí o no, no hay necesidad de perder el tiempo. Finalmente, vamos a hacer un bucle. Lo que hay que tener en cuenta es que si está en la última línea, definitivamente es incorrecto establecer el texto del registro en el número de serie + 1 al seleccionar. En la última línea, el texto del registro debe establecerse en 1 para que así sea. puede parpadear en un bucle. Si tem.isLast es verdadero y el valor en la declaración = 1, establecemos el valor del texto grabado en 1. Entonces, se completa la interacción en el repetidor. A continuación, interactuamos con el circuito de lotería. 2. Al cargar el texto de tiempos, el texto de tiempos de interacción se utiliza para controlar la cantidad de destellos durante la lotería. Debido a que la lotería es aleatoria, configuramos el texto de tiempos en un número aleatorio al cargar el componente. Aquí usamos la función aleatoria math.random, que puede tomar cualquier número entre 0 y 1, y luego necesitamos controlar el número de destellos entre 20 y 40, para que podamos usar el resultado de la función aleatoria *220 Control Y finalmente recuerda usar una función fija para redondear. 3. El botón de lotería interactúa cuando se hace clic con el mouse. Hay dos situaciones aquí. El primero es el número de texto >; 0: después de hacer clic con el mouse en el botón, primero se debe desactivar el botón actual. Para evitar problemas causados por clics repetidos, luego marcamos todas las filas en el repetidor y luego actualizamos las filas marcadas, es decir, actualizamos todas las filas y cambiamos los valores de las columnas Xuanzhong y Jinyong en total. filas a 0. Puede entenderse como establecer el fondo de todos los premios en el color predeterminado. Luego actualizamos la fila. La lógica de actualización es que el número de serie de la columna sin == texto de registro y el valor de la columna Xuanzhong de la fila se actualiza a 1. Esto garantiza que solo se seleccione 1 a la vez. Después de seleccionar esto, el texto del registro + 1 se configurará automáticamente para lograr el bucle. Aquí establecemos un tiempo de espera, que es el tiempo para que cada premio muestre un fondo azul. En este caso son 0,1 segundos. Se puede configurar según la situación real.
Después de eso, configuramos los tiempos del texto en su valor original: 1 y luego activamos el evento cuando se hace clic en el botón actual. Por ejemplo, si el número aleatorio comienza con 20, continuará pasando del 20 al 19, del 18 al 0 y luego se detendrá. Cuando el texto numérico se convierta en 0, ingresaremos a la siguiente situación: primero actualice todas las filas marcándolas, cambiando los valores de la columna Xuanzhong y la columna Jinyong en todas las filas a 0. Este paso es el mismo que el anterior. Luego actualizamos la fila. La lógica de actualización es el número de serie de la columna sin == texto del registro. Tenga en cuenta aquí que esta actualización actualiza el valor de la columna jinyong de esta fila a 1. Entonces uno se volverá naranja, que es el teclado dibujado. Es lógico que esto complete todo el proceso de lotería y nos prepararemos para la próxima lotería más adelante. Debido a que el botón estaba deshabilitado cuando comenzó el sorteo, tenemos que volver a habilitarlo aquí. Luego extraemos aleatoriamente el número de flashes nuevamente, porque el número de veces que se carga el texto lo establece la función aleatoria, por lo que podemos activar directamente el evento cuando se activa el texto aleatorio. De esta forma, hemos completado la plantilla prototipo de lotería aleatoria. Si se utiliza en el futuro, puede mantener directamente la información del premio en la tabla de repetidores y generar interacciones automáticamente. ¿No es conveniente y rápido? Lo anterior es "¿Cómo hacer un efecto prototipo de lotería aleatoria Axure?" He explicado el contenido relevante, ¡espero que te sea útil! Aprenda el diseño de prototipos de Axure, no tenga miedo de demasiados tutoriales, no tenga miedo de los detalles en el contenido, le esperan más artículos de Axure ~ Si desea trabajar como gerente de producto en el futuro, aprenda y domine ¡Axure es absolutamente necesario! Mientras aprende Axure, puede elegir los cursos en vídeo de autoaprendizaje y el sistema de cursos profesionales de Axure.
También puedes aprenderlo y experimentarlo~