UWP 利用Windows.UI.Composition实现简单的放大??效果

原文:UWP 利用Windows.UI.Composition实现简单的放大??效果

看一下效果先

UWP 利用Windows.UI.Composition实现简单的放大??效果

 

 

我这里实现了鼠标进入和退出的效果,当然也可以添加其他的事件,比如获得焦点和失去焦点的。

先随便写一个xaml布局,一个Grid,里面一张图片。

UWP 利用Windows.UI.Composition实现简单的放大??效果
<Grid 
            x:Name="GridA"
            Width="400" Height="240" 
            PointerEntered="Grid_PointerEntered" 
            PointerExited="Grid_PointerExited">
            <Image Source="https://images.cnblogs.com/cnblogs_com/hupo376787/1091131/o_712.png"/>
</Grid>
UWP 利用Windows.UI.Composition实现简单的放大??效果

 

然后

UWP 利用Windows.UI.Composition实现简单的放大??效果
        private void Grid_PointerEntered(object sender, PointerRoutedEventArgs e)
        {
            CreateOrUpdateSpringAnimation(1.1f);
            GridA.StartAnimation(_springAnimation);
        }

        private void Grid_PointerExited(object sender, PointerRoutedEventArgs e)
        {
            CreateOrUpdateSpringAnimation(1.0f);
            GridA.StartAnimation(_springAnimation);
        }
UWP 利用Windows.UI.Composition实现简单的放大??效果

 

CreateOrUpdateSpringAnimation的代码

UWP 利用Windows.UI.Composition实现简单的放大??效果
        private void CreateOrUpdateSpringAnimation(float finalValue)
        {
            if (_springAnimation == null)
            {
                _springAnimation = _compositor.CreateSpringVector3Animation();
                _springAnimation.Target = "Scale";
            }

            _springAnimation.FinalValue = new Vector3(finalValue);
        }
UWP 利用Windows.UI.Composition实现简单的放大??效果

 

不过按照这样的实现的话,在放大的时候,图片并不是和我的一模一样,因为放大的时候中心点默认是左上角(0, 0).

UWP 利用Windows.UI.Composition实现简单的放大??效果

 

所以为了实现中心放大效果,在PointerEntered事件里面还需要

GridA.CenterPoint = new Vector3((float)(GridA.ActualWidth / 2.0), (float)(GridA.ActualHeight / 2.0), 1f);

 

 

好了,这样就可以实现中心放大??的效果了。

 

UWP 利用Windows.UI.Composition实现简单的放大??效果

上一篇:winform中动态生成多行label,同时添加滚动条


下一篇:在Windows上采用Cmake+Visual Studio编译并使用静态opencv库并发布成裸机可执行程序