Improving GUI Animations, staggering the delay timers (1 Viewer)

mbuzina

Retired Team Member
  • Premium Supporter
  • April 11, 2005
    2,839
    726
    Germany
    Home Country
    Germany Germany
    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.
     

    wizard123

    Retired Team Member
  • Premium Supporter
  • January 24, 2012
    2,569
    2,680
    Home Country
    United Kingdom United Kingdom
    I would not use B far too overly complicated just for gui animation. I'm unsure what this achieves though as you can already delay animations at different times to others ?
     

    mbuzina

    Retired Team Member
  • Premium Supporter
  • April 11, 2005
    2,839
    726
    Germany
    Home Country
    Germany Germany
    @wizard123 yes you can specify staggered delay times, but it is a lot of work. You can not compensate for hidden menu items (at least not easily), you can not do this in a thumbAnimation (which I hope I can achieve, I have to check how this is done).

    Btw. why is b overly complicated? The sample I used is complicated (using plus and minus). Usually you would do as follows: delay="100+200x", which will result in the first items starting on the left at 100ms delay and the last items starting at the right at 300ms delay. Pretty straight forward. Make it delay="300-200x" and you have the opposite (going from right to left). The same applies for "100+200y" and "300-200y". Complicated ones are diagonal, where you combine x & y.

    But would you use option a? Would you need a compensation vor invisible controls?
     

    mbuzina

    Retired Team Member
  • Premium Supporter
  • April 11, 2005
    2,839
    726
    Germany
    Home Country
    Germany Germany
    Arrgh, why does only the filmstrip have thumbAnimations? That would be a cool thing to have for all panels. I am thinking about a large (fullscreen?) ThumbsPanel that animates from top left down to bottom right with a fade (maybe include a small slide). Why was such a great idea not implemented on all facades?

    I have to check if my idea is still possible.
     

    Sebastiii

    Development Group
  • Team MediaPortal
  • November 12, 2007
    16,583
    10,403
    France
    Home Country
    France France
    Hi :)

    We think that it should be remembered that view opening (and other user activities as well) should be taking same amount of time no matter if there is 1 or 20 items to animate, for user experience varying animation are killers :)
     

    catavolt

    Design Group Manager
  • Team MediaPortal
  • August 13, 2007
    14,367
    10,405
    Königstein (Taunus)
    Home Country
    Germany Germany
    In general, we don´t need nothing of that proposal.
    What we DO need is a scrollable stack layout (vertical and horizontal).
    That would give us a lot more possibilities as we have now. :D
    So, maybe you could concentrate on this?
     

    mbuzina

    Retired Team Member
  • Premium Supporter
  • April 11, 2005
    2,839
    726
    Germany
    Home Country
    Germany Germany
    @catavolt: well, that is at least a clear answer ... I would still like to have a wall of covers that animate in stepwise (from top left down to bottom right maybe).

    But if you need a scrollable stack layout first (I can understand that one), what are your specs?
    -> Do you need fixed width/height or measurements?
    -> Do you need data bound lists (aka customized list view for items) or do you specify each row/column in skin xml?
    -> Do you specify a visible condition per row/column or do you need to check if controls are visible?
    -> How should the scrolling word?
    -> Do you need a bound box (clipping)? With masks?

    No promises, but just checking how complex that would be.
     

    Users who are viewing this thread

    Top Bottom