视口原点动画 [英] Viewport Origin animation

问题描述

我正在开发一个 Windows 手机应用程序，其中有一个视口控制器，它使我能够放大和缩小内容.我想将缩放集中在我缩放的点上.我可以用什么

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()

但这会使视口控制器跳转到我设置的原点.这看起来不太好.因此，我想创建一个故事板，随着缩放的发生逐渐改变原点.

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 我在哪里设置?但我似乎不能在这里设置一个点?非常感谢任何帮助！

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!

推荐答案

我尝试了几种不同的方法，结果这是最流畅的.它不漂亮，但很管用.

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屋！