WPF - Create a floating animated clickable control (image or...)

Question

I want create a floating animated clickable control like a helium balloon that moves sometimes to right or left too in my WPF application.

The helium balloons likes go up! but also they moves right or left if we tap on them or by wind.

In advance cases, sometimes they turn to right or left

....................................................................

So i searched the web but i didn't find any usefull sample project or library or styles.

• How i can create style and animation in WPF to show an image or control buoyant or suspended in air.?

• Have you any suggestions to implement this idea simply...?

Edit:

• What is your suggestion for a random and infinite smooth turns to right and left. for example 51degrees to left then 163degree to right and.... i want keep my balloon in my window and often top of the window.

---

Edit:

I created an animation base on these answers but more complex by manipulating them and adding multiple parallel animation on balloon image and its container. ;) Thanks all...

Now my primary result is like this:

Answer 1

You can achieve this with a DoubleAnimation and a RotateTransform like @Ega mentioned. To answer your "random and infinite" turns to right and left, here's how you could do it (it's very basic but does the job).

    private async void Button_Click(object sender, RoutedEventArgs e)
    {
        var rnd = new Random();
        var direction = -1;

        while (true)
        {
            var percent = rnd.Next(0, 100);
            direction *= -1; // Direction changes every iteration
            var rotation = (int)((percent / 100d) * 45 * direction); // Max 45 degree rotation
            var duration = (int)(750 * (percent / 100d)); // Max 750ms rotation

            var da = new DoubleAnimation
            {
                To = rotation,
                Duration = new Duration(TimeSpan.FromMilliseconds(duration)),
                AutoReverse = true // makes the balloon come back to its original position
            };

            var rt = new RotateTransform();
            Balloon.RenderTransform = rt; // Your balloon object
            rt.BeginAnimation(RotateTransform.AngleProperty, da);

            await Task.Delay(duration * 2); // Waiting for animation to finish, not blocking the UI thread
        }
    }

edit for .NET 3.5

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        var thread = new Thread(this.AnimateBalloon);
        thread.Start();
    }

    public void AnimateBalloon()
    {
        var rnd = new Random();
        var direction = -1;

        while (true)
        {
            var percent = rnd.Next(0, 100);
            direction *= -1; // Direction changes every iteration
            var rotation = (int)((percent / 100d) * 45 * direction); // Max 45 degree rotation
            var duration = (int)(750 * (percent / 100d)); // Max 750ms rotation

            Balloon.Dispatcher.BeginInvoke(
                (Action)(() =>
                {
                    var da = new DoubleAnimation
                    {
                        To = rotation,
                        Duration = new Duration(TimeSpan.FromMilliseconds(duration)),
                        AutoReverse = true // makes the balloon come back to its original position
                    };

                    var rt = new RotateTransform();
                    Balloon.RenderTransform = rt; // Your balloon object
                    rt.BeginAnimation(RotateTransform.AngleProperty, da);
                }));

            Thread.Sleep(duration * 2);
        }
    }