Information - zoom animation performed incorrectly (not centered)

Information zoom animation performed incorrectly (not centered) - Printable Version

+- Kodi Community Forum (https://forum.kodi.tv)
+-- Forum: Development (https://forum.kodi.tv/forumdisplay.php?fid=32)
+--- Forum: Skinning (https://forum.kodi.tv/forumdisplay.php?fid=12)
+--- Thread: Information zoom animation performed incorrectly (not centered) (/showthread.php?tid=379298)

zoom animation performed incorrectly (not centered) - Andrea1998 - 2024-10-29

I have a problem regarding how zoom animations are performed.

If this animation is inserted inside the image, the zoom is performed correctly from center 100 towards center 140.

xml:
<animation effect="zoom" start="100" end="120" center="auto" time="200">Focus</animation>

<animation effect="zoom" start="120" end="100" center="auto" time="200">UnFocus</animation>

But if the zoom is inserted inside a group, the group zoom is not done correctly from center 100 towards center 140, but is moved slightly to the left and therefore is not central.

Is this behavior normal?

I leave the code below:

zoom ok, from center 100 to center 140 (zoom animation remains central):

xml:


                 <itemlayout height="397" width="320"....               

                 <focusedlayout height="397" width="320" condition="Container.Content(movies) | Container.Content(tvshows) | Container.Content(seasons)">

                    <control type="group">

                        <control type="image">

                            <top>15</top>

                            <left>-45</left>

                            <width>360</width>

                            <height>400</height>

                            <animation effect="zoom" start="100" end="140" center="auto" time="200">Focus</animation>

                            <animation effect="zoom" start="140" end="100" center="auto" time="200">UnFocus</animation>

                            <texture background="true">CoverShadow.png</texture>

                            <aspectratio>stretch</aspectratio>

                            <visible>String.IsEqual(ListItem.DBType,movie) | String.IsEqual(ListItem.DBType,tvshow) | String.IsEqual(ListItem.DBType,season)</visible>

                        </control>

                        <control type="image">

                            <top>45</top>

                            <left>-9</left>

                            <width>278</width>

                            <height>356</height>

                            <animation effect="zoom" start="100" end="140" center="auto" time="200">Focus</animation>

                            <animation effect="zoom" start="140" end="100" center="auto" time="200">UnFocus</animation>

                            <texture fallback="DefaultVideo.png" diffuse="CoverBorder.png" background="true">$INFO[ListItem.Art(poster)]</texture>

                            <visible>String.IsEqual(ListItem.DBType,movie) | String.IsEqual(ListItem.DBType,tvshow) | String.IsEqual(ListItem.DBType,season)</visible>

                        </control>

                        <control type="image">

                            <top>342</top>

                            <left>233</left>

                            <width>50</width>

                            <height>50</height>

                            <animation effect="zoom" start="100" end="140" center="auto" time="200">Focus</animation>

                            <animation effect="zoom" start="140" end="100" center="auto" time="200">UnFocus</animation>

                            <texture>overlaywatched.png</texture>

                            <visible>Integer.IsGreater(ListItem.Playcount,0)</visible>

                        </control>

                    </control>

                </focusedlayout>

incorrect zoom from center 100 to center 140 (zoom animation remains moving to the left):

xml:
<focusedlayout height="397" width="320" condition="Container.Content(movies) | Container.Content(tvshows) | Container.Content(seasons)">

                    <control type="group">

                        <animation effect="zoom" start="100" end="140" center="auto" time="200">Focus</animation>

                        <animation effect="zoom" start="140" end="100" center="auto" time="200">UnFocus</animation>

                        <control type="image">

                            <top>15</top>

                            <left>-45</left>

                            <width>360</width>

                            <height>400</height>

                            <texture background="true">CoverShadow.png</texture>

                            <aspectratio>stretch</aspectratio>

                            <visible>String.IsEqual(ListItem.DBType,movie) | String.IsEqual(ListItem.DBType,tvshow) | String.IsEqual(ListItem.DBType,season)</visible>

                        </control>

                        <control type="image">

                            <top>45</top>

                            <left>-9</left>

                            <width>278</width>

                            <height>356</height>

                            <texture fallback="DefaultVideo.png" diffuse="CoverBorder.png" background="true">$INFO[ListItem.Art(poster)]</texture>

                            <visible>String.IsEqual(ListItem.DBType,movie) | String.IsEqual(ListItem.DBType,tvshow) | String.IsEqual(ListItem.DBType,season)</visible>

                        </control>

                        <control type="image">

                            <top>342</top>

                            <left>233</left>

                            <width>50</width>

                            <height>50</height>

                            <texture>overlaywatched.png</texture>

                            <visible>Integer.IsGreater(ListItem.Playcount,0)</visible>

                        </control>

                    </control>

                </focusedlayout>

Is it wrong to use animation inside a group in a focused layout?

Why do i get this shift in zoom?

Any help is appreciated.

Thank you all

RE: zoom animation performed incorrectly (not centered) - Hitcher - 2024-10-29

As you haven't defined the width or height of the group it will use the values of its parent control, which in this case is the focused layout values height="397" and width="320".

RE: zoom animation performed incorrectly (not centered) - Andrea1998 - 2024-11-01

(2024-10-29, 23:29)Hitcher Wrote: As you haven't defined the width or height of the group it will use the values of its parent control, which in this case is the focused layout values height="397" and width="320".

Unfortunately the situation does not change, I tried to add the parameters <width>320</width> and <height>397</height> in the group but the result is the same.

The zoom is slightly off-center, we are talking about about 1 mm more on the side, but it is very annoying.

This code comes from global search script (I slightly changed the parameter values) and I noticed that even in the estuary skin in the animations it is almost never reported center="auto".
the centering is always done manually (ex. center="120,117"), and in fact I had to modify it so that it happened correctly with center="auto", but I can't make it work.

Are there any problems with this?

Forgive me for the late reply.

xml:
<control type="panel" id="50">

                <top>100</top>

                <left>465</left>

                <width>1500</width>

                <height>860</height>

                <onleft>9000</onleft>

                <viewtype label="536">icon</viewtype>

                <preloaditems>4</preloaditems>

                <animation effect="fade" time="200">VisibleChange</animation>

                <scrolltime tween="cubic" easing="out">500</scrolltime>

                <itemlayout height="397" width="320" condition="Container.Content(movies) | Container.Content(tvshows) | Container.Content(seasons)">

                    <control type="group">

                        <top>49</top>

                        <left>116</left>

                        <height>397</height>

                        <width>320</width>

                        <control type="image">

                            <top>15</top>

                            <left>-45</left>

                            <width>360</width>

                            <height>400</height>

                            <texture background="true">CoverShadow.png</texture>

                            <aspectratio>stretch</aspectratio>

                            <visible>String.IsEqual(ListItem.DBType,movie) | String.IsEqual(ListItem.DBType,tvshow) | String.IsEqual(ListItem.DBType,season)</visible>

                        </control>

                        <control type="image">

                            <top>45</top>

                            <left>-9</left>

                            <width>278</width>

                            <height>356</height>

                            <texture fallback="DefaultVideo.png" diffuse="CoverBorder.png" background="true">$INFO[ListItem.Art(poster)]</texture>

                            <visible>String.IsEqual(ListItem.DBType,movie) | String.IsEqual(ListItem.DBType,tvshow) | String.IsEqual(ListItem.DBType,season)</visible>

                        </control>

                        <control type="image">

                            <top>342</top>

                            <left>233</left>

                            <width>50</width>

                            <height>50</height>

                            <texture>overlaywatched.png</texture>

                            <visible>Integer.IsGreater(ListItem.Playcount,0)</visible>

                        </control>

                        <control type="image">

                            <top>50</top>

                            <left>-25</left>

                            <width>238</width>

                            <height>316</height>

                            <texture>DefaultFolderBack.png</texture>

                            <visible>!String.IsEqual(ListItem.DBType,movie) + !String.IsEqual(ListItem.DBType,tvshow) + !String.IsEqual(ListItem.DBType,season)</visible>

                        </control>

                    </control>

                </itemlayout>

                .

                .

                .

                <focusedlayout height="397" width="320" condition="Container.Content(movies) | Container.Content(tvshows) | Container.Content(seasons)">

                    <control type="group">

                        <top>49</top>

                        <left>116</left>

                        <height>397</height>

                        <width>320</width>

                        <animation type="Focus">

                            <effect type="zoom" start="100" end="107" time="200" tween="sine" easing="inout" center="auto" />

                        </animation>

                        <animation type="Unfocus">

                            <effect type="zoom" start="107" end="100" time="200" tween="sine" easing="inout" center="auto" />

                        </animation>

                        <control type="image">

                            <top>15</top>

                            <left>-45</left>

                            <width>360</width>

                            <height>400</height>

                            <texture background="true">CoverShadow.png</texture>

                            <aspectratio>stretch</aspectratio>

                            <visible>String.IsEqual(ListItem.DBType,movie) | String.IsEqual(ListItem.DBType,tvshow) | String.IsEqual(ListItem.DBType,season)</visible>

                        </control>

                        <control type="image">

                            <top>45</top>

                            <left>-9</left>

                            <width>278</width>

                            <height>356</height>

                            <texture fallback="DefaultVideo.png" diffuse="CoverBorder.png" background="true">$INFO[ListItem.Art(poster)]</texture>

                            <visible>String.IsEqual(ListItem.DBType,movie) | String.IsEqual(ListItem.DBType,tvshow) | String.IsEqual(ListItem.DBType,season)</visible>

                        </control>

                        <control type="image">

                            <top>342</top>

                            <left>233</left>

                            <width>50</width>

                            <height>50</height>

                            <texture>overlaywatched.png</texture>

                            <visible>Integer.IsGreater(ListItem.Playcount,0)</visible>

                        </control>

                    </control>

                </focusedlayout>

                .

                .

                .

            </control>

RE: zoom animation performed incorrectly (not centered) - Hitcher - 2024-11-03

You might have to just add you own center values.

xml:
<focusedlayout height="397" width="320" condition="Container.Content(movies) | Container.Content(tvshows) | Container.Content(seasons)">

                    <control type="group">

                        <animation effect="zoom" start="100" end="140" center="x,y" time="200">Focus</animation>

                        <animation effect="zoom" start="140" end="100" center="x,y" time="200">UnFocus</animation>

                        <control type="image">

Using a debug grid, taking screenshots and then opening them in an editor can help working out the values.

That's what I've done in the past.

RE: zoom animation performed incorrectly (not centered) - Andrea1998 - 2024-11-03

(2024-11-03, 14:59)Hitcher Wrote: You might have to just add you own center values.

Thanks for the suggestion, I think setting the values manually is the only way to make it work properly.

What i don't understand is why there is this problem/bug, and why is it not fixed?
Now i understand why in the skin many central zoom values are set manually, but isn't it easier to fix the problem?

It might only bother me, but it is also true that having to find the values manually every time is a long job and is never as precise as a default value set to "auto".

Thanks for all your help.

RE: zoom animation performed incorrectly (not centered) - Hitcher - 2024-11-03

I'm not sure if auto will take the top and left values into account when working out the centre point.

RE: zoom animation performed incorrectly (not centered) - Andrea1998 - 2024-11-04

I tried both using them and removing them, the result is the same, if they are not considered the result would change a lot, I think, because they are high numbers.