Multi-state Box "cloud animation" Help!

Ask the community
,
1

Hi all!

I am trying to create a static animation of a cloud that changes colour in an interval of 0.5 seconds from 4 different colours using a multi-state box.

I have made the initial first code through trial and error and it works, however it changes state at random colours. Here is the initial code:

setInterval(function()  {
  $w("#cloudbox1").changeState("WhiteCloudLarge")
  }, 250); 

setInterval(function()  {
  $w("#cloudbox1").changeState("BlueCloud")
  }, 500); 

setInterval(function()  {
  $w("#cloudbox1").changeState("GreenCloud")
  }, 750); 

setInterval(function()  {
  $w("#cloudbox1").changeState("PinkCloud")
  }, 1000);

However, I want it to change states in a specific order of white, blue, green then pink then it loops again in that order.
I made this new code and it doesn’t work! It just stays at the white original cloud state. Am I using the function “states” correctly?

//NEW CODE//

setInterval(function()  {
let state = $w("#cloudbox1").currentState;
let state1 = $w("#cloudbox1").states['WhiteCloudLarge'];
let state2 = $w("#cloudbox1").states['BlueCloud'];
let state3 = $w("#cloudbox1").states['GreenCloud'];
let state4 = $w("#cloudbox1").states['PinkCloud'];
console.log (state); // Shows the current state of Multibox in the console 
  if (state == state1) {
    $w("#cloudbox1").changeState("BlueCloud");
  } else if (state == state2) {
    $w("#cloudbox1").changeState("GreenCloud");
  } else if (state == state3) { 
    $w("#cloudbox1").changeState("PinkCloud");
  } else if (state == state4) {
    $w("#cloudbox1").changeState("WhiteCloudLarge");
  }
}, 500);

Thank-you all for your responses and feedbacks would be greatly appreciated! :grin:

2

Hi Mark,

You’re setting four individual instances for the interval, while you should only create one instance that changes the colors every some period of time.

// All the colors stored in an array.
const colors = ['WhiteCloudLarge', 'BlueCloud', 'GreenCloud', 'PinkCloud'];

// Change to the default - first - state
$w('#cloudbox1').changeState(colors[0]);

// Start the interval. with half a second (500 ms).
setInterval(() => nextColor(), 500);

// a function to change to the next color.
function nextColor() {
    // The ID of the current state.
    const id = $w('#cloudbox1').currentState.id;
    
    // The index of the current state in the array
    const index = colors.indexOf(id);
    
    // Get the next state index, if the current index is the last one, reset it to 0;
    const nextIndex = index + 1 === colors.length ? 0 : index + 1;
    
    // Change to the next state.
    $w('#cloudbox1').changeState(colors[nextIndex]);
}

Please examine the code above, try to understand it, and explain it in the comments so other people reading this thread also understand.

Hope this helps~!
Ahmad

3

Hi @ahmadnasriya ,

Wow I have plugged the code in and adjusted it for a couple of “cloud” multi-state boxes and they work perfectly fine! Thank-you so much! It is so much simpler coding it that way!

As I do not know JavaScript coding and being a first-timer, I have been reading and trying to understand the logic of the array function on JavaScript using this website: https://developer.mozilla . org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
(For others who want to know more functions on JavaScript)

In analysing the code and getting it through my head, I see JavaScript is so cool, allowing a function to be inside a function! :sunglasses:

Once again, thanks!

4

You’re very welcome @markshinobisd , it’s okay not to know how to code with JS as long as you’re learning.

Glad that I was able to deliver it in a simple and easy to understand way.

5

Hi @ahmadnasriya ,

I’m trying to adapt the state multi-boxes to the Mobile Editor from Desktop; I have to resize everything, but it won’t let me resize my 2 cloud state multi-boxes. Wix only lets me crop it and no resolution changes, so now it looks like a box changing colours, not a cloud.

1) How would I change the resolution of it (if there is a way that I am not aware of?)

2) If I cannot or no way to do so, how would I code it so I make another pair of cloud state multi-boxes that are smaller than the Desktop site for the Mobile site, so that the small cloud state multi-boxes only work for Mobile?

I have already looked at migrating the site to Editor X, and it looks better in adapting from Desktop, to Tablet and Phone View, but sadly it does not support state multi-boxes yet…

Thank-you once again! :grin:

6

@markshinobisd Before resizing the multi-state box, you should first resize all of its children.

7

Hi @ahmadnasriya ,

Thank-you! The images were set to “Fit” and changed it on the Desktop view to “Scale to Fill”. Now they are resizable on the Mobile Editor!