Question

enter image description here 我想创建一个浮动动画可点击控件，就像氦气球一样，在我的WPF应用程序中有时会向右或向左移动。

氦气球喜欢上去！但如果他们左右移动   我们点击它们或通过风。

在事先的情况下，有时他们会向右或向左转

.................................. enter image description here {{0 }} ..................................

所以我搜索了网页，但我没有找到任何有用的示例项目或图书馆或样式。

如何在WPF中创建样式和动画来显示图像或控制浮力或悬浮在空气中。？
您有什么建议可以简单地实现这个想法吗？

修改

您对随机和无限顺畅转向左右的建议是什么？例如51degrees离开然后163degree到右边....我想把我的气球放在我的窗口，经常在窗户顶部。

修改

我根据这些答案创建了一个动画，但是通过操作它们并在气球图像及其容器上添加多个平行动画来创建更复杂的动画。 ;）谢谢大家...

现在我的主要结果如下： enter image description here

Answer 1

您可以使用DoubleAnimation和RotateTransform之类的@Ega来实现此目的。要回答你的“随机和无限”左右转弯，这里是你可以做到的（这是非常基本的，但能完成工作）。

    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
        }
    }

.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);
        }
    }

Answer 2

C＃的{p> Farseer Physics Engine将允许您创建真实世界模拟。你可以控制重力，惯性，力量甚至其他物质。

    World world = new World(new Vector2(0f, 9.82f));
    //We create a body object and make it dynamic (movable)
    Body myBody = world.CreateBody();
    myBody.BodyType = BodyType.Dynamic;

    //We create a circle shape with a radius of 0.5 meters
    CircleShape circleShape = new CircleShape(0.5f);

    //We fix the body and shape together using a Fixture object
    Fixture fixture = myBody.CreateFixture(circleShape);

对于这种情况，您可能需要创建一个重力较小的对象，并且对象将会飞行。您可以从对象的任一侧施加力来移动它。

Answer 3

C＃DoubleAnimation中的

是System.Windows.Media.Animation; NameSpace中强大的类支持动画，所以这个类有一些方法和属性让我告诉你

DoubleAnimation ANobj = new DoubleAnimation();//make object from DoubleAnimation
ANobj.From=0 //the 0 is point you want to star animation
ANobj.To=270//the end pont of moving 
// that values  is dependent on your self as you want
ANobj.Duration = new Duration(TimeSpan.FromSeconds(60)); //specify the duration of moving 
ANobj.RepeatBehavior = RepeatBehavior.Forever;//RepeatBehavior as you want

还使用RotateTransform类来旋转WPF中的C＃组件

RotateTransform RTobj=new RotateTransform();//make object from RotateTransform
RTobj.CenterX = 277;//X point of your Element(Componet)
RTobj.CenterY = 245;//Y point of your Element(Componet)
RTobj.Angle = 360;//angle between 
RTobj.BeginAnimation(RotateTransform.AngleProperty,ANobj);

在执行该配置之后，也可以将此obj设置为元素中的RenderTransform属性

yourElementName.RenderTransform=RTobj

如果您想在MSDN关于System.Windows.Media.Animation

阅读更多内容

Answer 4

这是我在高中时所做的一个。可能现在非常过时，但仅仅是为了利益。

//the animation thread
        System.Threading.Thread thr;

        thr = new System.Threading.Thread(annimate);
        thr.Start();

动画方法

 void annimate()
    {     
        try
        {       
            double angleToAnimateTo = 20;
            double CurrentAngle = 0;
            bool increment = false;

            while (IsAnimating)
            {
                if (increment)
                    CurrentAngle++;
                else
                    CurrentAngle--;

                if (CurrentAngle == angleToAnimateTo )
                    increment = false;

                if (CurrentAngle == (angleToAnimateTo * -1))
                    increment = true;


                this.Dispatcher.Invoke((Action)(() =>
                {
                    this.imgBallon.RenderTransform = new RotateTransform(CurrentAngle);
                }));

                System.Threading.Thread.Sleep(100);
            }


        }
        catch (Exception e)
        {
            MessageBox.Show(e.Message);
        }

imgBalloon是wpf中的简单图像。这是xaml ..

<Image x:Name="imgBallon" 
        Source="/img/balloon_blue.png" Width="50"> </Image>

Answer 5

五月这有助于你在这里，我从左到右拍摄多边形和一个图像，您可以根据自己的选择进行设置：）

<Window x:Class="Animation.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="XAML Animation - Spinning Stars" Height="300" Width="355"
        >
        <Grid Name="myGrid">
          <Canvas Margin="15,18,18,26" MinHeight="50" MinWidth="50" Name="canvas1">
            <!-- Invisible element just to host composite transform -->
            <Polygon
                Name ="mypolygon1"

                Stroke="Blue"

                StrokeThickness="1.0"

                Points="176.5,50 189.2,155.003 286.485,113.5 201.9,177 286.485,240.5 

        189.2,198.997 176.5,304 163.8,198.997 66.5148,240.5 151.1,177 

        66.5148,113.5 163.8,155.003">

              <Polygon.RenderTransform>
                <TransformGroup>
                  <RotateTransform x:Name="xformRotate" CenterX="176" CenterY="145" />
                  <TranslateTransform x:Name="xformTranslate" X ="-50" Y="-50" />
                  <ScaleTransform x:Name ="xformScale" ScaleX=".25" ScaleY=".25" />
                </TransformGroup>
                </Polygon.RenderTransform>

              <Polygon.Fill>

                  <SolidColorBrush Color="Blue">
                      <!--<ColorAnimation From="Yellow" To="Blue" Duration="7"

                        RepeatCount="500" AutoReverse="True"/>-->

                  </SolidColorBrush>

                </Polygon.Fill>
                <Polygon.Triggers>
                  <EventTrigger RoutedEvent="Polygon.Loaded">
                    <EventTrigger.Actions>
                      <BeginStoryboard>
                      <Storyboard>
                        <!-- RotateTransform angle from 0 to 360, repeated -->
                        <DoubleAnimation Storyboard.TargetName="xformRotate"
                                         Storyboard.TargetProperty="Angle"
                                         From="0" To="360" Duration="0:0:01"
                                         RepeatBehavior="Forever" />
                        <DoubleAnimation Storyboard.TargetName="xformTranslate"
                                         Storyboard.TargetProperty="X"
                                         From="1" To="750" Duration="0:0:14"
                                         AutoReverse ="True" RepeatBehavior="Forever" />
                      </Storyboard>
                      </BeginStoryboard>
                    </EventTrigger.Actions>
                  </EventTrigger>
                  </Polygon.Triggers>

              </Polygon>
            <Polygon
                Name ="mypolygon2"

                Stroke="Red"

                StrokeThickness="1.0"

                Points="176.5,50 189.2,155.003 286.485,113.5 201.9,177 286.485,240.5 

        189.2,198.997 176.5,304 163.8,198.997 66.5148,240.5 151.1,177 

        66.5148,113.5 163.8,155.003">

              <Polygon.RenderTransform>
                <TransformGroup>
                  <RotateTransform x:Name="xformRotateIt"   CenterX="176" CenterY="145"  />
                  <ScaleTransform ScaleX=".25" ScaleY=".25" />
                  <TranslateTransform  x:Name="xformTranslateIt" X="0" Y="100" />
                </TransformGroup>
              </Polygon.RenderTransform>

              <Polygon.Fill>

                <SolidColorBrush x:Name ="mybrush" Color="Red" />
              </Polygon.Fill>
              <Polygon.Triggers>
                <EventTrigger RoutedEvent="Polygon.Loaded">
                  <EventTrigger.Actions>
                    <BeginStoryboard>
                      <Storyboard x:Name="myStoryBoard" Completed="OnCompletedAnimation">
                        <!-- RotateTransform angle from 0 to 360, repeated -->
                        <DoubleAnimation Storyboard.TargetName="xformRotateIt"
                                         Storyboard.TargetProperty="Angle"
                                         From="0" To="360" Duration="0:0:01"
                                         RepeatBehavior="Forever" />
                        <DoubleAnimation Storyboard.TargetName="xformTranslateIt"
                                         Storyboard.TargetProperty="X"
                                         From="1" To="100" Duration="0:0:14"
                                         AutoReverse ="True" RepeatBehavior="Forever" />
                        <ColorAnimation Storyboard.TargetName="mybrush" Storyboard.TargetProperty="Color" From="Red" To="Blue" Duration="0:0:7" 
                        RepeatBehavior="Forever" AutoReverse="True"/>
                      </Storyboard>
                    </BeginStoryboard>
                  </EventTrigger.Actions>
                </EventTrigger>
              </Polygon.Triggers>

            </Polygon>


            <Image Margin="75,61,0,119" Name="image1" Source="Images\KENNY.bmp" HorizontalAlignment="Left" Width="72">
              <Image.RenderTransform>
                <TransformGroup>
                  <RotateTransform x:Name="KennyRotateIt"   CenterX="50" CenterY="50" Angle="45"  />
                  <ScaleTransform x:Name="KennyScaleIt" ScaleX=".75" ScaleY=".75" />
                  <TranslateTransform  x:Name="KennyTranslateIt" X="0" Y="100" />
                </TransformGroup>
              </Image.RenderTransform>
              <Image.Triggers>
                <EventTrigger RoutedEvent="Image.Loaded">
                  <EventTrigger.Actions>
                    <BeginStoryboard>
                      <Storyboard x:Name="myStoryBoard1" Completed="OnCompletedAnimation">
                        <!-- RotateTransform angle from 0 to 360, repeated -->
                        <DoubleAnimation Storyboard.TargetName="KennyRotateIt"
                                         Storyboard.TargetProperty="Angle"
                                         From="0" To="360" Duration="0:0:01"
                                         RepeatBehavior="Forever" />
                        <DoubleAnimationUsingKeyFrames
                             Storyboard.TargetName="KennyTranslateIt"
                             Storyboard.TargetProperty="X"
                             Duration="0:0:10" AutoReverse="True" RepeatBehavior="Forever">

                          <!-- These KeyTime properties are specified as TimeSpan values 
                     which are in the form of "hours:minutes:seconds". -->
                          <LinearDoubleKeyFrame Value="10" KeyTime="0:0:3" />
                          <LinearDoubleKeyFrame Value="100" KeyTime="0:0:5" />
                          <LinearDoubleKeyFrame Value="200" KeyTime="0:0:10" />
                        </DoubleAnimationUsingKeyFrames>
                        <!-- DoubleAnimation Storyboard.TargetName="KennyTranslateIt"
                                         Storyboard.TargetProperty="X"
                                         From="-50" To="100" Duration="0:0:14"
                                         AutoReverse ="True" RepeatBehavior="Forever" / -->
                      </Storyboard>
                    </BeginStoryboard>
                  </EventTrigger.Actions>
                </EventTrigger>
              </Image.Triggers>
            </Image>
          </Canvas>
      </Grid>

            </Window>

WPF - 创建浮动动画可点击控件（图像或...）

5 个答案: