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

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