【UWP】借助GestureRecognizer：一种滑动手势动效的实现

brandonw3612

于 2021-07-03 02:09:16 发布

阅读量366

点赞数 2

分类专栏： UWP随手记文章标签： windows uwp ui 交互设计

本文链接：https://blog.csdn.net/brandonw3612/article/details/118424917

版权

UWP随手记专栏收录该内容

7 篇文章 1 订阅

订阅专栏

背景

播放器项目中存在设计：播放详情视图 PlaybackDetailView 单独写成 Page 嵌套在一个 Frame 中浮动在根视图的NavigationView 上层。（此前试着用过页面导航的方式切换，但效果较差，且不易与 NavigationView 的历史导航结合使用，故放弃。）后通过 Microsoft 提供的 Windows Community Toolkit，使用 Microsoft.Toolkit.Uwp.UI.Animations 提供的ImplicitAnimations 实现了动画控制 Frame 的展开和关闭。代码如下：

xmlns:anim="using:Microsoft.Toolkit.Uwp.UI.Animations"

<Frame Visibility="Collapsed">
    <anim:Implicit.ShowAnimations>
        <anim:TranslationAnimation From="..." To="0" Duration="..." />
    </anim:Implicit.ShowAnimations>
    <anim:Implicit.HideAnimations>
        <anim:TranslationAnimation To="..." From="0" Duration="..." />
    </anim:Implicit.HideAnimations>
</Frame>

其中两个 TranslationAnimation 中的 From / To 值采用数据绑定，在窗口调整时变为窗口尺寸对应的数值。

本次更改需求如下：Windows 11更新了大量对平板设备的支持，笔者也在项目各处优化触摸屏设备的操作，因此想在此处加入手势处理，在触摸屏设备上实现下滑收起面板的功能（，让手里那块Surface Pro 6发光发热）。

GestureRecognizer

在 Bing 搜索关键词 UWP gesture，排序第一的即是本文探讨的核心：GestureRecognizer 。奇怪的是，微软并没有将此技术放在UWP文档交互相关的显眼位置，不知是因为什么原因（而且Windows 10 2004版本还对此进行了更新，当然也可能是笔者村通网）。

GestureRecognizer的使用逻辑很简单。它基于控件的指针事件实现用户手势的识别。使用时只需注册空间指针事件，并在其中调用GestureRecognizer的相关方法即可。大致流程如下：

using Windows.UI.Xaml.Input;

在类中定义 GestureRecognizer 对象, 命名为 _recognizer

private GestureRecognizer _recognizer;

假定控件名为 element, 在构造方法或 Loaded 处理方法中完成 _recognizer 的初始化, 并加入控件指针事件的处理。

_recognizer = new GestureRecognizer()
{
    GestureSettings = GestureSettings.ManipulationTranslateY
    // 此处为手势识别器需要识别的手势, 这里只需识别纵向滑动
};

element.PointerPressed += OnPointerPressed;
element.PointerMoved += OnPointerMoved;
element.PointerReleased += OnPointerReleased;
element.PointerCanceled += OnPointerCanceled;

类中定义指针事件处理方法。对于手势处理, 我们只需捕获指针按下、释放、移动、取消的事件。如果需要限制输入设备，例如仅限触摸操作、笔操作响应手势，可以通过判断 args.Pointer.PointerDeviceType 完善以下代码：

void OnPointerPressed(object sender, PointerRoutedEventArgs args)
{
    element.CapturePointer(args.Pointer);
    _recognizer.ProcessDownEvent(args.GetCurrentPoint(reference));
}

void OnPointerMoved(object sender, PointerRoutedEventArgs args)
{
    _recognizer.ProcessMoveEvents(args.GetIntermediatePoints(reference));
}

void OnPointerReleased(object sender, PointerRoutedEventArgs args)
{
    _recognizer.ProcessUpEvent(args.GetCurrentPoint(reference));
    element.ReleasePointerCapture(args.Pointer);
}

void OnPointerCanceled(object sender, PointerRoutedEventArgs args)
{
    _recognizer.CompleteGesture();
    element.ReleasePointerCapture(args.Pointer);
}

接着在构造方法中完成手势事件的处理。

_recognizer.ManipulationUpdated += Recognizer_ManipulationUpdated;
_recognizer.ManipulationCompleted += Recognizer_ManipulationCompleted;

