AddTransition

Hi all,

Has anyone played around with animation in Web2.0?

I have four objects that I want to animate, one after the other. Using:

<control1>.Style.AddTransition("<property>", <duration>, WebStyle.SpeedPatterns.Linear, 1)
<control2>.Style.AddTransition("<property>", <duration>, WebStyle.SpeedPatterns.Linear, 2)
<control3>.Style.AddTransition("<property>", <duration>, WebStyle.SpeedPatterns.Linear, 3)
<control4>.Style.AddTransition("<property>", <duration>, WebStyle.SpeedPatterns.Linear, 4)

In the above example, control1 animates, finishes, but then control2, control3 and control4 all begin their animations. This isn’t right is it? In fact, it doesn’t matter what value I put in for Delay, 2, 3 and 4 all being to animate as soon as control1 has finished.

Hope someone can help.

Many thanks,
Dave.

Here’s the code:

Var newTop, newHeight, newLeft, newWidth As Integer

// ANIMATION 1

leftPart.Style.AddTransition("top", secondsBeforeClose/4, WebStyle.SpeedPatterns.Linear, 0)
leftPart.Style.AddTransition("height", secondsBeforeClose/4, WebStyle.SpeedPatterns.Linear, 0)
leftPart.Style.Value("top") = leftPart.Top.ToString + "px"
leftPart.Style.Value("height") = leftPart.Height.ToString + "px"

newTop = boundingRect.Height
newHeight = 1
leftPart.Style.Value("top") = newTop.ToString + "px"
leftPart.Style.Value("height") = newHeight.ToString + "px"

// ANIMATION 2

lowerPart.Style.AddTransition("left", secondsBeforeClose/4, WebStyle.SpeedPatterns.Linear, secondsBeforeClose/4)
lowerPart.Style.AddTransition("width", secondsBeforeClose/4, WebStyle.SpeedPatterns.Linear, secondsBeforeClose/4)
lowerPart.Style.Value("left") = lowerPart.Left.ToString + "px"
lowerPart.Style.Value("width") = lowerPart.Width.ToString + "px"

newLeft = boundingRect.Width
newWidth = 1
lowerPart.Style.Value("left") = newLeft.ToString + "px"
lowerPart.Style.Value("width") = newWidth.ToString + "px"

// ANIMATION 3

rightPart.Style.AddTransition("top", secondsBeforeClose/4, WebStyle.SpeedPatterns.Linear, (secondsBeforeClose/4)*2)
rightPart.Style.AddTransition("height", secondsBeforeClose/4, WebStyle.SpeedPatterns.Linear, (secondsBeforeClose/4)*2)
rightPart.Style.Value("top") = rightPart.Top.ToString + "px"
rightPart.Style.Value("height") = rightPart.Height.ToString + "px"

newTop = 0
newHeight = 1
rightPart.Style.Value("top") = newTop.ToString + "px"
rightPart.Style.Value("height") = newHeight.ToString + "px"

// ANIMATION 4

topPart.Style.AddTransition("left", secondsBeforeClose/4, WebStyle.SpeedPatterns.Linear, (secondsBeforeClose/4)*3)
topPart.Style.AddTransition("width", secondsBeforeClose/4, WebStyle.SpeedPatterns.Linear, (secondsBeforeClose/4)*3)
topPart.Style.Value("left") = topPart.Left.ToString + "px"
topPart.Style.Value("width") = topPart.Width.ToString + "px"

newLeft = 0
newWidth = 1
topPart.Style.Value("left") = newLeft.ToString + "px"
topPart.Style.Value("width") = newWidth.ToString + "px"

Create an Issue and add a sample project.

I will Alberto thanks, but if anyone wants to take a look, here’s a test project - it’s fairly obvious what I’m wanting to do…

https://services.mbadvertising.co.uk/animationtest.zip

1 Like

I was able to make it work, but it feels kludged. But it does work. The problem is that you aren’t able to control the execution timing well enough to make it work as a single block of code in the PushButton.

To make it work I added 3 timers and 4 methods and modified the code in the button as follows:

Animation1(30)
Timer2.RunMode = WebTimer.RunModes.Single
Timer3.RunMode = WebTimer.RunModes.Single
Timer4.RunMode = WebTimer.RunModes.Single

I changed the duration calculation in animations 2, 3, & 4 to 0 same as animation 1 and controlled the periods via the timers. Below is the method for animation 2:

Public Sub Animation1(secondsBeforeClose As Integer)
  // ANIMATION 1
  leftPart.Style.AddTransition("top", secondsBeforeClose/4, WebStyle.SpeedPatterns.Linear, 0)
  leftPart.Style.AddTransition("height", secondsBeforeClose/4, WebStyle.SpeedPatterns.Linear, 0)
  leftPart.Style.Value("top") = leftPart.Top.ToString + "px"
  leftPart.Style.Value("height") = leftPart.Height.ToString + "px"
  
  newTop = boundingRect.Height
  newHeight = 1
  leftPart.Style.Value("top") = newTop.ToString + "px"
  leftPart.Style.Value("height") = newHeight.ToString + "px"
  
End Sub

Each timer calls the correct method to run like: Animation2(30)

Here is my modified version of your test app.

1 Like

It looks like a bug with the delay.

Cheers Tom, I had done something very similar, but as you say, a complete fudge. So I thought I’d better bring it to Xojo’s attention.

Thanks for opening the bug report David, it will be fixed in 2024r1.

2 Likes