Kodi Community Forum

Full Version: Ability to spin an image?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I was bored an was trying to learn some of the animation effects today, what I was really after was this spin effect starting at :20 in this video...

Is that type of spin available in XBMC? Thx...
Hi,

Yes it is totally possible to do a rotate like that spinning on its vertical center using a rotatey effect.

Here is a snippet of code that does a door opening effect...

<camera x="0" y="0" />
<animation type="WindowOpen">
<effect type="rotatey" start="90" end="0" center="0,0" time="150" reversible="false" />
</animation>

I think in order to achive effect you want it would be something like...

<camera x="0" y="0" />
<animation type="WindowOpen">
<effect type="rotatey" start="0" end="360" center="auto" time="150" reversible="false" />
</animation>


not sure if the camera x and y should be the center of image also but hopefully thats a starting point.
Thx for the answer, tried playing with it but those type of effects are above my head right now. I was just changing values and guessing not really understanding what I was doing but good to know its possible just got to get the basics down so I know what I'm doing instead of just guessing...thx again.
you get the hang of it eventually. skinning xbmc takes time to learn Smile

BTW the wiki is a little short on 'camera' and 'rotatey' effects.
atleast i havent found it Wink
if anyone feels like adding some more info about these controls i'm sure it would
be appreciated Smile

like the tween effect is excellent explained:
http://wiki.xbmc.org/?title=Tweeners
Basically:

1. The camera coordinates specify where the camera is - the camera always looks straight into the screen, so it defines where the perspective begins.

2. The y axis is vertical and x axis horizontal. The z axis points into (or out of - I can't recall the direction offhand) the screen. rotaten rotates about the n-axis, i.e. the axis is held fixed, and all points rotate around it.

3. rotatey then will rotate about a vertical line. rotatex rotates about a horizontal line, and rotatez rotates about a line pointing into the screen (e.g. like the hands on a clock).

4. The center position defines where that line exists in (x,y,z) space. The most obvious is for the rotatez, where it defines the center of the clock.

5. The start and end are in degrees, and times as always are in milliseconds.

Some pictorial examples (eg some anim gifs perhaps?) would be useful. It's easiest to get the hang of by ignoring the camera at first and moving a rotatex or rotatey around the screen by altering the center.

Note that the camera position is meaningless for a rotatez, as there is no depth being used (z is always fixed).

Cheers,
Jonathan
You explanation was great jmarshall, I understand and am close to replicating that effect. One more animation question if anyone can help...

What controls fading between window transitions?

More specifically I like to add that that Zoom in fade out type of effect that Alaska has when you go from Home menu to Videos, Movies, TV etc to the TV section....Like when going from TV main level to Season and Season to episode to have that type of effect.

Now these lines in Home.xml is that control that animation:
Quote:<control type="label">
<posx>-320</posx>
<posy>330</posy>
<width>1920</width>
<align>center</align>
<aligny>top</aligny>
<label>$INFO[Container(300).ListItem.Label]</label>
<font>Font_MainMenu</font>
<textcolor>MainMenu</textcolor>
<include>Animation_ZoomOutZoomIn</include>
</control>

<control type="wraplist" id="300">
<posx>-131</posx>
<posy>130</posy>
<height>500</height>
<width>1541</width>
<onleft>300</onleft>
<onright>300</onright>
<viewtype>list</viewtype>
<orientation>horizontal</orientation>
<focusposition>2</focusposition>
<scrolltime>200</scrolltime>
<include>Animation_ZoomOutZoomIn</include>
<itemlayout width="300" height="341">

And this is that animation in Includes_Animations.xml:
Quote:<include name="Animation_ZoomOutZoomIn">
<animation type="WindowOpen">
<effect type="zoom" time="400" center="640,360" start="180" end="100" tween="cubic" easing="out" />
<effect type="fade" time="400" center="640,360" start="0" end="100" />
</animation>

I put that "<include>Animation_ZoomOutZoomIn</include>" everywhere I thought was logical inside of Viewtype_Landscape but so far no go. Any help would be great, thx.