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! 😁
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