Setting the boundary for a zoom animation
#1
Hi, I have a zoom animation on the fanart control of my focusedlayout, but right now it goes beyond the width and height boundaries that I set on the focused item and the image control:

Image

Is there a way to limit the visible boundary of the zoom effect to keep it within the width and height specified on the <focusedlayout> (the area contained within the green rectangle)?

In my viewtypes I have multiple focusedlayouts depending on the size selected in the viewtype options

xml:

                <focusedlayout width="960" height="540" condition="Skin.String(FanartColumns,2)">
                    <include>FanartFocusedLayout</include>
                </focusedlayout>
                <itemlayout width="640" height="360" condition="Skin.String(FanartColumns,3)">
                    <include>FanartItemLayout</include>
                </itemlayout>
                <focusedlayout width="640" height="360" condition="Skin.String(FanartColumns,3)">
                    <include>FanartFocusedLayout</include>
                </focusedlayout>
                <itemlayout width="480" height="270" condition="Skin.String(FanartColumns,4)">
                    <include>FanartItemLayout</include>
                </itemlayout>
                <focusedlayout width="480" height="270" condition="Skin.String(FanartColumns,4)">
                    <include>FanartFocusedLayout</include>
                </focusedlayout>

The include FanartFocusedLayout contains the controls and the animation:

xml:

<!--Viewtype: Fanart Focused Layout-->
    <include name="FanartFocusedLayout">
        <control type="group">
            <control type="button">
                <visible>false</visible>
            </control>
            <control type="image">
                <animation type="focus" reversible="false">
                    <effect type="zoom" start="125" end="100" time="600" tween="sine" easing="inout" center="auto" />
                </animation>
                <description>Fanart or Landscape</description>
                <aspectratio>scale</aspectratio>
                <texture background="true">$VAR[WallIcon]</texture>
            </control>
            <control type="image">
                <description>Border</description>
                <include>HideMediaDetails</include>
                <texture colordiffuse="$VAR[FocusedColor]" border="10">views/border_5px.png</texture>
            </control>
            <control type="image">
                <description>Focused Check Mark</description>
                <right>15</right>
                <top>15</top>
                <include>CheckFocused</include>
            </control>
        </control>
    </include>
Reply
#2
You will need something like Zoom InOut.

But i am unsure if it that what you want.


