Animate items in scramble

Questions
1

Good morning,
I can't get the Scrambler's items to run an animation.
It worked for me in an older version of ZIM, but today I updated my ZIM version and it hasn't worked since.
I'd love some help :pray:

this is an example of code that doesnt work:

let arr = [];
            loop(4, i => arr.push(new Rectangle(100, 100, series(orange, green, blue, pink))));
            let tile = new Tile(arr, 4, 1, 10);

            // add the tile to the Scrambler - by default it scrambles
            let scrambler = new Scrambler({ tile, swap: false, scramble: false }).center();
            scrambler.scramble(0, 0, 1);

            // loop(scrambler.tile.items , (item, ind) => {
            loop(arr , (item, ind) => {
                item.visible=false;
                // item.animate({ props: { scale: 0 }, time: 0.3, wait: 0.2 * ind })
            })
            S.update();
2

Looks like the scramble() method is pausing animations. But, as is, I am not sure you need to call it. Try this:

let arr = [];
loop(4, i => arr.push(new Rectangle(100, 100, series(orange, green, blue, pink)).reg(CENTER)));
let tile = new Tile(arr, 4, 1, 10);
let scrambler = new Scrambler({ tile, swap: false, scramble: true }).center();
tile.loop(item=>{
	item.sca(0).animate({scale:1});
});

or if you want the scramble method then wait until it is scrambled before animating:

let arr = [];
loop(4, i => arr.push(new Rectangle(100, 100, series(orange, green, blue, pink)).reg(CENTER)));
let tile = new Tile(arr, 4, 1, 10);
let scrambler = new Scrambler({ tile, swap: false, scramble: true }).center();
tile.loop(item=>{
	item.sca(0);
});
scrambler.on("scrambled", ()=>{
	tile.loop(item=>{
		item.animate({scale:1})
	});
});

When we initially tried the "scrambled" event it did not solve the issue - once we added an extra 100ms then it did - so something in the scramble() method has a delayed pausing or stopping of animations. The latest CDN seems to work - so do a hard refresh. Have not updated the NPM - will do that after a few more patches or if you need it.

1 Like
3

Great, I add an extra 100ms and it works. thanks a lot!

1 Like