Results 1 to 3 of 3

Thread: Apply animation to the center of a rectangle with both rotate & translate transform

  1. #1

    Thread Starter
    New Member
    Join Date
    Aug 2016
    Posts
    2

    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

  2. #2
    Sinecure devotee
    Join Date
    Aug 2013
    Location
    Southern Tier NY
    Posts
    6,582

    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.

  3. #3

    Thread Starter
    New Member
    Join Date
    Aug 2016
    Posts
    2

    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
  •  



Click Here to Expand Forum to Full Width