e.g. here is an example with slight 'overhang' (end 93% , depended to first column end 115% - play around with wished attributes.



<include name="Item_Focus_Animation">
        <animation type="Focus" reversible="false">
            <effect type="zoom" end="115,115" time="200" tween="sine" easing="out" center="auto" />
            <effect type="zoom" end="93,93" time="150" tween="sine" delay="200" easing="out" center="auto" />
        </animation>
    </include>
Skins |  Titan M O D   •   S W A N (WIP)
Reply
#3
(2019-10-14, 14:29)mardukL Wrote: You will need something like Zoom InOut.

But i am unsure if it that what you want.


e.g. here is an example with slight 'overhang' (end 93% , depended to first column end 115% - play around with wished attributes.



<include name="Item_Focus_Animation">
        <animation type="Focus" reversible="false">
            <effect type="zoom" end="115,115" time="200" tween="sine" easing="out" center="auto" />
            <effect type="zoom" end="93,93" time="150" tween="sine" delay="200" easing="out" center="auto" />
        </animation>
    </include>

Thanks @mardukL, that's certainly a nicer animation and what I was ultimately going for in terms of the zoom effect, but it has the same issue that it goes outside the boundaries I've set for the focus item, which is what I want to avoid.

I basically want the zoom to go from this:

Image

to this:

Image

So the fanart gets bigger, but it stays cropped to the size of the focused item (in this case 640x360).
Reply
#4
never tried this, but may its possible to do first the focused Layout in the List and then the ItemLayout, if this works and behave like it might could, this could be a solution, as then the zoomed Poster/Fanart gets overlayd by the unfocused Items.

xml:
<focusedlayout></focusedlayout>
<Itemlayout></itemlayout>

guess there isnt a ("unhacky") way to let the Poster zoom within a specivic fixed high and widht. (at least i dont knew one. - can be wrong ofc.)
Reply
#5
(2019-10-14, 15:26)QuizKid Wrote:
(2019-10-14, 14:29)mardukL Wrote: You will need something like Zoom InOut.

But i am unsure if it that what you want.


e.g. here is an example with slight 'overhang' (end 93% , depended to first column end 115% - play around with wished attributes.



<include name="Item_Focus_Animation">
        <animation type="Focus" reversible="false">
            <effect type="zoom" end="115,115" time="200" tween="sine" easing="out" center="auto" />
            <effect type="zoom" end="93,93" time="150" tween="sine" delay="200" easing="out" center="auto" />
        </animation>
    </include>

Thanks @mardukL, that's certainly a nicer animation and what I was ultimately going for in terms of the zoom effect, but it has the same issue that it goes outside the boundaries I've set for the focus item, which is what I want to avoid.

I basically want the zoom to go from this:

Image

to this:

Image

So the fanart gets bigger, but it stays cropped to the size of the focused item (in this case 640x360).

you need to define your wished
end="**" in the second row.

1st line is zoom-in by percentage in given time
2nd line zoom-out /shrink the focused item again at given delay(which should be time of row 1) in given time.

so you'll just need do the math ,how it should be in the second line

e.g. end="91.5" instead of the 93 in tje example
Skins |  Titan M O D   •   S W A N (WIP)
Reply
#6
(2019-10-14, 16:22)mardukL Wrote:
(2019-10-14, 15:26)QuizKid Wrote:
(2019-10-14, 14:29)mardukL Wrote: You will need something like Zoom InOut.

But i am unsure if it that what you want.


e.g. here is an example with slight 'overhang' (end 93% , depended to first column end 115% - play around with wished attributes.



<include name="Item_Focus_Animation">
        <animation type="Focus" reversible="false">
            <effect type="zoom" end="115,115" time="200" tween="sine" easing="out" center="auto" />
            <effect type="zoom" end="93,93" time="150" tween="sine" delay="200" easing="out" center="auto" />
        </animation>
    </include>

Thanks @mardukL, that's certainly a nicer animation and what I was ultimately going for in terms of the zoom effect, but it has the same issue that it goes outside the boundaries I've set for the focus item, which is what I want to avoid.

I basically want the zoom to go from this:

Image

to this:

Image

So the fanart gets bigger, but it stays cropped to the size of the focused item (in this case 640x360). 

you need to define your wished
end="**" in the second row.

1st line is zoom-in by percentage in given time
2nd line zoom-out /shrink the focused item again at given delay(which should be time of row 1) in given time.

so you'll just need do the math ,how it should be in the second line

e.g. end="91.5" instead of the 93 in tje example 

Sorry, I meant that even during the transition, I don't want it to expand beyond the green border, so the zoom happens only within that 640x380 window.
Reply
#7
(2019-10-14, 16:04)TP.One Wrote: never tried this, but may its possible to do first the focused Layout in the List and then the ItemLayout, if this works and behave like it might could, this could be a solution, as then the zoomed Poster/Fanart gets overlayd by the unfocused Items.

xml:
<focusedlayout></focusedlayout>
<Itemlayout></itemlayout>

guess there isnt a ("unhacky") way to let the Poster zoom within a specivic fixed high and widht. (at least i dont knew one. - can be wrong ofc.)

Thanks for the suggestion, interesting idea but unfortunately it didn't work. But I guess I can do something where I have the list with an empty focus element and then position a separate control based on the position coordinates of the focused element behind the list so the list obscures the zoom as you were thinking. Just not sure if it's worth the effort for the effect, haha
Reply
#8
You'd have to add some masking texture over the focused item to get that effect.
Reply
#9
(2019-10-14, 17:59)Hitcher Wrote: You'd have to add some masking texture over the focused item to get that effect.

Thanks, can you explain this a bit more? would this be a separate control or a diffuse on the fanart image control? 

Do you mean something like this, where the white would be a separate control that ensures the fanart is only visible within that rectangle? If so, how do I make it block out the fanart, but transparent to the other layers?

Image
Reply
#10
Ah, I was thinking this would work -

xml:
<focusedlayout></focusedlayout>
<Itemlayout></itemlayout>

but it appears it doesn't.
Reply
#11
Could you do this by taking advantage of the draw order of window?   Draw the texture you are animating first, and then draw the textures around the sides.   The zoom should slide behind the border.

(I think this is similar to the suggestion above to use a masking texture.)
Reply
#12
(2019-10-14, 21:17)illfigurethisout Wrote: Could you do this by taking advantage of the draw order of window?   Draw the texture you are animating first, and then draw the textures around the sides.   The zoom should slide behind the border.

(I think this is similar to the suggestion above to use a masking texture.)

I don't think so without doing quite a lot of hacking, as it seems focuslayout is always placed on top of itemlayout regardless of the order you list them, so I think I would need to keep focuslayout empty then manually recreate it outside of the panel container as an image control based on position and visibility conditions to show up in the right space behind the list plus add all the correct scrolling and animation effects. I'm sure it can be done, but I'm not sure I would know how to do it. Thanks though
Reply
#13
(2019-10-18, 14:47)QuizKid Wrote:
(2019-10-14, 21:17)illfigurethisout Wrote: Could you do this by taking advantage of the draw order of window?   Draw the texture you are animating first, and then draw the textures around the sides.   The zoom should slide behind the border.

(I think this is similar to the suggestion above to use a masking texture.)

I don't think so without doing quite a lot of hacking, as it seems focuslayout is always placed on top of itemlayout regardless of the order you list them, so I think I would need to keep focuslayout empty then manually recreate it outside of the panel container as an image control based on position and visibility conditions to show up in the right space behind the list plus add all the correct scrolling and animation effects. I'm sure it can be done, but I'm not sure I would know how to do it. Thanks though


theorethically and i hope i get you right is worth to try the following



xml:
<control type="group">
<description>theory set boundary</description>
<width>640</width>
<height>360</height>
<control type="image">
<description>Fanart or Landscape</description>
<aspectratio>scale</aspectratio>
<texture background="true">$VAR[WallIcon]</texture>

<width>640</width>
<height>360</height>
<animation type="Focus" reversible="false">
<effect type="zoom" end="115,115" time="200" tween="sine" easing="out" center="auto" />
</animation>
<animation type="UnFocus" reversible="false">
<effect type="zoom" end="91,91" time="200" tween="sine" easing="out" center="auto" />
</animation>
</control>
</control>
Skins |  Titan M O D   •   S W A N (WIP)
Reply
#14
(2019-10-19, 10:22)mardukL Wrote:
(2019-10-18, 14:47)QuizKid Wrote:
(2019-10-14, 21:17)illfigurethisout Wrote: Could you do this by taking advantage of the draw order of window?   Draw the texture you are animating first, and then draw the textures around the sides.   The zoom should slide behind the border.

(I think this is similar to the suggestion above to use a masking texture.)

I don't think so without doing quite a lot of hacking, as it seems focuslayout is always placed on top of itemlayout regardless of the order you list them, so I think I would need to keep focuslayout empty then manually recreate it outside of the panel container as an image control based on position and visibility conditions to show up in the right space behind the list plus add all the correct scrolling and animation effects. I'm sure it can be done, but I'm not sure I would know how to do it. Thanks though 


theorethically and i hope i get you right is worth to try the following



xml:
<control type="group">
<description>theory set boundary</description>
<width>640</width>
<height>360</height>
<control type="image">
<description>Fanart or Landscape</description>
<aspectratio>scale</aspectratio>
<texture background="true">$VAR[WallIcon]</texture>

<width>640</width>
<height>360</height>
<animation type="Focus" reversible="false">
<effect type="zoom" end="115,115" time="200" tween="sine" easing="out" center="auto" />
</animation>
<animation type="UnFocus" reversible="false">
<effect type="zoom" end="91,91" time="200" tween="sine" easing="out" center="auto" />
</animation>
</control>
</control>
 

ahh no luck but thanks for the suggestion Smile
Reply
#15
ok. than another attempt. but it will not have a 'fluid' zoom transition

use a diffuse image with transparent borders, e.g. 10pixel (t,l,b,r) or try a negative value as texture border.

xml:
<control type="image">
<description>attemt to resolve with negative border border - bordersize Fanart or Landscape</description>
<aspectratio>scale</aspectratio>
<texture diffuse="path/landscape_transparentborder10.png" background="true">$VAR[WallIcon]</texture>
<!--bordertexture>$VAR[WallIcon]/bordertexture>
border>-10</border
-->
<width>650</width>
<height>370</height>
</control>

EDIT: @'QuizKid'

seems to work, corrected posx/posyalign ment when using transparent border image

e.g.
<focusedlayout>
 <control type="image">
     <width>650</width>
     <height>360</height>
     <posy>-20</posy>
     <posx>-15</posx>
     <texture background="true" diffuse=path/landscape_transparentborder.png">$VAR[WallIcon]</texture>
     <aspectratio scalediffuse="false" align="center" aligny="center">keep</aspectratio>
    </control>
</focusedlayout>

https://streamable.com/jwezo
Skins |  Titan M O D   •   S W A N (WIP)
Reply

Logout Mark Read Team Forum Stats Members Help
Setting the boundary for a zoom animation0