具体的实现待会儿再说。这里没有选择响应 CrossSliding 事件，是因为我们需要实时对用户手势做出响应，而不是等待手势完成后触发相关动画，那样做会造成视觉上的拖沓感。

主体实现

我们的 Frame 元素业务逻辑是从窗口底部向上推入，直至占满全屏。笔者的做法是在XAML中先将其 Visibility 设置为 Collapsed ，在用户第一次激活播放详情视图时将 Visibility 设置为 Visible ，并加载从窗口底部推入的动画。动画主体使用 CompositeTransform 实现，XAML代码如下：

<Frame Visibility="Collapsed">
    <Frame.RenderTransform>
        <CompositeTransform />
    </Frame.RenderTransform>
</Frame>

对于 Frame 的展开和收起，我们在页面类定义公开方法 SetPlaybackDetailFrameVisibility 。

// 由于第一次展开 Frame 后不再对 Frame 的 Visibility 做任何处理, 我们直接采用一个私有变量存储面板的开闭状态
private bool _playbackDetailFrameOpened = false;

// 该方法同时用于播放详情页 “返回” 按钮的调用, 主页面导航至新页面后的详情视图折叠, 以及前文 Manipulation 事件的自动状态校正
public async void SetPlaybackDetailFrameVisibility(bool IsVisible)
{
    // 避免公开方法被非 UI 线程调用, 直接采用 Dispatcher 执行相关代码
    await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
    {
        // 当播放器中未加载歌曲时打开也没意义
        if (IsVisible == true && PlaybackEngine.Current.CurrentItem != null)
        {
            PlaybackDetailFrame.Visibility = Visibility.Visible;
            var openStoryboard = new Storyboard();
            var openAnimation = new DoubleAnimation();
            // 此处 DoubleAnimation 的定义和XAML不同的是其操作对象直接引用, 而不是采用 TargetName 的方式
            Storyboard.SetTarget(openAnimation, PlaybackDetailFrame);
            Storyboard.SetTargetProperty(openAnimation, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");
            openAnimation.To = 0;
            openAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(300));
            openStoryboard.Children.Add(openAnimation);
            openStoryboard.Begin();
        }
        else
        {
            var foldStoryboard = new Storyboard();
            var foldAnimation = new DoubleAnimation();
            Storyboard.SetTarget(foldAnimation, PlaybackDetailFrame);
            Storyboard.SetTargetProperty(foldAnimation, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");
            // 该方法在 Page 内定义, ActualHeight 为页面的实际高度
            foldAnimation.To = ActualHeight;
            foldAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(300));
            foldStoryboard.Children.Add(foldAnimation);
            foldStoryboard.Begin();
        }
        // 展开 / 收起页面时分别注册 / 注销页面的相关事件, 以优化浏览时的占用
        // 完成状态记录的切换
        if (IsVisible == true && PlaybackEngine.Current.CurrentItem != null && !_playbackDetailFrameOpened)
        {
            PlaybackDetailView.CurrentPageInstance.PlaybackEngineEventRegister();
            _playbackDetailFrameOpened = true;
        }
        else if (IsVisible == false && _playbackDetailFrameOpened)
        {
            PlaybackDetailView.CurrentPageInstance.PlaybackEngineEventUnregister();
            _playbackDetailFrameOpened = false;
        }
    });
}

其实也可以优化一下。

private bool _playbackDetailFrameOpened = false;

