UWP 利用Windows.UI.Composition實現簡單的放大🔍效果

看一下效果先

 

 

我這裏實現了鼠標進入和退出的效果，當然也可以添加其他的事件，比如獲得焦點和失去焦點的。

先隨便寫一個xaml佈局，一個Grid，裏面一張圖片。

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

 

然後

        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);
        }

 

CreateOrUpdateSpringAnimation的代碼

        private void CreateOrUpdateSpringAnimation(float finalValue)
        {
            if (_springAnimation == null)
            {
                _springAnimation = _compositor.CreateSpringVector3Animation();
                _springAnimation.Target = "Scale";
            }

            _springAnimation.FinalValue = new Vector3(finalValue);
        }

 

不過按照這樣的實現的話，在放大的時候，圖片並不是和我的一模一樣，因爲放大的時候中心點默認是左上角（0, 0）.

 

所以爲了實現中心放大效果，在PointerEntered事件裏面還需要

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

 

 

好了，這樣就可以實現中心放大🔍的效果了。