Animations are HARD! (1 Viewer)

wizard123

Retired Team Member
  • Premium Supporter
  • January 24, 2012
    2,543
    2,615
    United Kingdom United Kingdom
    Country flag
    Skin engine does the following:
    Opening a side menu sets it immediately in foreground.
    Closing a side menu sets it immediately in background.
    The effect you see comes from the long sliding time you used to open/close the menu - therefore the standard slide times are only about 70 milliseconds. ;)
    Actually if i copy the posted files over into defaultwidehd and test, the side menu overlays correctly even with the very slow animation. :confused:
     

    CyberSimian

    Test Group
  • Team MediaPortal
  • June 10, 2013
    1,992
    1,234
    Southampton
    United Kingdom United Kingdom
    Country flag
    Opening a side menu sets it immediately in foreground. Closing a side menu sets it immediately in background.
    Yes, it looked to me as though when the user closes the side menu, the focus moves to the list of recordings at the start of the animation, whereas it ought to move to the list at the end of the animation.

    The effect you see comes from the long sliding time you used to open/close the menu - therefore the standard slide times are only about 70 milliseconds. ;)
    Yes, I agree that my test scenario is using an unusually long animation time. But I first noticed that the animations did not look quite right when using the "normal" animation times in "DefaultWide" and "DefaultWideHD". :eek:

    So I think that we are arriving at the conclusion that this is an undocumented limitation in the skin engine? The skin engine ought to work as I expect, but it in fact works as you have described. :(

    -- from CyberSimian in the UK
     

    catavolt

    Design Group Manager
  • Team MediaPortal
  • August 13, 2007
    12,806
    9,222
    Lanzarote
    Germany Germany
    Country flag
    Actually if i copy the posted files over into defaultwidehd and test, the side menu overlays correctly even with the very slow animation. :confused:
    Have no time to test yet, but I saw similiar effects as Cyber before, therefore I made the slide animation very short ;)
    If I get time I´ll test it ;)
     

    wizard123

    Retired Team Member
  • Premium Supporter
  • January 24, 2012
    2,543
    2,615
    United Kingdom United Kingdom
    Country flag
    Oh i see i just double checked you only see that behavior on closing the side menu, yes thats because when you leave the side menu the listcontrol has focus and as catavolt said the once the menu loses focus it immediately goes to the background.
     

    CyberSimian

    Test Group
  • Team MediaPortal
  • June 10, 2013
    1,992
    1,234
    Southampton
    United Kingdom United Kingdom
    Country flag
    Actually if i copy the posted files over into defaultwidehd and test, the side menu overlays correctly even with the very slow animation. :confused:
    :eek: :eek: :eek:

    I will try this when my HTPC has finished its current recording (I need to boot my test partition to run MP 1.16p). I am currently using MP 1.12 as my "production" system, but perhaps there have been some updates to the skin engine that have improved animations (although I don't recollect having seen any forum posts about this).

    -- from CyberSimian in the UK
     

    CyberSimian

    Test Group
  • Team MediaPortal
  • June 10, 2013
    1,992
    1,234
    Southampton
    United Kingdom United Kingdom
    Country flag
    Oh i see i just double checked you only see that behavior on closing the side menu, yes thats because when you leave the side menu the listcontrol has focus and as catavolt said the once the menu loses focus it immediately goes to the background.
    :( :( :(

    -- from CyberSimian in the UK
     

    catavolt

    Design Group Manager
  • Team MediaPortal
  • August 13, 2007
    12,806
    9,222
    Lanzarote
    Germany Germany
    Country flag
    Just tried in in my PVHD skin and found out the following:
    The opening slide animation works as expected when I set it to 5000 milliseconds, closing is immediately (NO ANIMATION!) ;)
    I use this animation:
    <animation effect="slide" time="5000" start="-300,0" reversible="true">visiblechange</animation>
     

    CyberSimian

    Test Group
  • Team MediaPortal
  • June 10, 2013
    1,992
    1,234
    Southampton
    United Kingdom United Kingdom
    Country flag
    The opening slide animation works as expected when I set it to 5000 milliseconds, closing is immediately (NO ANIMATION!)
    One quirk that I noticed when trying different mark-up is that the result depends on where the ANIMATION tag is placed.

    The ANIMATION tag should apply to both the background and the menu buttons, and therefore it ought to be placed just inside the "actiongroup" control. But if you place it there, the slide still fails, but it fails differently. The background slides off as expected, but the buttons disappear immediately, and the list text still overlays the sliding background.

    To avoid the buttons disappearing immediately, the ANIMATION tag must be moved from the "actiongroup" control to the "image" control for the background, and repeated in the "group" tag for the buttons. This is how I have coded it in the XML that I posted earlier. This prevents the buttons disappearing immediately when the side menu is closed, but you still get the list text overlaying the background.

    The fade animation suffers the same quirks, so this is not limited to slide. :(

    -- from CyberSimian in the UK
     

    ajs

    Development Group
  • Team MediaPortal
  • February 29, 2008
    11,828
    6,679
    Kyiv
    Ukraine Ukraine
    Country flag
    The ANIMATION tag should apply to both the background and the menu buttons, and therefore it ought to be placed just inside the "actiongroup" control.
    All control in GUIGroup inherit the animation from the parent. https://github.com/MediaPortal/MediaPortal-1/blob/master/mediaportal/Core/guilib/GUIGroup.cs#L61-L70
    When show, all animation Work: https://github.com/MediaPortal/Medi.../mediaportal/Core/guilib/GUIGroup.cs#L80-L100
    Try:
    XML:
          <control>
            <description>Group element</description>
            <type>group</type>
            <layout>StackLayout(0,Vertical,true)</layout>
            <!-- start point for button in left side bar -->
            <posX>50</posX>
            <posY>121</posY>
            <visible>!Control.HasFocus(50)</visible>
    
            <animation effect="slide" time="5000" start="-168,0" reversible="false">visible</animation>
            <animation effect="slide" time="5000" end="-168,0" reversible="false">hidden</animation>
    
          <control>
            <type>image</type>
            <posX>25</posX>
            <posY>78</posY>
            <width>310</width>
            <height>591</height>
            <texture>white.png</texture>
            <colordiffuse>ff666666</colordiffuse>
            <dimColor>ffffffff</dimColor>
          </control>
    
            <!-- nested controls -->
            <control>
              <description>"Layout" button</description>
              <type>menubutton</type>
              <id>2</id>
              <onleft>50</onleft>
              <onright>50</onright>
              <onup>6</onup>
              <ondown>3</ondown>
              <label></label>
              <!-- <label>LLL:</label> -->
              <mode>dialoglist</mode>
              <dialogTitle>792</dialogTitle>
              <valueTextInButton>yes</valueTextInButton>
              <valuePrefixText>95</valuePrefixText>
            </control>
    
            <control>
              <description>"Sort" button</description>
              <type>sortbutton</type>
              <id>3</id>
              <onleft>50</onleft>
              <onright>50</onright>
              <onup>2</onup>
              <ondown>5</ondown>
            </control>
    
            <control>
              <description>"Group" button</description>
              <type>menubutton</type>
              <id>5</id>
              <onleft>50</onleft>
              <onright>50</onright>
              <onup>3</onup>
              <ondown>6</ondown>
              <label></label>
              <mode>dialoglist</mode>
              <dialogTitle>499</dialogTitle>
              <valueTextInButton>yes</valueTextInButton>
              <valuePrefixText>97</valuePrefixText>
            </control>
    
            <control>
              <type>button</type>
              <description>"Cleanup" button</description>
              <id>6</id>
              <onleft>50</onleft>
              <onright>50</onright>
              <onup>5</onup>
              <ondown>2</ondown>
              <label>624</label>
            </control>
    
            <control>
              <type>button</type>
              <description>"Compress" button (compatibility placeholder)</description>
              <id>7</id>
              <onleft>50</onleft>
              <onright>50</onright>
              <onup>6</onup>
              <ondown>2</ondown>
              <label>Compress</label>
              <visible>false</visible>
            </control>
    
          </control>
     

    catavolt

    Design Group Manager
  • Team MediaPortal
  • August 13, 2007
    12,806
    9,222
    Lanzarote
    Germany Germany
    Country flag
    The ANIMATION tag should apply to both the background and the menu buttons, and therefore it ought to be placed just inside the "actiongroup" control.
    Wrong ;) The actiongroup only serves as a container for the button list, and the image referred to in this control is the arrow on the left side showing when a side menu is available. Putting an animation here is senseless and useless.
    The animations must be placed in the control for the background image and the group control for the buttons ;)
    Here a complete actiongroup for recorded tv (without the buttons to shorten the code here) ;)
    XML:
    <control>
          <type>actiongroup</type>
          <description>action menu</description>
          <defaultcontrol>2</defaultcontrol>
          <onexit>50</onexit>
          <buttonX>0</buttonX>
          <buttonY>70</buttonY>
          <buttonwidth>140</buttonwidth>
          <buttonheight>984</buttonheight>
          <textureFocus>-</textureFocus>
          <textureNoFocus>Action_nofocus.png</textureNoFocus>
          <width>168</width>
          <height>798</height>
          <dimColor>00ffffff</dimColor>
          <control>
            <type>image</type>
            <id>1</id>
            <width>1920</width>
            <height>1080</height>
            <texture>white.png</texture>
            <colordiffuse>50005eef</colordiffuse>
          </control>
          <control>
            <type>image</type>
            <posX>-10</posX>
            <posY>171</posY>
            <width>490</width>
            <height>855</height>
            <texture>am-background2.png</texture>
            <colorDiffuse>fffffffff</colorDiffuse>
            <visible>!Control.HasFocus(50)</visible>
            <animation effect="slide" time="70" start="-335,0" reversible="true">visiblechange</animation>
          </control>
          <control>
            <type>group</type>
            <description>group element</description>
            <animation effect="slide" time="70" start="-335,0" reversible="true">visiblechange</animation>
            <visible>!Control.HasFocus(50)</visible>
            <layout>StackLayout</layout>
            <posX>49</posX>
            <posY>225</posY>
    You even may ommit the animation - in this case the menu would just pop up ;)
     

    Users Who Are Viewing This Thread (Users: 0, Guests: 1)

    Top Bottom