How do I animate a switch between two different images (both in the art map) ?
#1
What I want to be able to do is show the front cover of a CD and then after some seconds, spin it/fade it/just replace it to show the back cover (if it exists).  I've seen this effect in at least one other skin. but my skinning knowledge is slim to say the least so I was wondering if someone could post some simple example code that can do this.  I can't use a simple multi-image control as the art is not in a directory but in the art map.

Manfeed's Aeon-tajo skin does this, along with sliding the entire CD case to the right and then sliding left with the back cover displayed.  It then spins around after a few seconds to display the front again.  I've looked at the xml but there are a bunch of stacked animations and grouped stuff and I don't find it easy to see what does what, hence my asking for a simpler example.

Cheers for any help anyone can offer.
Learning Linux the hard way !!
Reply
#2
this is what i use to spin a thumb to a poster
<animation >
                            <effect type="zoom" start="100" end="60" time="500" tween="sine" easing="inout" center="0,300" />
                        </animation>
                        <animation effect="rotatex" end="360" center="auto" time="800" loop="false" reversible="false" >Focus</animation>
                        <animation type="Focus">
                            <effect type="zoom" start="40" end="220" time="500" tween="sine" easing="inout" center="0,300" />
                        </animation>
                        <animation effect="rotatey" end="-360" center="auto" time="800" loop="false" reversible="true" >Unfocus</animation>
                        <animation type="Unfocus">
                            <effect type="zoom" start="220" end="60" time="500" tween="sine" easing="inout" center="0,300" />
                            <animation effect="slide" time="2500" delay="300" tween="back" easing="out" start="-300,0" end="0,0">WindowOpen</animation>
                            <animation effect="slide" time="2500" delay="300" tween="back" easing="out" start="-300,0" end="0,0">Visible</animation>
                            <animation effect="slide" time="1500" delay="00" tween="back" easing="in" start="0,0" end="-300,0">WindowClose</animation>
                            <animation effect="slide" time="1500" delay="00" tween="back" easing="in" start="0,0" end="-300,0">Hidden</animation>
                        </animation>
                        <animation effect="slide" end="0,300" time="200">Unfocus</animation>
345420 (thread)
Reply
#3
@the_other_guy Thanks, I think!  How do I connect this up to the two images ?  If it helps, what I want to do is spin the album cover in DialogMusicInfo.xml to show the back cover if there is one.  Base skin is Estuary.
Learning Linux the hard way !!
Reply
#4
@black_eagle

Try this:

<control type="group">
<!-- Put width/height of images here -->
<width>500</width>
<height>500</height>
<!-- Position of group -->
<centerleft>50%</centerleft>
<centertop>50%</centertop>
<!-- First Image -->
<control type="image">
<aspectratio>keep</aspectratio>
<texture>$INFO[ListItem.Art(poster)]</texture>
<animation type="Conditional" condition="true" loop="true" reversible="false" >
<!-- Total duration of animation 12000ms -->
<effect type="fade" start="100" end="100" time="12000" />
<!-- Change time to change speed of first turn -->
<effect type="rotatey" start="0" end="-90" center="250,0" delay="0" time="2000" />
<!-- Change delay for how long image is facing forward, change time for speed of second turn -->
<effect type="rotatey" start="90" end="0" center="250,0" delay="4000" time="2000" />
<!-- Time here is delay + time of above animation e.g. 4000 + 2000 = 6000 -->
<effect type="fade" start="100" end="0" delay="6000" />
</animation>
</control>
<!-- Second Image -->
<control type="image">
<aspectratio>keep</aspectratio>
<texture>$INFO[ListItem.Art(fanart)]</texture>
<animation type="Conditional" condition="true" loop="true" reversible="false" >
<!-- Total time of animation - must match first image animation duration -->
<effect type="fade" start="100" end="100" time="12000" />
<!-- Delay matches fade delay of first animation, time is speed of turn -->
<effect type="rotatey" start="90" end="0" center="250,0" delay="6000" time="2000" />
<!-- Time is speed of second turn, Second image wait for delay minus the delay and time of above e.g. 10000 - 6000 - 2000 = 2000 -->
<effect type="rotatey" start="0" end="-90" center="250,0" delay="10000" time="2000" />
<!-- delay must match delay two effects above -->
<effect type="fade" start="0" end="100" delay="6000" />
</animation>
</control>
</control>

In the animation center="250,0" value must be half of width of image group.
I've used Art(poster) and Art(fanart) here, but the images can be anything.

What happens:
1. Image01 rotates from -90 degrees to 0 degrees (takes 2000ms)
2. Image01 waits at 0 degrees for 2000ms
3. Image01 rotates to 90 degrees (takes 2000ms) and then hides (delayed fade animation)
4. Image02 becomes visible (delayed fade animation) and rotates from -90 degrees to 0 degrees (takes 2000ms)
5. Image02 waits at 0 degrees for 2000ms
6. Image02 rotates to 90 degrees (takes 2000ms) and then hides
Reply
#5
@jurialmunkey Thank you so much!  The comments in the code and the explanation are much appreciated.  I doubt I would ever have worked out how to do it myself.
Learning Linux the hard way !!
Reply
 
Thread Rating:
  • 0 Vote(s) - 0 Average



Logout Mark Read Team Forum Stats Members Help
How do I animate a switch between two different images (both in the art map) ?00