如何使用 WPF canvas 以编程方式将图像从一点动画化到另一点?
How can I animate an image from one point to another programmatically using a WPF canvas?
我正在开发 WPF 应用程序。在这个应用程序中,我需要在铁路上移动我的火车。我在 canvas 上画了所有的铁路线。所以我只需要移动火车。
我也在网上搜了一下,我找到了that!例如。
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
using System.Windows.Media;
namespace SDKSamples
{
// This example shows how to use PointAnimation to animate the
// position of an ellipse by animating the Center property of an
// EllipseGeometry. PointAnimation is used because the Center property
// takes a Point value.
public class PointAnimationExample : Page
{
public PointAnimationExample()
{
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
EllipseGeometry myEllipseGeometry = new EllipseGeometry();
myEllipseGeometry.Center = new Point(200, 100);
myEllipseGeometry.RadiusX = 15;
myEllipseGeometry.RadiusY = 15;
// Assign the EllipseGeometry a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"MyAnimatedEllipseGeometry", myEllipseGeometry);
Path myPath = new Path();
myPath.Fill = Brushes.Blue;
myPath.Margin = new Thickness(15);
myPath.Data = myEllipseGeometry;
PointAnimation myPointAnimation = new PointAnimation();
myPointAnimation.Duration = TimeSpan.FromSeconds(2);
// Set the animation to repeat forever.
myPointAnimation.RepeatBehavior = RepeatBehavior.Forever;
// Set the From and To properties of the animation.
myPointAnimation.From = new Point(200, 100);
myPointAnimation.To = new Point(450, 250);
// Set the animation to target the Center property
// of the object named "MyAnimatedEllipseGeometry."
Storyboard.SetTargetName(myPointAnimation, "MyAnimatedEllipseGeometry");
Storyboard.SetTargetProperty(
myPointAnimation, new PropertyPath(EllipseGeometry.CenterProperty));
// Create a storyboard to apply the animation.
Storyboard ellipseStoryboard = new Storyboard();
ellipseStoryboard.Children.Add(myPointAnimation);
// Start the storyboard when the Path loads.
myPath.Loaded += delegate(object sender, RoutedEventArgs e)
{
ellipseStoryboard.Begin(this);
};
Canvas containerCanvas = new Canvas();
containerCanvas.Children.Add(myPath);
Content = containerCanvas;
}
}
}
我试过这段代码及其工作原理。但是当我运行应用的时候,我之前画的路就不再出现了。那么我怎样才能在我的铁路上移动我的火车呢?
我继续搜索并找到了解决方案。
我曾经使用 DoubleAnimation 实例。
工作代码如下。
public void move( Image target, double oldX, double oldY, double newX,
double newY,int time)
{
TranslateTransform trans = new TranslateTransform();
target.RenderTransform = trans;
DoubleAnimation anim1 = new DoubleAnimation(oldY, newY,
TimeSpan.FromSeconds(time));
anim1.RepeatBehavior = RepeatBehavior.Forever;
trans.BeginAnimation(TranslateTransform.YProperty, anim1);
DoubleAnimation anim2 = new DoubleAnimation(oldX, newX,
TimeSpan.FromSeconds(time));
anim2.RepeatBehavior = RepeatBehavior.Forever;
trans.BeginAnimation(TranslateTransform.XProperty, anim2);
}
我正在开发 WPF 应用程序。在这个应用程序中,我需要在铁路上移动我的火车。我在 canvas 上画了所有的铁路线。所以我只需要移动火车。
我也在网上搜了一下,我找到了that!例如。
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media.Animation;
using System.Windows.Media;
namespace SDKSamples
{
// This example shows how to use PointAnimation to animate the
// position of an ellipse by animating the Center property of an
// EllipseGeometry. PointAnimation is used because the Center property
// takes a Point value.
public class PointAnimationExample : Page
{
public PointAnimationExample()
{
// Create a NameScope for this page so that
// Storyboards can be used.
NameScope.SetNameScope(this, new NameScope());
EllipseGeometry myEllipseGeometry = new EllipseGeometry();
myEllipseGeometry.Center = new Point(200, 100);
myEllipseGeometry.RadiusX = 15;
myEllipseGeometry.RadiusY = 15;
// Assign the EllipseGeometry a name so that
// it can be targeted by a Storyboard.
this.RegisterName(
"MyAnimatedEllipseGeometry", myEllipseGeometry);
Path myPath = new Path();
myPath.Fill = Brushes.Blue;
myPath.Margin = new Thickness(15);
myPath.Data = myEllipseGeometry;
PointAnimation myPointAnimation = new PointAnimation();
myPointAnimation.Duration = TimeSpan.FromSeconds(2);
// Set the animation to repeat forever.
myPointAnimation.RepeatBehavior = RepeatBehavior.Forever;
// Set the From and To properties of the animation.
myPointAnimation.From = new Point(200, 100);
myPointAnimation.To = new Point(450, 250);
// Set the animation to target the Center property
// of the object named "MyAnimatedEllipseGeometry."
Storyboard.SetTargetName(myPointAnimation, "MyAnimatedEllipseGeometry");
Storyboard.SetTargetProperty(
myPointAnimation, new PropertyPath(EllipseGeometry.CenterProperty));
// Create a storyboard to apply the animation.
Storyboard ellipseStoryboard = new Storyboard();
ellipseStoryboard.Children.Add(myPointAnimation);
// Start the storyboard when the Path loads.
myPath.Loaded += delegate(object sender, RoutedEventArgs e)
{
ellipseStoryboard.Begin(this);
};
Canvas containerCanvas = new Canvas();
containerCanvas.Children.Add(myPath);
Content = containerCanvas;
}
}
}
我试过这段代码及其工作原理。但是当我运行应用的时候,我之前画的路就不再出现了。那么我怎样才能在我的铁路上移动我的火车呢?
我继续搜索并找到了解决方案。 我曾经使用 DoubleAnimation 实例。 工作代码如下。
public void move( Image target, double oldX, double oldY, double newX,
double newY,int time)
{
TranslateTransform trans = new TranslateTransform();
target.RenderTransform = trans;
DoubleAnimation anim1 = new DoubleAnimation(oldY, newY,
TimeSpan.FromSeconds(time));
anim1.RepeatBehavior = RepeatBehavior.Forever;
trans.BeginAnimation(TranslateTransform.YProperty, anim1);
DoubleAnimation anim2 = new DoubleAnimation(oldX, newX,
TimeSpan.FromSeconds(time));
anim2.RepeatBehavior = RepeatBehavior.Forever;
trans.BeginAnimation(TranslateTransform.XProperty, anim2);
}