I am thinking about contributing a little to the gui animation capabilities of MP. I like the way Windows 8 creates staggered animations, just slightly delaying each animation a little more than others. So I want to change the animation delay (and maybe the duration value as well) to allow an additional component to be added to each control to automate this type of animation.
And I would like some feedback on how @skinners might use such a functionality.
I have 2 basic versions in my head, which would be better for skinning?
a) change the value of the delay parameter to delay="100+10a", this would add 10 ms per control in the order the controls are listed to the delay (or duration) value. Several groups could be started by using different letters/tokens. Sample:
<animation effect="slide" start="-50,0" delay="100+10a">WindowOpen</animation> //starts @ 110
<animation effect="slide" start="-50,0" delay="100+10a">WindowOpen</animation> //starts @ 120
<animation effect="slide" start="-50,0" delay="100+10a">WindowOpen</animation> //starts @ 130
b) use a calculation based on x&y position, sample delay="100+100x-80y", this would add 100 ms for the highest x and subtract 80 ms for the highest y values to the delay, so for a 1080p skin the following would hold
x=1000, y=100 --> delay = 100+100*1000/1920-80*100/1080 = 145 ms
x=1000, y=130 --> delay = 100+100*1000/1920-80*130/1080 = 142 ms
x=500, y=100 --> delay = 100+100*500/1920-80*100/1080 = 119 ms
etc.
Advantage of a is that it is probably easier to understand, advantage of b is that you can make great visual patterns and ignore hidden controls when calculating the delay.
Right now I am thinking of implementing b) but I would like to hear some opinions on this.
And I would like some feedback on how @skinners might use such a functionality.
I have 2 basic versions in my head, which would be better for skinning?
a) change the value of the delay parameter to delay="100+10a", this would add 10 ms per control in the order the controls are listed to the delay (or duration) value. Several groups could be started by using different letters/tokens. Sample:
<animation effect="slide" start="-50,0" delay="100+10a">WindowOpen</animation> //starts @ 110
<animation effect="slide" start="-50,0" delay="100+10a">WindowOpen</animation> //starts @ 120
<animation effect="slide" start="-50,0" delay="100+10a">WindowOpen</animation> //starts @ 130
b) use a calculation based on x&y position, sample delay="100+100x-80y", this would add 100 ms for the highest x and subtract 80 ms for the highest y values to the delay, so for a 1080p skin the following would hold
x=1000, y=100 --> delay = 100+100*1000/1920-80*100/1080 = 145 ms
x=1000, y=130 --> delay = 100+100*1000/1920-80*130/1080 = 142 ms
x=500, y=100 --> delay = 100+100*500/1920-80*100/1080 = 119 ms
etc.
Advantage of a is that it is probably easier to understand, advantage of b is that you can make great visual patterns and ignore hidden controls when calculating the delay.
Right now I am thinking of implementing b) but I would like to hear some opinions on this.