如何将Image TranslateTranform应用到Image上一步一步（跳几个Pixel）

Question

我目前在我的应用程序中通过代码在图像上使用 TranslateTransform，它工作正常。

但我希望图像一步一步移动，比方说每次移动跳跃 10 或 20 像素。有没有办法做到这一点。这是为了给机芯带来复古气息。

我在想 TranslateTransform.Step = 10;

            Duration durationX = new TimeSpan(0, 0, 0, 0, 600);
            Duration durationY = new TimeSpan(0, 0, 0, 0, 400);

            DoubleAnimation moveX = new DoubleAnimation();
            moveX.Duration = durationX;
            moveX.To = ((ImgCanvasCoordinates[cardSource][0] - ImgCanvasCoordinates[cardTarget][0]) * -1);
            DoubleAnimation moveY = new DoubleAnimation();
            moveY.Duration = durationY;
            moveY.To = ((ImgCanvasCoordinates[cardSource][1] - ImgCanvasCoordinates[cardTarget][1]) * -1);

            Storyboard story1 = new Storyboard();
            story1.Children.Add(moveX);
            story1.Children.Add(moveY);
            Storyboard.SetTarget(moveX, imgGhost);
            Storyboard.SetTarget(moveY, imgGhost);
            Storyboard.SetTargetProperty(moveX, "(Image.RenderTransform).(TranslateTransform.X)");
            Storyboard.SetTargetProperty(moveY, "(Image.RenderTransform).(TranslateTransform.Y)");

            story1.Begin();

Answer 1

您可以使用自定义 EasingFunction 来实现此目的。

通过写一个EasingFunction你可以完全控制动画的移动。我写了一个 StepEasingFunction 如下所示：

public class StepEasingFunction : EasingFunctionBase
{
    public double NormalizedStep { get; set; }

    protected override Freezable CreateInstanceCore()
    {
        return new StepEasingFunction {NormalizedStep = NormalizedStep};
    }

    protected override double EaseInCore(double normalizedTime)
    {
        var stepIndex = Math.Round(normalizedTime / NormalizedStep);
        return NormalizedStep * stepIndex;
    }
}

然后，只需添加一个 EasingFunction 分配给动画：

moveX.EasingFunction = new StepEasingFunction {NormalizedStep = 0.2};
moveY.EasingFunction = new StepEasingFunction {NormalizedStep = 0.2};

那么，如何计算NormalizedStep属性的值呢？

你说每一步要移动10个像素，所以计算步数总和用1 / stepTotalCount计算最后的NormalizedStep属性.

如何将Image TranslateTranform应用到Image上一步一步（跳几个Pixel）

How to apply Image TranslateTranform to an Image by step (Jump a few Pixel)

c#

rendertransform