视产地动画 [英] Viewport Origin animation

问题描述

我正在开发一款Windows Phone应用程序，在那里我有一个viewportcontroller，使我在放大和缩小的内容。
我想在这里我放大点居中变焦。我可以用做

I am developing a Windows phone app, where I have a viewportcontroller, that enables me to zoom in and out on content. I want to center the zoom at the point where I zoom. Which I can do with

Viewportcontroller.SetViewportOrigin()

但是这使得viewportcontroller跳转到我设置了原点。这看起来并不很漂亮。因此，我想创建一个逐渐变化的起源故事板的缩放发生。

But this makes the viewportcontroller jump to the origin I set. Which does not look very nice. I therefore would like to create a storyboard that changes the origin gradually as the zooming occurs.

因此​​，我想请问我应该如何与ViewportControl的属性做到这一点。我曾尝试一些不同的动画类型，翻译和XY。但无论我选择了错误的财产或者选择了错误的动画类型。因为没有什么工作：（

I therefore would like to ask how I should do this with a property of the ViewportControl. I have tried with some different animation types, translation and xy. But either I am choosing the property wrong or choosing the wrong animation type. Because nothing is working :(

我的问题是双重的，因此。
我该选择什么类型的动画。而且我怎么改变呢？
它应该是一个DoubleAnimation是我在哪里设置，并从？但我似乎无法在此设置一个点？任何帮助是非常AP preCIATED！

My Problem is therefore twofold. What type of animation do I choose. And how do I change it? Should it be a DoubleAnimation Where I set to and from? But I Cannot seem to set a point here? Any help IS MUCH APPRECIATED!

推荐答案

我尝试了几种不同的方法，这一次出来是流畅的。这不是pretty，但它的作品。

I tried a few different approaches and this one came out to be the smoothest. It's not pretty, but it works.

public partial class MainPage : PhoneApplicationPage
{
    private const int MoveCount = 25;

    private double _tickX;
    private double _tickY;

    private int _adjustCount = MoveCount+1;

    public MainPage()
    {
        InitializeComponent();
        Viewport.ViewportChanged += ViewportOnViewportChanged;
    }

    private void ViewportOnViewportChanged(object sender, ViewportChangedEventArgs viewportChangedEventArgs)
    {
        AdjstViewport();
    }

    private void AdjstViewport()
    {
        if (_adjustCount >= MoveCount) return;
        _adjustCount++;
        Viewport.SetViewportOrigin(new Point(Viewport.Viewport.X + _tickX, Viewport.Viewport.Y + _tickY));                        
    }

    private async void OnButtonClick(object sender, System.Windows.RoutedEventArgs e)
    {
        _adjustCount = 0;

        var content = (FrameworkElement)Viewport.Content;
        double zoomOriginX = (content.ActualWidth / 2) - (Viewport.Viewport.Width / 2);
        double zoomOriginY = (content.ActualHeight / 2) - (Viewport.Viewport.Height / 2);

        double distanceX = zoomOriginX - Viewport.Viewport.X;
        double distanceY = zoomOriginY - Viewport.Viewport.Y;

        _tickX = distanceX / MoveCount;
        _tickY = distanceY / MoveCount;

        AdjstViewport();
    }
}

这篇关于视产地动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！