public async void SetPlaybackDetailFrameVisibility(bool IsVisible)
{
    await Dispatcher.RunAsync(CoreDispatcherPriority.Normal, () =>
    {
    	bool visibilityResult = IsVisible && PlaybackEngine.Current.CurrentItem != null;
    	if (visibilityResult) PlaybackDetailFrame.Visibility = Visibility.Visible;
        var translationStoryboard = new Storyboard();
        var translationAnimation = new DoubleAnimation();
        Storyboard.SetTarget(translationAnimation, PlaybackDetailFrame);
        Storyboard.SetTargetProperty(translationAnimation, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");
        translationAnimation.To = visibilityResult ? 0 : ActualHeight;
        translationAnimation.Duration = new Duration(TimeSpan.FromMilliseconds(300));
        translationStoryboard.Children.Add(translationAnimation);
        translationStoryboard.Begin();
        
        if (visibilityResult && !_playbackDetailFrameOpened)
        {
            PlaybackDetailView.CurrentPageInstance.PlaybackEngineEventRegister();
            _playbackDetailFrameOpened = true;
        }
        else if (!visibilityResult && _playbackDetailFrameOpened)
        {
            PlaybackDetailView.CurrentPageInstance.PlaybackEngineEventUnregister();
            _playbackDetailFrameOpened = false;
        }
    });
}

窗口的 SizeChanged 事件处理中加上

if (!_playbackDetailFrameOpened) (PlaybackDetailFrame.RenderTransform as CompositeTransform).TranslateY = e.NewSize.Height;

播放详情展开时无需调整，收起时总放置在窗口底部。

手势事件的处理

回头处理前面两个事件的响应方法。

在 ManipulationUpdated 事件中，首先获取控件当前的 Translation （为保证统一逻辑，未使用 UIElement.Translation 属性），与操纵交互更新的增量 Delta 相加得到一个新的结果。为了将控件限制在可操作范围内，将结果（TranslationY）限制在 0 到 ActualHeight 之间（正常情况下后者的溢出应该不会发生，但是保险起见，you know）。最终应用这个结果到 CompositeTransform 上。

private void Recognizer_ManipulationUpdated(GestureRecognizer sender, ManipulationUpdatedEventArgs args)
{
    double destY = (PlaybackDetailFrame.RenderTransform as CompositeTransform).TranslateY + args.Delta.Translation.Y;
    if (destY <= 0) destY = 0;
    if (destY >= ActualHeight) destY = ActualHeight;
    (PlaybackDetailFrame.RenderTransform as CompositeTransform).TranslateY = destY;
}

ManipulationCompleted 则简单得多。获取手势操作完成后 TranslationY 的值，与我们设定的阈值比较，完成手势操作动画即可。注意：这里直接调用了 SetPlaybackDetailFrameVisibility 。与之对应的是，我们在该方法的 DoubleAnimation 中未指定 From 的大小。也就是说，我们的动画是从 Frame 的当前位置开始的。

private void Recognizer_ManipulationCompleted(GestureRecognizer sender, ManipulationCompletedEventArgs args)
{
    double destY = (PlaybackDetailFrame.RenderTransform as CompositeTransform).TranslateY;
    SetPlaybackDetailFrameVisibility(destY <= ActualHeight * 0.4);
}

至此，手势操作全部完成。

浮动层指针事件的处理

播放详情视图作为浮动层，其中同样包含了诸多元素，用户在这些控件上操作时应该是这些控件发生响应，而手势识别不应触发。因此我们需要在浮动层指针路由事件的响应方法中将 Handled 设置为 True。例：笔者的项目中歌词滚动面板的 ScrollViewer 容器响应 DirectManipulationStarted 和 DirectManipulationCompleted 事件，而这两事件均非 PointerRoutedEvent 。无法设定其 Handled 状态。考虑到 Windows 平台上大多数形式的交互均与指针事件有关，我们尝试在播放详情页构造方法中添加该 ScrollViewer 的 PointerPressed 事件的响应，直接将 Handled 设置为 True 。经尝试方案可行。

失败的尝试

在使用 Storyboard 之前，根据先前的思路，尝试过 Microsoft.Toolkit.Uwp.UI.Animations 提供的 TranslationAnimation ，大体方向没问题，但实现结果一团乱，直接放弃，采用了传统的实现方式。

结语

有事没事钻一钻 Documentation，还挺有意思。还有，交互不好做啊。最后，希望UWP能在Windows 11的时代接着商店盘活的势头再度起来。

brandonw3612

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【UWP】借助GestureRecognizer：一种滑动手势动效的实现

背景播放器项目中存在设计：播放详情视图 PlaybackDetailView 单独写成 Page 嵌套在一个 Frame 中浮动在根视图的NavigationView 上层。（此前试着用过页面导航的方式切换，但效果较差，且不易与 NavigationView 的历史导航结合使用，故放弃。）后通过 Microsoft 提供的 Windows Community Toolkit，使用 Microsoft.Toolkit.Uwp.UI.Animations 提供的ImplicitAnimations 实现了动画
复制链接

扫一扫