Animation when switching between different item/focuslayouts
#1
Hi, is it possible to have an animation trigger when switching between different item or focus layouts?

I have a panel list with three layouts, one for fanart, one for posters and one for square. Each layout has a conditional value to determine whether it is selected and this is based on a skin string.

I've tried wrapping the contents of the layouts in a control with the desired visibility condition and animation, I've also tried doing the same specifically within the Include that I use to populate the layout, but neither seems to trigger. It works fine on the views I have manually built, but where I'm placing content directly into the panel or list layouts themselves, it doesn't seem to work.

Here is an example


                <itemlayout width="592" height="333" condition="Skin.String(GridView_Display,Fanart)">
                    <control type="group">
                        <visible>Skin.String(GridView_Display,Fanart)</visible>
                        <animation effect="fade" start="0" end="100" time="190" tween="sine" easing="out" delay="380">Visible</animation>
                        <animation effect="fade" start="100" end="0" time="0">Hidden</animation>
                        <include>GridViewtItemLayout_Fanart</include>
                    </control>
                </itemlayout>

                <focusedlayout width="592" height="333" condition="Skin.String(GridView_Display,Fanart)">
                    <control type="group">
                        <visible>Skin.String(GridView_Display,Fanart)</visible>
                        <animation effect="fade" start="0" end="100" time="190" tween="sine" easing="out" delay="380">Visible</animation>
                        <animation effect="fade" start="100" end="0" time="0">Hidden</animation>
                        <include>HiddenFocusButton</include>
                        <include>HiddenGridFocusButton</include>
                        <include>GridViewFocusLayout_Fanart</include>
                    </control>
                </focusedlayout>
Reply
#2
Skin Strings are not available inside itemlayout, that's why your visible condition doesn't work.

Is there any reason you need to use the same panel control for all three layouts? If you separate into three different panels, then you can use visible condition and animation in each panel when the skin string changes.
Reply
#3
(2020-02-08, 08:26)jurialmunkey Wrote: Skin Strings are not available inside itemlayout, that's why your visible condition doesn't work.

Is there any reason you need to use the same panel control for all three layouts? If you separate into three different panels, then you can use visible condition and animation in each panel when the skin string changes.

Thanks, that makes sense, I'll do it like that
Reply
#4
(2020-02-08, 16:34)QuizKid Wrote:
(2020-02-08, 08:26)jurialmunkey Wrote: Skin Strings are not available inside itemlayout, that's why your visible condition doesn't work.

Is there any reason you need to use the same panel control for all three layouts? If you separate into three different panels, then you can use visible condition and animation in each panel when the skin string changes.

Thanks, that makes sense, I'll do it like that 
Sorry @jurialmunkey do you mean having multiple containers within one viewtype or splitting them out into multiple viewtypes? I don't want to do the latter because I have 6 different layouts for this view alone (Fanart, Fanart and Titles, Poster, Poster and Titles, Square, Square and Titles). If it's the former, I'm having a bit of trouble figuring out how to approach this I think because of the IDs. Would each container need to have a different ID? I tried that and it didn't seem to work for some reason
Reply
#5
this is what i use on the widget

<include name="WidgetListprime">
        <param name="sortby"/>
        <param name="visible">true</param>
        <param name="sortorder">ascending</param>
        <param name="widget_limit">500</param>
        <definition>
            <include content="CategoryLabel">
                <param name="label">$PARAM[widget_header]</param>
                <param name="list_id" value="$PARAM[list_id]"/>
            </include>
            <include content="BusyListSpinner">
                <param name="list_id" value="$PARAM[list_id]"/>
                <param name="posy" value="100"/>
            </include>
            <control type="panel" id="$PARAM[list_id]">
                <left>100</left>
                <top>15</top>
                <right>0</right>
                <height>360</height>
                <include content="WidgetListCommon">
                    <param name="list_id" value="$PARAM[list_id]"/>
                </include>
                <visible>$PARAM[visible]</visible>
                <visible>Integer.IsGreater(Container($PARAM[list_id]).NumItems,0) | Container($PARAM[list_id]).IsUpdating</visible>
                <itemlayout width="360" height="240">
                    <control type="group">
                        <left>2</left>
                        <top>15</top>
                        <include content="InfoWallprimeLayout">
                            <param name="focused" value="false" />
                        </include>
                    </control>
                </itemlayout>
                <focusedlayout width="360" height="240">
                    <control type="group">
                        <depth>DepthContentPopout</depth>
                        <left>90</left>
                        <top>0</top>
                        <animation >
                            <effect type="zoom" start="100" end="60" time="500" tween="sine" easing="inout" center="0,300" />
                        </animation>
                        <animation effect="rotatex" end="360" center="auto" time="800" loop="false" reversible="false" >Focus</animation>
                        <animation type="Focus">
                            <effect type="zoom" start="40" end="220" time="500" tween="sine" easing="inout" center="0,300" />
                        </animation>
                        <animation effect="rotatey" end="-360" center="auto" time="800" loop="false" reversible="true" >Unfocus</animation>
                        <animation type="Unfocus">
                            <effect type="zoom" start="220" end="60" time="500" tween="sine" easing="inout" center="0,300" />
                            <animation effect="slide" time="2500" delay="300" tween="back" easing="out" start="-300,0" end="0,0">WindowOpen</animation>
                            <animation effect="slide" time="2500" delay="300" tween="back" easing="out" start="-300,0" end="0,0">Visible</animation>
                            <animation effect="slide" time="1500" delay="00" tween="back" easing="in" start="0,0" end="-300,0">WindowClose</animation>
                            <animation effect="slide" time="1500" delay="00" tween="back" easing="in" start="0,0" end="-300,0">Hidden</animation>
                        </animation>
                        <animation effect="slide" end="0,300" time="200">Unfocus</animation>
                        <include content="InfoWallMovieLayout">
                            <param name="focused" value="true" />
                        </include>
                    </control>
                </focusedlayout>
                <content sortby="$PARAM[sortby]" sortorder="$PARAM[sortorder]" target="$PARAM[widget_target]" limit="$PARAM[widget_limit]">$PARAM[content_path]</content>
            </control>
        </definition>
    </include>

 <animation type="Focus"> <animation type="Unfocus">
Reply
#6
(2020-02-08, 18:03)QuizKid Wrote:
(2020-02-08, 16:34)QuizKid Wrote:
(2020-02-08, 08:26)jurialmunkey Wrote: Skin Strings are not available inside itemlayout, that's why your visible condition doesn't work.

Is there any reason you need to use the same panel control for all three layouts? If you separate into three different panels, then you can use visible condition and animation in each panel when the skin string changes.

Thanks, that makes sense, I'll do it like that 
Sorry @jurialmunkey do you mean having multiple containers within one viewtype or splitting them out into multiple viewtypes? I don't want to do the latter because I have 6 different layouts for this view alone (Fanart, Fanart and Titles, Poster, Poster and Titles, Square, Square and Titles). If it's the former, I'm having a bit of trouble figuring out how to approach this I think because of the IDs. Would each container need to have a different ID? I tried that and it didn't seem to work for some reason

Yeah, I meant splitting out into multiple viewtypes. Why is that a problem?
You can use Container.SetViewMode(id) to set a specific viewmode ID. If you put <visible>Skin.String(GridView_Display,Fanart)</visible> in the relevant panel control, then users will only be able to cycle to it if that skin string is set.

You can use both in conjunction to set the correct view. e.g. say Fanart is view 54 and Poster is view 52:
(I'm not sure how you toggle the views exactly but here is an example to get you started)

<onclick condition="Skin.String(GridView_Display,Fanart)">Skin.SetString(GridView_Display,Poster)</onclick>
<onclick condition="Skin.String(GridView_Display,Fanart)">Container.SetViewMode(52)</onclick>
<onclick condition="Skin.String(GridView_Display,Poster)">Skin.SetString(GridView_Display,Fanart)</onclick>
<onclick condition="Skin.String(GridView_Display,Poster)">Container.SetViewMode(54)</onclick>


<control type="panel" id="52">
<visible>Skin.String(GridView_Display,Poster)</visible>
[... rest of panel ...]
</control>
<control type="panel" id="54">
<visible>Skin.String(GridView_Display,Fanart)</visible>
[... rest of panel ...]
</control>

If you want to group them via ID, then use the 500 range: e.g. 511 for poster, 512 for fanart, 513 for square (or whatever) of one viewtype, then for the next style 521 for poster, 522 for fanart, 523 for square etc.
You need to put all IDs in the <views> tag.
Reply
#7
Thanks @jurialmunkey I hadn't thought of changing how the view types are selected in my menu. I'll have a go at doing this how you suggested.

Thanks for explaining it so clearly!!
Reply
#8
(2020-02-09, 01:25)the_other_guy Wrote: this is what i use on the widget

<include name="WidgetListprime">
        <param name="sortby"/>
        <param name="visible">true</param>
        <param name="sortorder">ascending</param>
        <param name="widget_limit">500</param>
        <definition>
            <include content="CategoryLabel">
                <param name="label">$PARAM[widget_header]</param>
                <param name="list_id" value="$PARAM[list_id]"/>
            </include>
            <include content="BusyListSpinner">
                <param name="list_id" value="$PARAM[list_id]"/>
                <param name="posy" value="100"/>
            </include>
            <control type="panel" id="$PARAM[list_id]">
                <left>100</left>
                <top>15</top>
                <right>0</right>
                <height>360</height>
                <include content="WidgetListCommon">
                    <param name="list_id" value="$PARAM[list_id]"/>
                </include>
                <visible>$PARAM[visible]</visible>
                <visible>Integer.IsGreater(Container($PARAM[list_id]).NumItems,0) | Container($PARAM[list_id]).IsUpdating</visible>
                <itemlayout width="360" height="240">
                    <control type="group">
                        <left>2</left>
                        <top>15</top>
                        <include content="InfoWallprimeLayout">
                            <param name="focused" value="false" />
                        </include>
                    </control>
                </itemlayout>
                <focusedlayout width="360" height="240">
                    <control type="group">
                        <depth>DepthContentPopout</depth>
                        <left>90</left>
                        <top>0</top>
                        <animation >
                            <effect type="zoom" start="100" end="60" time="500" tween="sine" easing="inout" center="0,300" />
                        </animation>
                        <animation effect="rotatex" end="360" center="auto" time="800" loop="false" reversible="false" >Focus</animation>
                        <animation type="Focus">
                            <effect type="zoom" start="40" end="220" time="500" tween="sine" easing="inout" center="0,300" />
                        </animation>
                        <animation effect="rotatey" end="-360" center="auto" time="800" loop="false" reversible="true" >Unfocus</animation>
                        <animation type="Unfocus">
                            <effect type="zoom" start="220" end="60" time="500" tween="sine" easing="inout" center="0,300" />
                            <animation effect="slide" time="2500" delay="300" tween="back" easing="out" start="-300,0" end="0,0">WindowOpen</animation>
                            <animation effect="slide" time="2500" delay="300" tween="back" easing="out" start="-300,0" end="0,0">Visible</animation>
                            <animation effect="slide" time="1500" delay="00" tween="back" easing="in" start="0,0" end="-300,0">WindowClose</animation>
                            <animation effect="slide" time="1500" delay="00" tween="back" easing="in" start="0,0" end="-300,0">Hidden</animation>
                        </animation>
                        <animation effect="slide" end="0,300" time="200">Unfocus</animation>
                        <include content="InfoWallMovieLayout">
                            <param name="focused" value="true" />
                        </include>
                    </control>
                </focusedlayout>
                <content sortby="$PARAM[sortby]" sortorder="$PARAM[sortorder]" target="$PARAM[widget_target]" limit="$PARAM[widget_limit]">$PARAM[content_path]</content>
            </control>
        </definition>
    </include>

 <animation type="Focus"> <animation type="Unfocus">
Thanks, apologies if it wasn't clear, but I need the animation to trigger when a skin string within the options menu rather than onfocus/unfocus. In essence, what I was trying to do was have a nice fade animation between my posters grid, my fanart grid and my squares grid as you switch between them. I think @jurialmunkey's suggestion should do the business.
Reply
#9
I was having trouble with this because of the way I had set up my menu for cycling through viewtypes (3000). The first row cycles through viewtypes, while when Grid is selected, both the second row Display and the third row Details scroll through different item/focuslayout configurations with display scrolling between fanart/posters/squares and details scrolling between a version with no vertical space between the rows and and a version with space included. 

Image

Because of this, once I had made each set of item/focus layouts into a separate viewtype XML file, it was getting complicated figuring out how to cycle through the viewtypes without breaking things.

In the end, I reverted back to my original version but I figured out how to get the animation I wanted to trigger as you cycle through the options for Display or Details. This is probably an incredibly roundabout way to do what I wanted, but a) I don't have much coding experience beyond a few months of learning the basics and b) it seems to work ok in practice.

For anyone interested, I did this by adding an id (942,943,944,945,946,947) to each of the <items> in my grouplist (3000) that populates the Display and Detail rows of options. (Each of these corresponds to a different set of item/focuslayouts for my grid). Then in the grouplist, I added some conditional onleft/onright commands so that each time left or right is pressed to cycle through the id'd options, focus is given to a hidden button (940). This button gives focus right back to the grouplist (3000), and the user experience is seamless, you basically don't notice that focus has been given away for a frame/milisecond/whatever the measurement of time is. Because the visibility animation on the grouplist is reversible, the change is also imperceptible, basically going from 100% visibility to something like 99.9% visibility in the time it takes to get focus back.

I then had a further hidden control (941) that becomes visible when the button (940) is focused. It has an 'empty' slide animation designed to keep it visible for 380 milliseconds, which is the amount of time I wish to delay my final grid visibility animation by. Now on my grid, I just added a visibility condition that says 940 is NOT visible. And now every time those options are cycled through, it is hidden instantly for 380 miliseconds, then the new item/focus layout fades in over the desired timeframe.

Phew! Anwyay thanks again @jurialmunkey for your suggestion, which I understand is still a better option, but I couldn't face redoing that menu options grouplist, as it's already a complete mess of visibility conditions and a million different controls
Reply
#10
No worries! Clever solution you found in the end!
Reply
 
Thread Rating:
  • 0 Vote(s) - 0 Average



Logout Mark Read Team Forum Stats Members Help
Animation when switching between different item/focuslayouts00