Kodi Community Forum

Full Version: Animation Question for Submenu List
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I am attempting to replace my home menu code with script.skinshortcuts. The items are successfully built, but I am having difficulties replicating the current animation effects. The menu was built the same way Confluence builds its home menu, with a fixedlist for the main menu, and grouplists of buttons for the submenu. Each grouplist has Visible and Hidden animations applied to have the buttons "bounce" in and out of visibility as the main menu item changed.

I am trying to replicate this behavior with a list containing the submenu items that script.skinshortcuts generates. I have been able to get the Visible action to work as expected, but the hidden animation seems to get interrupted by the list item visibility (at least that's my best guess).

Here is the code I am currently working with:
Code:
<!--sub menu-->
<control type="group">
    <visible>!Container(9000).OnNext + !Container(9000).OnPrevious</visible>
    <animation effect="slide" start="0,-60" end="0,0" delay="200" time="200" tween="quadratic" reversible="false">Visible</animation>
    <animation effect="slide" start="0,0" end="0,-60" time="200" tween="quadratic" reversible="false">Hidden</animation>
    <control type="list" id="9901">
        <left>150</left>
        <top>37</top>
        <width>1620</width>
        <height>70</height>
        <onup>9000</onup>
        <ondown>9002</ondown>
        <itemgap>0</itemgap>
        <orientation>horizontal</orientation>
        <itemlayout width="270" height="60">
            ...
        </itemlayout>
        <focusedlayout width="270" height="60">
            ...
        </focusedlayout>
        <content>
            <include>skinshortcuts-submenu</include>
        </content>
    </control>
</control>

<!--main menu-->
<control type="fixedlist" id="9000">
    <left>60</left>
    <top>8</top>
    <width>1800</width>
    <height>90</height>
    <onleft>9000</onleft>
    <onright>9000</onright>
    <onup condition="System.HasAddon(script.globalsearch)">608</onup>
    <onup condition="!System.HasAddon(script.globalsearch)">603</onup>
    <ondown>9901</ondown>
    <pagecontrol>-</pagecontrol>
    <scrolltime>300</scrolltime>
    <focusposition>2</focusposition>
    <movement>1</movement>
    <orientation>Horizontal</orientation>
    <itemlayout height="90" width="360">
        ...
    </itemlayout>
    <focusedlayout height="90" width="360">
        ...
    </focusedlayout>
    <content>
        <include>skinshortcuts-mainmenu</include>
    </content>
</control>

Is there any way to force the Hidden animation to fire completely before the submenu list refreshes with the "new" submenu items?

Also, is there any way to center a list horizontally? The submenu will have differing numbers of items depending on the main menu chosen. I can't seem to get the submenu to be centered unless I apply slide animations that account for each possible position based on number of items in the submenu list.
you would have to replicate your submenu list for every main menu item in order to get the desired effect (which leads to lot of additional code, I don´t think it´s worth it.)

And no, I dont think that there is a nicer way than applying slide animations.
Thanks for taking a look.

I don't think I can replicate the submenu, since I won't know how many main menu items the user wants/creates in the skinshortcuts script.
ah right, true. In that case there isnt any nice solution. You would have to do some ugly stuff in python to get it workin the way you want.
Just in case someone else is trying to get this to work, here is what I came up with. Its a good approximation of the default Confluence submenu effect, with just a slight text flicker on the submenu as the main menu item changes. The key ended up being the onfocus actions of the button inside the main menu fixedlist (id 9000).

Code:
<window>
    <onload>ClearProperty(MainMenuItem)</onload>
<controls>
    <!--sub menu background-->
    <control type="group" id="9001">
        <left>150</left>
        <top>10</top>
        <control type="image">
            <left>675</left>
            <top>0</top>
            <height>60</height>
            <width>270</width>
            <texture colordiffuse="tertiary">backgrounds/white.png</texture>
            <animation effect="slide" start="0,0" end="0,97" delay="200" time="200" tween="quadratic" reversible="false">Visible</animation>
            <animation effect="slide" start="0,97" end="0,0" time="200" tween="quadratic" easing="out" reversible="false">Hidden</animation>
            <visible>StringCompare(Container(9901).NumItems,1)</visible>
            <visible>Skin.HasSetting(MainMenuChange)</visible>
        </control>
        <control type="image">
            <left>540</left>
            <top>0</top>
            <height>60</height>
            <width>540</width>
            <texture colordiffuse="tertiary">backgrounds/white.png</texture>
            <animation effect="slide" start="0,0" end="0,97" delay="200" time="200" tween="quadratic" reversible="false">Visible</animation>
            <animation effect="slide" start="0,97" end="0,0" time="200" tween="quadratic" easing="out" reversible="false">Hidden</animation>
            <visible>StringCompare(Container(9901).NumItems,2)</visible>
            <visible>Skin.HasSetting(MainMenuChange)</visible>
        </control>
        <control type="image">
            <left>405</left>
            <top>0</top>
            <height>60</height>
            <width>810</width>
            <texture colordiffuse="tertiary">backgrounds/white.png</texture>
            <animation effect="slide" start="0,0" end="0,97" delay="200" time="200" tween="quadratic" reversible="false">Visible</animation>
            <animation effect="slide" start="0,97" end="0,0" time="200" tween="quadratic" easing="out" reversible="false">Hidden</animation>
            <visible>StringCompare(Container(9901).NumItems,3)</visible>
            <visible>Skin.HasSetting(MainMenuChange)</visible>
        </control>
        <control type="image">
            <left>270</left>
            <top>0</top>
            <height>60</height>
            <width>1080</width>
            <texture colordiffuse="tertiary">backgrounds/white.png</texture>
            <animation effect="slide" start="0,0" end="0,97" delay="200" time="200" tween="quadratic" reversible="false">Visible</animation>
            <animation effect="slide" start="0,97" end="0,0" time="200" tween="quadratic" easing="out" reversible="false">Hidden</animation>
            <visible>StringCompare(Container(9901).NumItems,4)</visible>
            <visible>Skin.HasSetting(MainMenuChange)</visible>
        </control>
        <control type="image">
            <left>135</left>
            <top>0</top>
            <height>60</height>
            <width>1350</width>
            <texture colordiffuse="tertiary">backgrounds/white.png</texture>
            <animation effect="slide" start="0,0" end="0,97" delay="200" time="200" tween="quadratic" reversible="false">Visible</animation>
            <animation effect="slide" start="0,97" end="0,0" time="200" tween="quadratic" easing="out" reversible="false">Hidden</animation>
            <visible>StringCompare(Container(9901).NumItems,5)</visible>
            <visible>Skin.HasSetting(MainMenuChange)</visible>
        </control>
        <control type="image">
            <left>0</left>
            <top>0</top>
            <height>60</height>
            <width>1620</width>
            <texture colordiffuse="tertiary">backgrounds/white.png</texture>
            <animation effect="slide" start="0,0" end="0,97" delay="200" time="200" tween="quadratic" reversible="false">Visible</animation>
            <animation effect="slide" start="0,97" end="0,0" time="200" tween="quadratic" reversible="false">Hidden</animation>
            <visible>IntegerGreaterThan(Container(9901).NumItems,5)</visible>
            <visible>Skin.HasSetting(MainMenuChange)</visible>
        </control>
    </control>
    
    <!--sub menu-->
    <control type="list" id="9901">
        <visible>Skin.HasSetting(MainMenuChange)</visible>
        <left>150</left>
        <top>10</top>
        <width>1620</width>
        <height>60</height>
        <onup>9000</onup>
        <ondown>9002</ondown>
        <itemgap>0</itemgap>
        <orientation>Horizontal</orientation>
        <animation effect="slide" start="0,0" end="0,-60" time="0" condition="StringCompare(Container(9901).NumItems,0)">conditional</animation>
        <animation effect="slide" start="0,0" end="675,0" time="0" condition="StringCompare(Container(9901).NumItems,1)">conditional</animation>
        <animation effect="slide" start="0,0" end="540,0" time="0" condition="StringCompare(Container(9901).NumItems,2)">conditional</animation>
        <animation effect="slide" start="0,0" end="405,0" time="0" condition="StringCompare(Container(9901).NumItems,3)">conditional</animation>
        <animation effect="slide" start="0,0" end="270,0" time="0" condition="StringCompare(Container(9901).NumItems,4)">conditional</animation>
        <animation effect="slide" start="0,0" end="135,0" time="0" condition="StringCompare(Container(9901).NumItems,5)">conditional</animation>
        <animation type="Visible" reversible="false">
            <effect type="slide" start="0,0" end="0,97" delay="200" time="200" tween="quadratic" />
            <effect type="fade" start="0" end="100" delay="400" time="200" />
        </animation>
        <itemlayout width="270" height="60">
            ...
        </itemlayout>
        <focusedlayout width="270" height="60">
            ...
        </focusedlayout>
        <content>
            <include>skinshortcuts-submenu</include>
        </content>
    </control>

    <!--main menu-->
    <control type="fixedlist" id="9000">
        <left>60</left>
        <top>8</top>
        <width>1800</width>
        <height>90</height>
        <onleft>9000</onleft>
        <onright>9000</onright>
        <onup condition="System.HasAddon(script.globalsearch)">608</onup>
        <onup condition="!System.HasAddon(script.globalsearch)">603</onup>
        <ondown>9901</ondown>
        <pagecontrol>-</pagecontrol>
        <scrolltime>300</scrolltime>
        <focusposition>2</focusposition>
        <movement>1</movement>
        <orientation>Horizontal</orientation>
        <itemlayout height="90" width="360">
            ...
        </itemlayout>
        <focusedlayout height="90" width="360">
            <control type="button">
                <texturenofocus>-</texturenofocus>
                <texturefocus>-</texturefocus>
                <onfocus condition="!StringCompare(Window.Property(MainMenuItem),Container(9000).ListItem.Label)">Skin.Reset(MainMenuChange)</onfocus>
                <onfocus condition="!StringCompare(Window.Property(MainMenuItem),Container(9000).ListItem.Label)">AlarmClock(ChangeInMainMenu,Skin.SetBool(MainMenuChange),00:00,silent)</onfocus>
                <onfocus>ClearProperty(MainMenuItem)</onfocus>
                <onfocus>SetProperty(MainMenuItem,$INFO[Container(9000).ListItem.Label])</onfocus>
            </control>
            ...
        </focusedlayout>
        <content>
            <include>skinshortcuts-mainmenu</include>
        </content>
    </control>
</controls>
keep in mind that this will probably create erros in log. ("Unsupported control type"). Buttons inside lists are not recommended to use.
Is there any other way reliably capture when the fixedlist changes focus? OnNext and OnPrevious didn't seem to capture the change when using a mouse for control.

BTW, the reason I tried the button in the focusedlayout was based on this discussion: http://forum.kodi.tv/showthread.php?tid=...#pid890512