wraplist control animation - condition to check if moving forward or backwards
#1
I'm trying out some animation in a WrapList control and in this I have <itemlayout> smaller than <focusedlayout>. My focused item stays in center in this and is zoomed in. I've setup delay, start, end position for the animation and it all looks good and smooth ONLY if I am going forward.

The problem is when I'm going backwards - then the animation start and end make the animation jarring (jerky/jumpy). I think if I can add a condition to the animation so that I can choose different start and end position when going forward vs when going backwards then I can achieve smooth motion in both direction.

Can someone please advice on how to check if I am going forward or backwards in a wraplist.

Here is my code:

          <control type="wraplist" id="120"> <!-- Icon and Title -->
                    <viewtype label="3D list">list</viewtype>
                    <orientation>horizontal</orientation>
                    <pagecontrol>25</pagecontrol>
                    <focusposition>3</focusposition>
                    <autoscroll>false</autoscroll>
               <left>60</left>
               <top>290</top>
               <width>1210</width>
               <height>420</height>
               <onleft>2051</onleft>
               <onright>60</onright>
               <onup>52</onup>
               <ondown>52</ondown>
               <scrolltime tween="Quadratic" easing="in">250</scrolltime>
               <preloaditems>10</preloaditems>
               <pagecontrol>60</pagecontrol>
               <itemlayout height="340" width="164">
                    <control type="image"> <!-- thumbnail -->
                         <left>8</left>
                         <top>140</top>
                         <width>150</width>
                         <height>200</height>
                         <info>ListItem.Icon</info>
                    </control>
               </itemlayout>
               <focusedlayout height="340" width="260">
                    <control type="image">
                         <left>1</left>
                         <top>0</top>
                         <width>258</width>
                         <height>340</height>
                         <info>ListItem.Icon</info>
                         <animation effect="zoom" delay="250" start="102,140,150,200" time="200">focus</animation>
                         <animation effect="zoom" delay="250" end="8,140,150,200" time="200">unfocus</animation>
                    </control>
               </focusedlayout>
          </control>
Reply
#2
Container(id).OnNext | Returns true if the container with id (or current container if id is omitted) is moving to the next item. Allows views to be custom-designed (such as 3D coverviews etc.)
Container(id).OnPrevious | Returns true if the container with id (or current container if id is omitted) is moving to the previous item. Allows views to be custom-designed (such as 3D coverviews etc.)
Reply
#3
Thanks @Hitcher .

I updated my XML code to include the condition, but now it does not animate:

<animation effect="zoom" delay="250" start="102,140,150,200" time="200" condition="Container(120).OnNext">Conditional</animation>
<animation effect="zoom" delay="250" end="8,140,150,200" time="200" condition="Container(120).OnNext">Conditional</animation>

I even tried Container(120).OnNext() but still no luck. Any suggestions on how to troubleshoot this ? Thanks!
Reply
#4
I should have added whats not working. - The focused item looks the same as all other items. No zoom happened now.

I did find one mistake, the new condition should have been a boolean AND of two conditions like this:

<animation effect="zoom" delay="250" start="102,140,150,200" time="200" condition="Container(120).OnNext + Focus">Conditional</animation>
<animation effect="zoom" delay="250" end="8,140,150,200" time="200" condition="Container(120).OnNext + Unfocus">Conditional</animation>

Otherwise, both animation statements were met and the net effect was zero, and the focused item looked the same as all other items.

I'm trying a few other things and will post an update soon.

Due to your suggestion I stumbled across this documentation: 
https://kodi.wiki/view/List_of_boolean_conditions
Reply
#5
OK, so the correct way to write conditions is as follows:

<animation effect="zoom" delay="250" start="104,140,150,200" time="200" condition="Container(120).OnNext">focus</animation>
<animation effect="zoom" delay="250" end="8,140,150,200" time="200" condition="Container(120).OnNext">unfocus</animation>

This restored my good smooth scroll and zoom when going forward only. So back to how I had it in the beginning.

Since the condition is working, I am now able to use another set of animations for Container(id).OnPrevious . So thats a good place to be. 

I still haven't figured out which values would work and am still working on it. I'll update tomorrow with question or solution.
Reply
 
Thread Rating:
  • 0 Vote(s) - 0 Average



Logout Mark Read Team Forum Stats Members Help
wraplist control animation - condition to check if moving forward or backwards00