WPF.以编程方式将图像移动到(X,Y)的最简单方法?

Wol*_*lf5 11 wpf animation

有没有人知道使用没有XAML的WPF动画动画从Image的当前位置动画到新位置(X,Y)的简单方法,100%以编程方式?并且没有引用"this"(使用RegisterName等).

我正在尝试为Image做一个扩展类来做动画的东西.通过动画更改宽度和高度属性很容易,但在搜索对象的位置动画后,它突然变得更加先进.

因为它是一个扩展类,所以我只会引用实际的Image对象,而X和YI想要移动它.

public static void MoveTo(this Image targetControl, double X, double Y, double Width, double Height){
 //code here
 ...
}
Run Code Online (Sandbox Code Playgroud)

更新:

谢谢.几乎工作.似乎GetTop和GetLeft返回'NaN'没有明确设置.在这篇文章中找到了解决方法:Canvas.GetTop()返回NaN

public static void MoveTo(this Image target, double newX, double newY) {
                Vector offset = VisualTreeHelper.GetOffset(target);
                var top = offset.Y;
                var left = offset.X;
                TranslateTransform trans = new TranslateTransform();
                target.RenderTransform = trans;
                DoubleAnimation anim1 = new DoubleAnimation(0, newY - top, TimeSpan.FromSeconds(10));
                DoubleAnimation anim2 = new DoubleAnimation(0, newX - left, TimeSpan.FromSeconds(10));
                trans.BeginAnimation(TranslateTransform.YProperty, anim1);
                trans.BeginAnimation(TranslateTransform.XProperty, anim2);
        }
Run Code Online (Sandbox Code Playgroud)

我不得不将两个值(FROM)与0交换.我认为必须是因为在这种情况下,图片的左上角是原点?但现在它有效.

Dea*_*alk 22

试试这个:

public static void MoveTo(this Image target, double newX, double newY)
{
    var top = Canvas.GetTop(target);
    var left = Canvas.GetLeft(target);
    TranslateTransform trans = new TranslateTransform();
    target.RenderTransform = trans;
    DoubleAnimation anim1 = new DoubleAnimation(top, newY - top, TimeSpan.FromSeconds(10));
    DoubleAnimation anim2 = new DoubleAnimation(left, newX - left, TimeSpan.FromSeconds(10));
    trans.BeginAnimation(TranslateTransform.XProperty,anim1);
    trans.BeginAnimation(TranslateTransform.YProperty,anim2);
}
Run Code Online (Sandbox Code Playgroud)

  • 几乎工作.left和top属性必须从VisualTreeHelper.GetOffset(target)获取,而不是GetTop和GetLeft返回'NaN'.只留下一个bug.动画的开始似乎从当前位置的两倍开始. (3认同)
  • 这仅在图像位于Canvas中时才起作用(获取Top和Left属性将返回0).如果您使用的是Canvas,则只需设置Canvas.Top和Canvas.Left属性即可移动它.对于另一种类型的容器,您可以设置边距(欧元)或者如Dean所提到的那样,使用平移变换. (2认同)
  • 0作为从值固定它. (2认同)

Dev*_*per 5

这是...它改变了大小并MediaElementCanvas. 只需输入您的参数:

Storyboard story = new Storyboard();
DoubleAnimation dbWidth = new DoubleAnimation();
dbWidth.From = mediaElement1.Width;
dbWidth.To = 600;
dbWidth.Duration = new Duration(TimeSpan.FromSeconds(.25));

DoubleAnimation dbHeight = new DoubleAnimation();
dbHeight.From = mediaElement1.Height;
dbHeight.To = 400;
dbHeight.Duration = dbWidth.Duration;

story.Children.Add(dbWidth);
Storyboard.SetTargetName(dbWidth, mediaElement1.Name);
Storyboard.SetTargetProperty(dbWidth, new PropertyPath(MediaElement.WidthProperty));

story.Children.Add(dbHeight);
Storyboard.SetTargetName(dbHeight, mediaElement1.Name);
Storyboard.SetTargetProperty(dbHeight, new PropertyPath(MediaElement.HeightProperty));

DoubleAnimation dbCanvasX = new DoubleAnimation();
dbCanvasX.From = 0;
dbCanvasX.To = 5;
dbCanvasX.Duration = new Duration(TimeSpan.FromSeconds(.25));

DoubleAnimation dbCanvasY = new DoubleAnimation();
dbCanvasY.From = 0;
dbCanvasY.To = 5;
dbCanvasY.Duration = dbCanvasX.Duration;

story.Children.Add(dbCanvasX);
Storyboard.SetTargetName(dbCanvasX, mediaElement1.Name);
Storyboard.SetTargetProperty(dbCanvasX, new PropertyPath(Canvas.LeftProperty));

story.Children.Add(dbCanvasY);
Storyboard.SetTargetName(dbCanvasY, mediaElement1.Name);
Storyboard.SetTargetProperty(dbCanvasY, new PropertyPath(Canvas.TopProperty));

story.Begin(this);
Run Code Online (Sandbox Code Playgroud)

<Viewbox Stretch="Uniform" StretchDirection="Both" SnapsToDevicePixels="True">
        <Grid  Width="640" Height="480" Name="MainLayout" SnapsToDevicePixels="True" Background="Black">
            <Canvas Width="640" Height="480" Name="MainCanvas" SnapsToDevicePixels="True">
                <MediaElement Height="171" HorizontalAlignment="Left" Name="mediaElement1" VerticalAlignment="Top" Width="337" LoadedBehavior="Manual" Margin="166,140,0,0" Canvas.Left="-162" Canvas.Top="-140" />
                <Button Canvas.Left="294" Canvas.Top="196" Content="Button" Height="23" Name="button1" Width="75" Click="button1_Click" />
            </Canvas>
        </Grid>
    </Viewbox>
Run Code Online (Sandbox Code Playgroud)

更新:

而不是MediaElement使用这一行:

 <Rectangle Height="171" HorizontalAlignment="Left" Name="mediaElement1" VerticalAlignment="Top" Width="337"    Margin="166,140,0,0" Canvas.Left="-162" Canvas.Top="-140" Fill="{DynamicResource {x:Static SystemColors.MenuBarBrushKey}}" />
Run Code Online (Sandbox Code Playgroud)

并且不要忘记将 C# 代码放在:

private void button1_Click(object sender, RoutedEventArgs e) {}
Run Code Online (Sandbox Code Playgroud)

您也可以使用MediaElement,但您必须定义 aVideoClip才能看到某些东西;)

  • 用 Rectangle 替换 MediaElement 使 rect 移动,但它不像精灵那样在屏幕上移动,而是在最右下角创建了一个放大(更大)的矩形。所提出的问题并不完全是预期的动画,我认为这是 C# 代码中的硬编码值。我投了赞成票,因为我知道回答问题并不容易,而且您很关心更新您的答案。 (2认同)