Improving GUI Animations, staggering the delay timers

Discussion in 'General Development (no feature request here!)' started by mbuzina, November 13, 2014.

  1. mbuzina
    • Premium Supporter

    mbuzina Retired Team Member

    Joined:
    April 11, 2005
    Messages:
    2,839
    Likes Received:
    627
    Location:
    Germany
    Ratings:
    +723 / 4
    Home Country:
    Germany Germany
    Show System Specs
    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.
     
    • Like Like x 2
    • Thank You! Thank You! x 1
  2. Google AdSense Guest Advertisement



    to hide all adverts.
  3. azzuro
    • Team MediaPortal

    azzuro Test Group

    Joined:
    May 10, 2007
    Messages:
    8,486
    Likes Received:
    2,543
    Occupation:
    technician HVAC
    Location:
    France - IDF
    Ratings:
    +4,215 / 13
    Home Country:
    France France
    Show System Specs
  4. wizard123
    • Team MediaPortal

    wizard123 Design Group

    Joined:
    January 24, 2012
    Messages:
    2,499
    Likes Received:
    1,695
    Gender:
    Male
    Occupation:
    genius
    Ratings:
    +2,919 / 11
    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 ?
     
    • Thank You! Thank You! x 1
  5. mbuzina
    • Premium Supporter

    mbuzina Retired Team Member

    Joined:
    April 11, 2005
    Messages:
    2,839
    Likes Received:
    627
    Location:
    Germany
    Ratings:
    +723 / 4
    Home Country:
    Germany Germany
    Show System Specs
    @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?
     
  6. mbuzina
    • Premium Supporter

    mbuzina Retired Team Member

    Joined:
    April 11, 2005
    Messages:
    2,839
    Likes Received:
    627
    Location:
    Germany
    Ratings:
    +723 / 4
    Home Country:
    Germany Germany
    Show System Specs
    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.
     
  7. Sebastiii
    • Team MediaPortal

    Sebastiii Development Group

    Joined:
    November 12, 2007
    Messages:
    16,270
    Likes Received:
    6,221
    Gender:
    Male
    Location:
    France
    Ratings:
    +10,229 / 9
    Home Country:
    France France
    Show System Specs
    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 :)
     
    • Agree Agree x 3
  8. catavolt
    • Team MediaPortal
    • Administrator

    catavolt Design Group Manager

    Joined:
    August 13, 2007
    Messages:
    12,257
    Likes Received:
    4,995
    Gender:
    Male
    Occupation:
    Technical Documentation, Translation
    Location:
    Lanzarote
    Ratings:
    +7,418 / 38
    Home Country:
    Germany Germany
    Show System Specs
    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?
     
    • Agree Agree x 1
  9. mbuzina
    • Premium Supporter

    mbuzina Retired Team Member

    Joined:
    April 11, 2005
    Messages:
    2,839
    Likes Received:
    627
    Location:
    Germany
    Ratings:
    +723 / 4
    Home Country:
    Germany Germany
    Show System Specs
    @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.
     
Loading...

Users Viewing Thread (Users: 0, Guests: 0)

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice
  • About The Project

    The vision of the MediaPortal project is to create a free open source media centre application, which supports all advanced media centre functions, and is accessible to all Windows users.

    In reaching this goal we are working every day to make sure our software is one of the best.

             

  • Support MediaPortal!

    The team works very hard to make sure the community is running the best HTPC-software. We give away MediaPortal for free but hosting and software is not for us.

    Care to support our work with a few bucks? We'd really appreciate it!