Как применить Image TranslateTranform к изображению шаг за шагом (Перейти на несколько пикселей) - PullRequest
Новая
       83

Как применить Image TranslateTranform к изображению шаг за шагом (Перейти на несколько пикселей)

0 голосов
/ 29 мая 2019

В настоящее время я использую 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();

1 Ответ

2 голосов
/ 29 мая 2019

Preview of the step animating effect

Вы можете использовать пользовательский 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.

...