Help with unsmooth animation
#1
Hi I have a layered background of three images that is supposed to move depending on what position the focus is in a list. Have a look at this video:

Image


You see the jerkiness that appears when I move too quickly up the list? As I understand it, it's because the animation doesn't finish before next animation is supposed to begin.
anyone have any tips of how to avoid this?

I currently use a couple(10) of these on each imagecontrol(3):
Code:
<animation effect="slide" end="0,-10" time="100" reversible="true" condition="Container(300).Row(1)">Conditional</animation>


Edit:
Here is one of the controls if it helps:
Code:
<control type="image">
      <width>1280</width>
      <heigth>720</heigth>
      <posx>0</posx>
      <posy>0</posy>
      <texture diffuse="BgLayerOneDiff.png">BgLayerOne.png</texture>
      <aspectratio>stretch</aspectratio>
      <animation effect="zoom" end="120" time="0" center="auto" condition="true">conditional</animation>
      <animation effect="slide" end="0,-5" time="100" reversible="true" condition="Container(300).Row(1)">Conditional</animation>
      <animation effect="slide" end="0,-10" time="100" reversible="true" condition="Container(300).Row(2)">Conditional</animation>
      <animation effect="slide" end="0,-15" time="100" reversible="true" condition="Container(300).Row(3)">Conditional</animation>
      <animation effect="slide" end="0,-20" time="100" reversible="true" condition="Container(300).Row(4)">Conditional</animation>
      <animation effect="slide" end="0,-25" time="100" reversible="true" condition="Container(300).Row(5)">Conditional</animation>
      <animation effect="slide" end="0,-30" time="100" reversible="true" condition="Container(300).Row(6)">Conditional</animation>
      <animation effect="slide" end="0,-35" time="100" reversible="true" condition="Container(300).Row(7)">Conditional</animation>
      <animation effect="slide" end="0,-40" time="100" reversible="true" condition="Container(300).Row(8)">Conditional</animation>
      <animation effect="slide" end="0,-45" time="100" reversible="true" condition="Container(300).Row(9)">Conditional</animation>
      <animation effect="slide" end="0,-50" time="100" reversible="true" condition="Container(300).Row(10)">Conditional</animation>
    </control>
  • Livingroom - C2D E8400, P5N7A-VM on a Samsung 46" LE46M86 FullHD via HDMI
  • Kitchen - ASRock 330 HT Displayed on a Samsung Lapfit 22" dual touch screen LD220Z
  • Bedroom - LG Laptop on a 32" tv
Reply
#2
I thought about doing this sort of thing a little while ago when contemplating a Menu System similar in concept to Colin McRae Dirt (1)

Couldnt actually think of how to make any decent views though.

Anyway... Have you thought about your background layers animating back and forth by themselves and not relying on a conditional state.
Reply
#3
I dont think you can do much here. The animation seems to be reverting/stopping before being finished when scrolling fast. It happens pretty often especially with hacky views such as coverflow, NXE view etc.

I guess setting reversible=false doesn't help? It would be great if XBMC would let the animations finish and put the next one in queue.

This reverting thing makes many viewtypes fail.
Reply
#4
watzen did you find any way to workaround the problem? I currently struggle with the same thing.
Reply
#5
nope, the only solution I came up with was to keep the animation time fast enough for it to finnish faster than I could press the up-key. This wasn't normally any problem at roughly 100ms animationtime.
  • Livingroom - C2D E8400, P5N7A-VM on a Samsung 46" LE46M86 FullHD via HDMI
  • Kitchen - ASRock 330 HT Displayed on a Samsung Lapfit 22" dual touch screen LD220Z
  • Bedroom - LG Laptop on a 32" tv
Reply
#6
Figured the same. Very mediocre solution that spoils the whole feel of animation. Would be great if it worked right.

EDIT: I understand this is not a bug but the way reversible was meant to work. For these types of animations however we would need reversible that starts reversing process after the original animation is finished.
Reply
#7
Broads Wrote:Anyway... Have you thought about your background layers animating back and forth by themselves and not relying on a conditional state.

