-
Aug 25th, 2016, 01:27 PM
#1
Thread Starter
New Member
Apply animation to the center of a rectangle with both rotate & translate transform
Hi
I'm following the following code to make a rectangle follow a path and rotate.
The bottom left of the rectangle follow the path. Does any one have any ideas how I get the center of the rectangle to follow the path. I've tried setting the transform origin to 0.5,0.5 and it throws the rectangle of the path. I've also tried setting the centerx property of the rotate transform and no luck
Code:
Public Sub New()
' Create a NameScope for the page so that
' we can use Storyboards.
NameScope.SetNameScope(Me, New NameScope())
' Create a rectangle.
Dim aRectangle As New Rectangle()
aRectangle.Width = 30
aRectangle.Height = 30
aRectangle.Fill = Brushes.Blue
' Create some transforms. These transforms
' will be used to move and rotate the rectangle.
Dim animatedRotateTransform As New RotateTransform()
Dim animatedTranslateTransform As New TranslateTransform()
' Register the transforms' names with the page
' so that they can be targeted by a Storyboard.
Me.RegisterName("AnimatedRotateTransform", animatedRotateTransform)
Me.RegisterName("AnimatedTranslateTransform", animatedTranslateTransform)
' Create a TransformGroup to contain the transforms
' and apply the TransformGroup to the rectangle.
Dim tGroup As New TransformGroup()
tGroup.Children.Add(animatedRotateTransform)
tGroup.Children.Add(animatedTranslateTransform)
aRectangle.RenderTransform = tGroup
' Create a Canvas to contain the rectangle
' and add it to the page.
Dim mainPanel As New Canvas()
mainPanel.Width = 400
mainPanel.Height = 400
mainPanel.Children.Add(aRectangle)
Me.Content = mainPanel
' Create the animation path.
Dim animationPath As New PathGeometry()
Dim pFigure As New PathFigure()
pFigure.StartPoint = New Point(10, 100)
Dim pBezierSegment As New PolyBezierSegment()
pBezierSegment.Points.Add(New Point(35, 200))
pBezierSegment.Points.Add(New Point(135, 200))
pBezierSegment.Points.Add(New Point(160, 100))
pBezierSegment.Points.Add(New Point(180, 10))
pBezierSegment.Points.Add(New Point(285, 10))
pBezierSegment.Points.Add(New Point(310, 100))
pFigure.Segments.Add(pBezierSegment)
animationPath.Figures.Add(pFigure)
'Draw Animation Path Line
Dim p As New Path
p.Data = animationPath
p.Stroke = Brushes.Red
mainPanel.Children.Add(p)
' Freeze the PathGeometry for performance benefits.
animationPath.Freeze()
' Create a DoubleAnimationUsingPath to rotate the
' rectangle with the path by animating
' its RotateTransform.
Dim angleAnimation As New DoubleAnimationUsingPath()
angleAnimation.PathGeometry = animationPath
angleAnimation.Duration = TimeSpan.FromSeconds(5)
' Set the Source property to Angle. This makes
' the animation generate angle values from
' the path information.
angleAnimation.Source = PathAnimationSource.Angle
' Set the animation to target the Angle property
' of the RotateTransform named "AnimatedRotateTransform".
Storyboard.SetTargetName(angleAnimation, "AnimatedRotateTransform")
Storyboard.SetTargetProperty(angleAnimation, New PropertyPath(RotateTransform.AngleProperty))
' Create a DoubleAnimationUsingPath to move the
' rectangle horizontally along the path by animating
' its TranslateTransform.
Dim translateXAnimation As New DoubleAnimationUsingPath()
translateXAnimation.PathGeometry = animationPath
translateXAnimation.Duration = TimeSpan.FromSeconds(5)
' Set the Source property to X. This makes
' the animation generate horizontal offset values from
' the path information.
translateXAnimation.Source = PathAnimationSource.X
' Set the animation to target the X property
' of the TranslateTransform named "AnimatedTranslateTransform".
Storyboard.SetTargetName(translateXAnimation, "AnimatedTranslateTransform")
Storyboard.SetTargetProperty(translateXAnimation, New PropertyPath(TranslateTransform.XProperty))
' Create a DoubleAnimationUsingPath to move the
' rectangle vertically along the path by animating
' its TranslateTransform.
Dim translateYAnimation As New DoubleAnimationUsingPath()
translateYAnimation.PathGeometry = animationPath
translateYAnimation.Duration = TimeSpan.FromSeconds(5)
' Set the Source property to Y. This makes
' the animation generate vertical offset values from
' the path information.
translateYAnimation.Source = PathAnimationSource.Y
' Set the animation to target the Y property
' of the TranslateTransform named "AnimatedTranslateTransform".
Storyboard.SetTargetName(translateYAnimation, "AnimatedTranslateTransform")
Storyboard.SetTargetProperty(translateYAnimation, New PropertyPath(TranslateTransform.YProperty))
' Create a Storyboard to contain and apply the animations.
Dim pathAnimationStoryboard As New Storyboard()
pathAnimationStoryboard.RepeatBehavior = RepeatBehavior.Forever
pathAnimationStoryboard.AutoReverse = True
pathAnimationStoryboard.Children.Add(angleAnimation)
pathAnimationStoryboard.Children.Add(translateXAnimation)
pathAnimationStoryboard.Children.Add(translateYAnimation)
' Start the animations when the rectangle is loaded.
AddHandler aRectangle.Loaded, Sub(sender As Object, e As RoutedEventArgs) pathAnimationStoryboard.Begin(Me)
End Sub
-
Aug 25th, 2016, 07:41 PM
#2
Re: Apply animation to the center of a rectangle with both rotate & translate transfo
I've never worked with wpf before, but I was curious.
Took awhile to try a few things, and there might be a better way, but I added a pre-transform to the group to offset the center of the rectangle to the origin before doing the other two transforms.
Code:
'...
' Create some transforms. These transforms
' will be used to move and rotate the rectangle.
Dim animatedRotateTransform As New RotateTransform()
Dim animatedTranslateTransform As New TranslateTransform()
Dim animatedTransformOrigin As New TranslateTransform() 'added these three lines
animatedTransformOrigin.X = -15
animatedTransformOrigin.Y = -15
' Register the transforms' names with the page
' so that they can be targeted by a Storyboard.
Me.RegisterName("AnimatedRotateTransform", animatedRotateTransform)
Me.RegisterName("AnimatedTranslateTransform", animatedTranslateTransform)
' Create a TransformGroup to contain the transforms
' and apply the TransformGroup to the rectangle.
Dim tGroup As New TransformGroup()
tGroup.Children.Add(animatedTransformOrigin) 'added this: do the -15,-15 transform first
tGroup.Children.Add(animatedRotateTransform)
tGroup.Children.Add(animatedTranslateTransform)
aRectangle.RenderTransform = tGroup
'...
Added four lines altogether.
-
Aug 26th, 2016, 12:42 AM
#3
Thread Starter
New Member
Re: Apply animation to the center of a rectangle with both rotate & translate transfo
Thanks Passel, that's exactly what I was after
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|