locked
Combind animation

    Question

  • I wanted to animate image (27X27) on a circle. This will not work with Canvas.Left and Canvas.Top because the animate is linear and it animates as a line. I want to animate in a circle (with image always up position) which needs three transformations where first you have to rotate on its local x-axis then second rotation is around the center of the circle and third we have to move the ½ of light and the width. Please press plus or minus button to move the image.  This sample works fine (one degree at a time) but I don’t know how compound animate works. I was unable to find any sample. I have included the sample.

    public :link

    https://onedrive.live.com/redir?resid=ED95A04E7576C8D8%219446


    Agha Khan

    Friday, May 16, 2014 10:14 PM

Answers

  • Dear Rob:

    Thanks for your reply.

    I have provided the sample which has Group Render Transformation. I do not see how I can animate a Group Transformation. As I requested how I can animate a image on a circle. As you see in my sample  it works fine without animation, but unable to animate. When I tried to animate from point A to point B, the animation takes the shortest path (Line), which looks ugly. Maybe it is not possible if you know a sample where a Storyboard is used on a path but not on a line.

    I realized that Storyboard animation is between two points and middle points are on a line, but my animation is not linear.  To achieve nonlinear animation we can’t rely on built in storyboard as I understand. For this type of animation we need to provide between points (nonlinear) and that can be done only with threading with appropriate intervals.  I have built this animation with new design (or custom animation) it works fine. Thank you very much for participating in this discussion.


    Agha Khan

    • Marked as answer by Agha Saturday, May 24, 2014 2:17 AM
    Saturday, May 24, 2014 2:17 AM

All replies

  • The easiest way to figure this out is to build the animation in Blend. You can set up the animations and see how they affect the overall results.You are right though that you don't want to animate Canvas.Left. You should always try to avoid dependent animations on properties which will force a new layout. Instead use an independent animation to animate the RenderTransform. This will be significantly more efficient.

    I'm not on a system where I can look at your project. It would be helpful if you'd at least sketch out the code in your post as well.

    --Rob

    Saturday, May 17, 2014 3:20 AM
    Owner
  •  private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
            {
                var btn = sender as Button;
                if (btn != null && btn.Content != null)
                {
                    if (btn.Content.ToString() == "Plus")
                    {
                        angle++;
                        if (angle > 360)
                            angle = 0;
                    }
                    else
                    {
                        angle--;
                        if (angle < 0)
                            angle = 360;
                    }
                    AngleValue.Text = string.Format("{0}", angle);
    
                    var tg = new TransformGroup();
                    var rt1 = new RotateTransform()
                    {
                        Angle = angle
                    };
    
                    var rt2 = new RotateTransform()
                    {
                        Angle = -angle,
                        CenterX = -301
                    };
    
                    var tt = new TranslateTransform
                    {
                        X = 13.5,
                        Y = 13.5
                    };
    
                    tg.Children.Add(rt1);
                    tg.Children.Add(rt2);
                    tg.Children.Add(tt);
                    Number.RenderTransform = tg;
                }

    Dear Rob:I wrote that code myself and it is for window 8. It is a complete project.  The middle of the image should be on the circle. It works fine as I was testing the application. That sample is build VS 2013. I am not sure why middle of the image is not perfect on the circle. (Number is an image)

    As you see the transformation is correct. Please have a look.

    Thanks for help.

     

    Agha Khan

    Saturday, May 17, 2014 3:36 AM
  • Dear Rob:

    Thanks for suggestions and I looked blend but didn't find any place where I can implement transformation as a group. As you see in my sample the concept is correct, but having difficulty how to implement in blend. Thank you very much for guidance and help 


    Agha Khan

    Sunday, May 18, 2014 3:48 PM
  • I'm not sure what you mean by it works fine but it's not perfect.

    Can you share a minimal demo that shows the problem along with a clear explanation of the expected results and how they differ from the actual results?

    Saturday, May 24, 2014 1:56 AM
    Owner
  • Dear Rob:

    Thanks for your reply.

    I have provided the sample which has Group Render Transformation. I do not see how I can animate a Group Transformation. As I requested how I can animate a image on a circle. As you see in my sample  it works fine without animation, but unable to animate. When I tried to animate from point A to point B, the animation takes the shortest path (Line), which looks ugly. Maybe it is not possible if you know a sample where a Storyboard is used on a path but not on a line.

    I realized that Storyboard animation is between two points and middle points are on a line, but my animation is not linear.  To achieve nonlinear animation we can’t rely on built in storyboard as I understand. For this type of animation we need to provide between points (nonlinear) and that can be done only with threading with appropriate intervals.  I have built this animation with new design (or custom animation) it works fine. Thank you very much for participating in this discussion.


    Agha Khan

    • Marked as answer by Agha Saturday, May 24, 2014 2:17 AM
    Saturday, May 24, 2014 2:17 AM