Animated color background - Fondo animado de colores

Este tutorial les enseñara a hacer un fondo animado de colores.
(This tutorial will teach you how to make an animated color background.)

Paso 1 - Step 1

Poner un fondo desenfocado o normal en blanco y negro como fondo en la pantalla que estén trabajando.
(Put a defocused or normal background in black and white as background on the screen you are working on.)

Paso 2 - Step 2

Arrastrar 6 reloj a la pantalla y establece el intervalo de tiempo en 10.
(Drag 6 clock to the screen and set the time interval to 10.)

Paso 3 - Step 3

Crear 3 variables con las siguientes propiedades (los valores se pueden modificar a los que quieras).
(Create 3 variables with the following properties (the values can be modified to those you want).)

Puedes modificar los valores usando la escala de colores RGB de 0 a 255, puedes usar Photoshop o Paint para ayudarte. (You can change the values using the RGB color scale from 0 to 255, you can use Photoshop or Paint to help you.)

Paso 4 - Step 4

Ve a la parte de bloques y arrastra los siguientes cuadros.
(Go to the block part and drag the following boxes.)

Eso es todo, si tienes alguna duda o sugerencia escribe un comentario y lo respondere con gusto.
(That is all, if you have any doubt or suggestion write a comment and I will respond with pleasure.)

Consejo: Utiliza el selector de colores de Photoshop para hacer las transiciones de colores.
(Tip: Use the Photoshop color picker to make the color transitions.)


One of the greatest tutorials, I have seen yet. I will be sure to implement this to my app! Love it! Great job. I just recommend adding .aia file, that would help me & others.


Thank you very much, this is the aia. Influencers_App.aia (986.1 KB)


Very clever effect. Looks really nice.


Thank you!

Woooh nice! work well ! And give nice effect!


I love it!
good idea.

We can do it with one clock component.Thanks for it.

Another tip:
Resize background image for optimize memory usage maybe its make a force close erros (no memory left) if u use too much images in your screen


I simplified the execution routine.
I also added randomness in coloring.
Every start is always different!Animated_Color_Background_2.aia (879.9 KB)


Thanks Sander for your good idea!!

1 Like

Very nice guys!! :star_struck: Thanks for sharing.

hey how did you make that button background border ?

1 Like

It might be in the .aia file??

Use photoshop

Thanks @Sander and @Paolo for your aia

what is fondo? and how it will visible in block section… please help i am new here.

Very nice, great job :+1:

Fondo is just background. You can rename your components to anything you like.

1 Like

It is just an image attached to a button –

okay bc :smiley: