2020-03-15, 18:38
Hi I'm struggling with what should hopefully be a fairly simple animation, but it's for a custom view so I can't use focus/unfocus.
In the video below, you can see what I'm trying to achieve, as the white square moves to the right (when Container.OnPrevious is triggered), I want a texture to fade in over the top of it to emulate it being dimmed. (The white would be a fanart, I've just made it white and the overlaying texture black so it's clearer to see the animation).
https://cl.ly/5c6542107277
My current animation works, but only the first time you press left (for Container.OnPrevious to trigger), after that the overlay seems to fully visible from the start, without fading. The way I have it working right now is...
When Container.OnPrevious is triggered, a Control (5001) becomes visible for 380ms, which is the length of the animation transition.
This is the texture and animation I have:
I tried a few things with no luck:
- Adding a Hidden animation to try and force the fade value back to 0 when the texture is hidden (when the 380ms window after a click left ends)
- Using Container.OnPrevious for the visibility condition and making it a Hidden animation. This nearly works but the problem is that because it's a hidden animation (I think), the texture shows up for the microsecond that Container.OnPrevious is visible, before then going back to 0 and fading in slowly. So you get a flicker each time the animation starts. Please see the second video for a better explanation of what I mean
https://cl.ly/ff8b22f9927f
Here is the full code for the control in question in case it helps:
And the include that it's calling (The bit I'm struggling with is under the comment <!--Unfocused overlay-->:
Anyone have any helps, would really appreciate a second opinion thanks!!
Full code: https://github.com/realcopacetic/skin.copacetic
In the video below, you can see what I'm trying to achieve, as the white square moves to the right (when Container.OnPrevious is triggered), I want a texture to fade in over the top of it to emulate it being dimmed. (The white would be a fanart, I've just made it white and the overlaying texture black so it's clearer to see the animation).
https://cl.ly/5c6542107277
My current animation works, but only the first time you press left (for Container.OnPrevious to trigger), after that the overlay seems to fully visible from the start, without fading. The way I have it working right now is...
When Container.OnPrevious is triggered, a Control (5001) becomes visible for 380ms, which is the length of the animation transition.
This is the texture and animation I have:
xml:
<control type="image">
<visible>Control.IsVisible(5001)</visible>
<animation effect="fade" start="0" end="100" condition="true" time="380" tween="sine" easing="inout" reversible="false">Visible</animation>
<texture colordiffuse="$VAR[SecondaryColor]">views/white_100.png</texture>
</control>
I tried a few things with no luck:
- Adding a Hidden animation to try and force the fade value back to 0 when the texture is hidden (when the 380ms window after a click left ends)
- Using Container.OnPrevious for the visibility condition and making it a Hidden animation. This nearly works but the problem is that because it's a hidden animation (I think), the texture shows up for the microsecond that Container.OnPrevious is visible, before then going back to 0 and fading in slowly. So you get a flicker each time the animation starts. Please see the second video for a better explanation of what I mean
https://cl.ly/ff8b22f9927f
Here is the full code for the control in question in case it helps:
xml:
<!--Move Icon 0 to 1-->
<include content="ListIcon">
<param name="position" value="1"/>
<param name="left" value="0"/>
<param name="top" value="0"/>
<param name="width" value="1080"/>
<param name="height" value="1080"/>
<param name="visible" value="Container(502).OnPrevious + Skin.String(ShowcaseView_Details,Off)"/>
<param name="animationtype" value="Hidden"/>
<param name="animationcondition" value="true"/>
<param name="animationeffect" value="slide"/>
<param name="animationend" value="1080,0"/>
<param name="fallbackid" value="17854"/>
<param name="showgradient" value="true"/>
<param name="unfocusedoverlay" value="Container.OnPrevious"/>
<param name="unfocusedoverlayanimationtype" value="Hidden"/>
<param name="unfocusedoverlayanimationcondition" value="true"/>
<param name="unfocusedoverlayanimationeffect" value="fade"/>
<param name="unfocusedoverlayanimationstart" value="0"/>
<param name="unfocusedoverlayanimationend" value="100"/>
</include>
And the include that it's calling (The bit I'm struggling with is under the comment <!--Unfocused overlay-->:
xml:
<!--ListIcon-->
<include name="ListIcon">
<param name="position" default="0"/>
<param name="left" default="0"/>
<param name="top" default="0"/>
<param name="width" default="100%"/>
<param name="height" default="100%"/>
<param name="visible" default="true"/>
<param name="animationtype" default=""/>
<param name="animationeffect" default=""/>
<param name="animationend" default=""/>
<param name="animationcondition" default="false"/>
<param name="aspectratio" default="scale"/>
<param name="fallbackid" default="17853"/>
<param name="fadetime" default="0"/>
<param name="showgradient" default="false"/>
<param name="unfocusedoverlay" default="false"/>
<param name="unfocusedoverlayanimationtype" default=""/>
<param name="unfocusedoverlayanimationeffect" default=""/>
<param name="unfocusedoverlayanimationstart" default=""/>
<param name="unfocusedoverlayanimationend" default=""/>
<param name="unfocusedoverlayanimationcondition" default="false"/>
<param name="bordervisible" default="false"/>
<param name="bordersize" default="2"/>
<param name="bordercolor" default="$VAR[PrimaryColor]"/>
<param name="bordertexture" default="views/border_1px_10.png"/>
<definition>
<control type="group">
<left>$PARAM[left]</left>
<top>$PARAM[top]</top>
<width>$PARAM[width]</width>
<height>$PARAM[height]</height>
<visible>!String.IsEmpty(Container.ListItemNoWrap($PARAM[position]).FolderPath)</visible>
<visible>$PARAM[visible]</visible>
<animation effect="$PARAM[animationeffect]" end="$PARAM[animationend]" condition="$PARAM[animationcondition]" time="380" tween="sine" easing="inout" reversible="false">$PARAM[animationtype]</animation>
<!--Fallback-->
<control type="group">
<visible>[[$EXP[ShowcaseView_IsVisible] | $EXP[StripView_IsVisible]] + String.IsEqual(Control.GetLabel($PARAM[fallbackid]),FALLBACK)] | $EXP[GridView_IsVisible]</visible>
<control type="image">
<texture colordiffuse="$VAR[AccentColor]">views/white_100.png</texture>
<aspectratio>stretch</aspectratio>
</control>
<control type="label">
<visible>$EXP[GridView_IsVisible] | [$EXP[ShowcaseView_IsVisible] + Skin.String(ShowcaseView_Details,Off)] | [$EXP[StripView_IsVisible] + Skin.String(StripView_Details,Off)]</visible>
<width>$PARAM[width]</width>
<height>$PARAM[height]</height>
<align>center</align>
<aligny>center</aligny>
<font>Body</font>
<textcolor>$VAR[LightColor]</textcolor>
<label>$INFO[ListItem($PARAM[position]).Label]</label>
</control>
</control>
<!--Artwork-->
<control type="image">
<aspectratio align="center" aligny="center">$PARAM[aspectratio]</aspectratio>
<texture background="true">views/white_100.png</texture>
<fadetime>$PARAM[fadetime]</fadetime>
</control>
<!--Unfocused overlay-->
<control type="image">
<visible>$PARAM[unfocusedoverlay]</visible>
<animation effect="$PARAM[unfocusedoverlayanimationeffect]" start="$PARAM[unfocusedoverlayanimationstart]" end="$PARAM[unfocusedoverlayanimationend]" condition="$PARAM[unfocusedoverlayanimationcondition]" time="380" tween="sine" easing="inout" reversible="false">$PARAM[unfocusedoverlayanimationtype]</animation>
<texture colordiffuse="$VAR[SecondaryColor]">views/white_100.png</texture>
</control>
<!--Progress Bar backing overlay-->
<control type="image">
<visible>$EXP[Video_Containers]</visible>
<visible>$PARAM[showgradient]</visible>
<aspectratio>stretch</aspectratio>
<texture colordiffuse="$VAR[DarkColor]">views/gradient_art-overlay.png</texture>
</control>
<!--Now Playing-->
<control type="group">
<visible>[[$EXP[ShowcaseView_IsVisible] | $EXP[StripView_IsVisible]] + [ListItem($PARAM[position]).IsPlaying | [Container.Content(tvshows) + String.IsEqual(VideoPlayer.TVShowTitle,ListItem($PARAM[position]).Title)] | [Container.Content(seasons) + String.IsEqual(VideoPlayer.TVShowTitle,ListItem($PARAM[position]).Title) + String.IsEqual(VideoPlayer.Season,ListItem($PARAM[position]).Season)] | [Container.Content(artists) + String.IsEqual(MusicPlayer.Artist, ListItem($PARAM[position]).Artist)] | [Container.Content(albums) + String.IsEqual(MusicPlayer.Artist, ListItem($PARAM[position]).Artist) + String.IsEqual(MusicPlayer.Album, ListItem($PARAM[position]).Album)]]] | $EXP[StandardViews_NowPlaying]</visible>
<visible>!$EXP[Background_IsFanart]</visible>
<control type="image">
<aspectratio>stretch</aspectratio>
<texture colordiffuse="$VAR[DarkColor]">views/white_85.png</texture>
<fadetime>$PARAM[fadetime]</fadetime>
</control>
<control type="grouplist">
<top>60</top>
<visible>!$EXP[Dialog_IsVisible]</visible>
<include>ContentFadeAnimation</include>
<orientation>vertical</orientation>
<align>center</align>
<control type="grouplist">
<orientation>horizontal</orientation>
<align>center</align>
<itemgap>10</itemgap>
<include content="NowPlayingBar"/>
<include content="NowPlayingBar">
<param name="maxheight" value="1200"/>
<param name="delay" value="90"/>
</include>
<include content="NowPlayingBar">
<param name="maxheight" value="850"/>
<param name="delay" value="180"/>
</include>
</control>
</control>
</control>
<!--Border-->
<control type="image">
<visible>$PARAM[bordervisible]</visible>
<visible>!$EXP[Dialog_IsVisible]</visible>
<include>ContentFadeAnimation</include>
<aspectratio>stretch</aspectratio>
<texture border="$PARAM[bordersize]" colordiffuse="$PARAM[bordercolor]">$PARAM[bordertexture]</texture>
</control>
</control>
</definition>
</include>
Anyone have any helps, would really appreciate a second opinion thanks!!
Full code: https://github.com/realcopacetic/skin.copacetic
