Normalize and Ratio - what are they?

Examples
,
1

Not sure if you noticed that when we animate a Tile using sequence, the items in the tile start animating at the top left and go across the columns and then down the rows or if we sequenceReverse then from the bottom right to the top left. What if we want to animate from the center out! Here is an example of what that can look like and it is very cool! ZIM 016 - Normalize and Ratio - Code Creativity

The new normalize() method of a Container lets you give each child of the container a ratio (0-1) as to how popular it is compared to the other children relative to a starting, ending or central point. Ya... a little confusing sounding! An example will help:

const item = new Rectangle(70,70,white,black).reg(CENTER);
const tile = new Tile(item, 9, 1, 20)
	.normalize("x", CENTER)
	.center();

image

// scale the items based on the distance from the center
tile.loop(item=>{
	zogy(decimals(item.ratio)); // 0, .3, .5, .8, 1, .8, .5, .3, 0
	item.sca(.5 + item.ratio*2);
});

image

// optionally, adjust the spacing by re-tiling the scaled items
const final = new Tile({
	obj:tile.items, 
	cols:tile.items.length,
	rows:1,
	spacingH:10,
	unique:true, // avoid ZIM VEE picking from array
	valign:CENTER
}).center()

tile.dispose(); // get rid of old empty tile
tile.sortBy("ratio"); // make more central objects come to front

image

Or with a spacingH of -10 above:

image

2

The animation works in a similar manner but we normalize the reg property:

tile.normalize("reg", CENTER)

and use the ratio to adjust the rate parameter of the animate(). We also set sequence to 0 to animate each child of the container independently.

.animate({
		props:{scale:2},
		time:2,
		ease:"elasticOut",
		rate:target=>{return 1 + target.ratio*4},
		sequence:0 // turn on per item animation
	});

The rate of the outer tile items is slower than the rate of the central tile items. Also, when we normalize the reg property it actually sets the registration point of each child to the center of the tile! This way we get the neat effects.

image