[eumel]

Hi

i want to rotate and slide an image at the same time.
Each animation itself works great alone, but together it comes with weird stretchings.

PHP Code:

<control type="group" description="Item (0) flat">
    <visible>Control.HasFocus(312) | Control.HasFocus(302)</visible>
    <posy>0</posy>
    <posx>RA_IconSquare2_PosX</posx>
    <width>286</width>
    <height>400</height>
    <camera x="260" y="203"/>
    <animation type="Visible" condition="true">
        <effect type="slide" time="1000" start="0" end="1803"/>
        <effect type="rotatey" time="1000" center="117" start="0" end="75" tween="cubic" easing="out"/>
    </animation>
        <control type="image" description="Episode Icon">
        <include>Square_Icon_Properties</include>
        <texture fallback="DefaultVideo.png">$VAR[EpisodeIcon_0]</texture>
    </control>
    <control type="image" description="Episode Icon Reflection">
        <include>Square_Icon_Reflection_Properties</include>
        <texture fallback="DefaultVideo.png" flipy="true" diffuse="home_recentlyadded/Square_ReflectionMask.png">$VAR[EpisodeIcon_0]</texture>
    </control>
</control> 


I believe the problem is the camera position/tag, that don't moves with the image/group.
How can i fix it, that the image just rotates how it should about its own axis, and ignore the camera position?

cheers
Rick

[`Black]

Don't use camera position. If you want the rotate animation to be at the center of your item, use center="posx of item + width/2,posy of item + height/2". This will work with slides, too.

[eumel]

initial situation:


single rotate animation:

PHP Code:

<control type="image">
    <posy>397</posy>
    <posx>100</posx>
    <width>286</width>
    <height>286</height>
    <camera x="243" y="540"/>

    <animation effect="rotatey" time="1000" center="100" start="0" end="45">WindowOpen</animation>

    <aspectratio>scale</aspectratio>
    <texture>calibrate\CalibratePixelRatio.png</texture>
</control> 


single slide animation:

PHP Code:

<control type="image">
    <posy>397</posy>
    <posx>100</posx>
    <width>286</width>
    <height>286</height>
    <camera x="243" y="540"/>

    <animation effect="slide" time="1000" start="0" end="1000">WindowOpen</animation>

    <aspectratio>scale</aspectratio>
    <texture>calibrate\CalibratePixelRatio.png</texture>
</control> 


roatey and slide animation together:

PHP Code:

<control type="image">
    <posy>397</posy>
    <posx>100</posx>
    <width>286</width>
    <height>286</height>
    <camera x="243" y="540"/>

    <animation type="WindowOpen">
        <effect type="slide" time="1000" start="0" end="1000"/>
        <effect type="rotatey" time="1000" center="100" start="0" end="45"/>
    </animation>

    <aspectratio>scale</aspectratio>
    <texture>calibrate\CalibratePixelRatio.png</texture>
</control> 


you can see in the fourth image the texture is stretched, but i only want to slide the image from the second screenshot to another place on the screen.

ps.: if you switch the order of the rotate and slide animation is it even crazier

---

Don't use camera position. If you want the rotate animation to be at the center of your item, use center="posx of item + width/2,posy of item + height/2". This will work with slides, too.

I don't why, i believe i tested it without camera, i could swear,but you right black thx a lot.

center="posx of item + width/2,posy of item + height/2"
seems to apply only to rotate, not rotatey

[eumel]

EDIT:

i could solve the problem, with rotateY i have to use the camera tag, but the postion of the camera has to be the endposition of the slide, not the start position.

[eumel]

I believe i need a fundamental explanation how the rotate animations work in xbmc.

could someone help me out?

[eumel]

Here's what I would have once explained to get:

I have a rotated image (A) and want to slide it to position ( C ), but if i add a slide animation to the image i got position (B).
What I do not understand is, it seems as not only the image rotates, but also the whole coordinate system.
X1 axis transforms to X2 axis, the problem is how to reach position ( C )?




The Second missunderstanding, black told me i have to leave off the camera tag.
But without camera i get:

PHP Code:

<control type="image">
    <posx>100</posx>
    <posy>100</posy>
    <width>300</width>
    <height>300</height>

    <animation condition="true" effect="rotatey" center="100" start="-45" end="-45" time="0">Conditional</animation>

    <aspectratio>scale</aspectratio>
    <texture>calibrate\CalibratePixelRatio.png</texture>
</control> 


with camera tag i get what i want:

PHP Code:

<control type="image">
    <posx>100</posx>
    <posy>100</posy>
    <width>300</width>
    <height>300</height>

    <camera x="250" y="250"/>
    <animation condition="true" effect="rotatey" center="100" start="-45" end="-45" time="0">Conditional</animation>

    <aspectratio>scale</aspectratio>
    <texture>calibrate\CalibratePixelRatio.png</texture>
</control> 


so it's ok to use the camera tag, but if i slide this image i don't get ( C) like in the image above, but Position (B) if the rotate comes before the slide.
If i the slide comes before the rotate i get:



Sorry if i get on nerves, but i can not figure out, how the GUI engine handle these rotate animations.
I always thought the screen is the reference, and its axes.

ps.: could we get an animation attribute, that makes an animation perspective independent (camera), and set only the screen as reference?

cheers Rick

[Hitcher]

What happens if you put the image control inside a group control and slide the group?

[eumel]

i tested it, different ways, but its not working
it is possible i forgot the right way.

a few examples

PHP Code:

<control type="group">
    <posy>100</posy>
    <camera x="250" y="250" />
    <animation effect="rotatey" center="100" start="45" end="45" time="0">WindowOpen</animation>
            
    <control type="group">
        <posx>100</posx>
        <camera x="1670" y="250" />
        <animation effect="slide" end="1420,0" time="3000" reversible="false">WindowOpen</animation>
                
        <control type="image">
            <posx>0</posx>
            <posy>0</posy>
            <width>300</width>
            <height>300</height>
            <aspectratio>scale</aspectratio>
            <texture>calibrate\CalibratePixelRatio.png</texture>
           </control>
        </control>
</control> 


PHP Code:

<control type="group">
    <posx>100</posx>
    <posy>100</posy>
    <width>1720</width>
    <height>1720</height>
    <animation effect="slide" end="1420,0" time="3000" reversible="false">WindowOpen</animation>

    <control type="image">
        <animation effect="rotatey" center="100" start="45" end="45" time="0">WindowOpen</animation>
        <posx>0</posx>
        <posy>0</posy>
        <width>300</width>
        <height>300</height>
        <aspectratio>scale</aspectratio>
        <texture>calibrate\CalibratePixelRatio.png</texture>
    </control>
</control>