Перевести и масштабировать анимацию

Question

У меня есть приложение wpf и изображение внутри холста. Изображение размещено в 0,0.

Мне нужно анимировать изображение, перемещающееся с 0,0 до 500,200 и в то же время растущее (мне нравится создавать эффект, подобный переходу издалека)

Если я сделаю это:

        TranslateTransform ttx = new TranslateTransform();
        TranslateTransform tty = new TranslateTransform();

        DoubleAnimationUsingKeyFrames dax = new DoubleAnimationUsingKeyFrames();
        dax.KeyFrames.Add(new LinearDoubleKeyFrame(500, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1))));

        DoubleAnimationUsingKeyFrames day = new DoubleAnimationUsingKeyFrames();
        day.KeyFrames.Add(new LinearDoubleKeyFrame(200, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1))));

        TransformGroup tg = new TransformGroup();
        tg.Children.Add(ttx);
        tg.Children.Add(tty);

        krug.RenderTransform = tg;

        ttx.BeginAnimation(TranslateTransform.XProperty, dax);
        tty.BeginAnimation(TranslateTransform.YProperty, day);

И это прекрасно работает. Оживляет перевод изображения «круг» с 0,0 до 500 200.

Но когда я добавляю логику для увеличения изображения при переводе так:

        ScaleTransform zoom = new ScaleTransform();
        DoubleAnimationUsingKeyFrames zoomTimeline = new DoubleAnimationUsingKeyFrames();
        zoomTimeline.KeyFrames.Add(new LinearDoubleKeyFrame(2, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(1))));
        tg.Children.Add(zoom);
        zoom.BeginAnimation(ScaleTransform.ScaleXProperty, zoomTimeline);
        zoom.BeginAnimation(ScaleTransform.ScaleYProperty, zoomTimeline);

Тогда изображение не останавливается на 500, 200, а идет дальше. Если коэффициент масштабирования больше, перевод идет в будущее. Как я могу управлять анимацией до 500 200?

Answer 1

Проблема, с которой вы сталкиваетесь при объединении масштабирования и преобразования, состоит в том, что он будет масштабировать преобразование преобразования из точки происхождения (ScaleTransform.CenterX, ScaleTransform.CenterY)

Например, если вы хотите скользитьвправо на 50 и удвоив масштаб, он на самом деле переместит чистое расстояние на 100.

Попробуйте анимировать ScaleTransform.CenterX и ScaleTransform.CenterY в соответствии с вашим преобразованием преобразования.Я считаю, что это позволит вам масштабироваться на лету, как вы хотите.

Answer 2

Я нашел решение. Я создал отдельный пользовательский элемент управления, который выполняет только ScaleTransform. Затем я применяю TranslateTransform к пользовательскому элементу управления.

Answer 3

Поместите анимацию в одну раскадровку и установите продолжительность раскадровки, чтобы контролировать длину анимации.

Затем запустите раскадровку.