Animation only running on first container scroll
#1
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:


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



                            <!--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-->:


    <!--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
Reply
#2
Is this inside focusedlayout of a list/panel? Because you could use "Focus" and "Unfocus" animation types instead if that's the case - They will trigger each time a new item in the list/panel is focused.
https://kodi.wiki/view/Animating_your_skin#Types

Otherwise, try inverting your conditions. Instead of Container.OnPrevious and a Visible animation, try !Container.OnPrevious in a Conditional animation or with Hidden animation. I generally seem to have better success with OnNext/Previous using not conditionals - for instance, I often use this animation for slide to next/prev item:

<animation effect="slide" tween="quadratic" start="0" end="-1920" time="400" condition="!Container($PARAM[listid]).OnNext" reversible="false">Conditional</animation>
<animation effect="slide" tween="quadratic" start="0" end="1920" time="400" condition="!Container($PARAM[listid]).OnPrevious" reversible="false">Conditional</animation>
Reply
#3
(2020-03-17, 01:03)jurialmunkey Wrote: Is this inside focusedlayout of a list/panel? Because you could use "Focus" and "Unfocus" animation types instead if that's the case - They will trigger each time a new item in the list/panel is focused.
https://kodi.wiki/view/Animating_your_skin#Types

Otherwise, try inverting your conditions. Instead of Container.OnPrevious and a Visible animation, try !Container.OnPrevious in a Conditional animation or with Hidden animation. I generally seem to have better success with OnNext/Previous using not conditionals - for instance, I often use this animation for slide to next/prev item:

<animation effect="slide" tween="quadratic" start="0" end="-1920" time="400" condition="!Container($PARAM[listid]).OnNext" reversible="false">Conditional</animation>
<animation effect="slide" tween="quadratic" start="0" end="1920" time="400" condition="!Container($PARAM[listid]).OnPrevious" reversible="false">Conditional</animation>

Thanks @jurialmunkey it's outside of a focusedlayout as I ended up manually building this view, but your idea of inverting the conditions sounds promising, I hadn't thought to try that! Will give it a go and report back thanks
Reply
#4
(2020-03-17, 18:38)QuizKid Wrote:
(2020-03-17, 01:03)jurialmunkey Wrote: Is this inside focusedlayout of a list/panel? Because you could use "Focus" and "Unfocus" animation types instead if that's the case - They will trigger each time a new item in the list/panel is focused.
https://kodi.wiki/view/Animating_your_skin#Types

Otherwise, try inverting your conditions. Instead of Container.OnPrevious and a Visible animation, try !Container.OnPrevious in a Conditional animation or with Hidden animation. I generally seem to have better success with OnNext/Previous using not conditionals - for instance, I often use this animation for slide to next/prev item:

<animation effect="slide" tween="quadratic" start="0" end="-1920" time="400" condition="!Container($PARAM[listid]).OnNext" reversible="false">Conditional</animation>
<animation effect="slide" tween="quadratic" start="0" end="1920" time="400" condition="!Container($PARAM[listid]).OnPrevious" reversible="false">Conditional</animation>

Thanks @jurialmunkey it's outside of a focusedlayout as I ended up manually building this view, but your idea of inverting the conditions sounds promising, I hadn't thought to try that! Will give it a go and report back thanks 

!Container.OnPrevious and Visible did just what I wanted! Thanks a million!!
Reply
 
Thread Rating:
  • 0 Vote(s) - 0 Average



Logout Mark Read Team Forum Stats Members Help
Animation only running on first container scroll00
This forum uses Lukasz Tkacz MyBB addons.