Sure you could do this, but that wouldn't give the same effect.
  • Livingroom - C2D E8400, P5N7A-VM on a Samsung 46" LE46M86 FullHD via HDMI
  • Kitchen - ASRock 330 HT Displayed on a Samsung Lapfit 22" dual touch screen LD220Z
  • Bedroom - LG Laptop on a 32" tv
Reply
#8
I would love to know what devs think about this. Would it require too many changes in XBMC to have this special type of reversible working?
Reply
#9
What is the problem exactly in laymans terms?

When it comes down to it, effectively you just want to say "slide this image to here if this happens". I'm not sure where the complication comes in, but I presume it is when you move faster than the animation, so that half way through a slide it has to do a new one, and the two slides have different time bases, thus you get 1 speed until the first anim has reversed, (combined speed of anim1 in reverse, and anim2 forward)finished reversing) followed by another speed (speed of anim2 only).

Really you don't want the animations to be reversible at all - instead, what you want to specify is a set of mutually exclusive "slide to" animations, where all you need specify are the end points. Setting the reverse time to the same as the forward time on other anims I think effectively takes care of this, assuming the slides are all linear. That trick wouldn't work if they were tweened slides.

i.e. Some sort of construct like:

Code:
<animation effect="slide" start="0,0" time="blah">
  <condition end="0,5">blah</condition>
  <condition end="0,40">foo</condition>
</animation>

It requires a great deal of thought to get it right (i.e. useful in more than just this scenario).

Another possibility, for instance, is to support some skin variables, where you can allow transistions between them. eg, a skin variable for <posy> might be something like:

Quote:<value name="slidingbackposy">
<value condition="foo">50</value>
<value condition="bar">100</value>
<value>10</value> <!-- the default value -->
<transistion time="100" delay="0" tween="quadratic" />
</value>

This would then allow the use of <posy>slidingbackposy</posy> which would automatically give you multiple posy's, with a transistion between each state.

Cheers,
Jonathan
Always read the XBMC online-manual, FAQ and search the forum before posting.
Do not e-mail XBMC-Team members directly asking for support. Read/follow the forum rules.
For troubleshooting and bug reporting please make sure you read this first.


Image
Reply
#10
Quote:What is the problem exactly in laymans terms?

When it comes down to it, effectively you just want to say "slide this image to here if this happens". I'm not sure where the complication comes in, but I presume it is when you move faster than the animation, so that half way through a slide it has to do a new one, and the two slides have different time bases, thus you get 1 speed until the first anim has reversed, (combined speed of anim1 in reverse, and anim2 forward)finished reversing) followed by another speed (speed of anim2 only).
Yes you are right this is most likely the problem, resulting in odd ugly behaviour.

Quote:Really you don't want the animations to be reversible at all
The reason I am using reversible (and I believe watzen too) is that it makes the animation continue from where previous animation ended, so the start coordinates become dynamic - not the case with reversible set to false, which strictly starts from the real start coordinates all the time.

Quote: - instead, what you want to specify is a set of mutually exclusive "slide to" animations, where all you need specify are the end points. Setting the reverse time to the same as the forward time on other anims I think effectively takes care of this, assuming the slides are all linear. That trick wouldn't work if they were tweened slides.

i.e. Some sort of construct like:

Code:
<animation effect="slide" start="0,0" time="blah">
  <condition end="0,5">blah</condition>
  <condition end="0,40">foo</condition>
</animation>
It requires a great deal of thought to get it right (i.e. useful in more than just this scenario).
Is this code actually supposed to work or is it just a concept of what could be implemented. I never knew such conditional was possible. Tried it and it didnt work at all.

Quote:Another possibility, for instance, is to support some skin variables, where you can allow transistions between them. eg, a skin variable for <posy> might be something like:

This would then allow the use of <posy>slidingbackposy</posy> which would automatically give you multiple posy's, with a transistion between each state.
Great idea. This would be very useful in too many scenarios.
Reply

Logout Mark Read Team Forum Stats Members Help
Help with unsmooth animation0