Animations are HARD! (2 Viewers)

[wizard123]

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.

 

[CyberSimian]

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".

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]

Actually if i copy the posted files over into defaultwidehd and test, the side menu overlays correctly even with the very slow animation.

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]

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]

Actually if i copy the posted files over into defaultwidehd and test, the side menu overlays correctly even with the very slow animation.

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]

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]

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]

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]

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:

      <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]

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)

<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