做电池的有哪些网站,北京网站建设手机app电子商务,京东网上商城创立时间,网络推广公司网站UWP Composition API - PullToRefresh 原文:UWP Composition API - PullToRefresh背景#xff1a; 之前用ScrollViewer 来做过 PullToRefresh的控件#xff0c;在项目一些特殊的条件下总有一些问题#xff0c;比如ScrollViewer不会及时到达指定位置。于是便有了使用Composit… UWP Composition API - PullToRefresh 原文:UWP Composition API - PullToRefresh背景 之前用ScrollViewer 来做过 PullToRefresh的控件在项目一些特殊的条件下总有一些问题比如ScrollViewer不会及时到达指定位置。于是便有了使用Composition API来重新实现PullToRefresh控件。本控件的难点不是实现而是对Composition API的一些探索。 本文的一些观点或者说结论不一定是全对的都是通过实验得到的Composition API 可用的资料实在是太少了。 成品效果图 资料 Composition API 资料 1.官方Sample 2. 原作者 Nick Waggoner 供职于微软 native Windows UI platform 链接是对文章的翻译 VALID VOID 3.比较旧的资料 在网上查阅了些资料看到网上有大神已经实现过了。了解了大概的实现过程因为自己想做的效果还是跟大神的有差距的所以 还是自己动手封装成控件。 实现原理 这里引用 VALID VOID里面的话 输入驱动动画 自大约五年前触摸渐成主流起创造低延迟体验成为了一种普遍需求。使用手指或笔在屏幕上操作使得人眼获得了更直观的参照点来辨识操作的延迟和流畅性。为使操作流畅主流操作系统公司均将更多的操作移交至系统和 GPU 如 Chrome、IE执行。在 Windows 上这由 DirectManipulation 这一或多或少是针对于触摸构建的动画引擎实现的。它解决了关键的延迟挑战也就是如何自然地以展示从输入驱动到事件驱动过渡的动效。但另一方面它也几乎没有提供对定制惯性观感的支持就像福特 T 型车那样——“只要车是黑色的你可以把它涂成任意你喜欢的颜色”。2 ElementCompositionPreview.GetScrollViewerManipulationPropertySet 是让你能够把玩输入驱动动效的第一步。虽然它仍然没给你任何对内容滚动时观感进行控制的额外能力但它确实允许你对次级内容应用表达式动画。例如我们终于能完成我们的基础视差滚动代码 // 创建驱动视差滚动的表达式动画。
ExpressionAnimation parallaxAnimation compositor.CreateExpressionAnimation(MyForeground.Translation.Y / MyParallaxRatio);// 设置对前景对象的引用。
CompositionPropertySet MyPropertySet ElementCompositionPreview.GetScrollViewerManipulationPropertySet(MyScrollViewer);
parallaxAnimation.SetReferenceParameter(MyForeground, MyPropertySet);// 设置背景对象视差滚动的速度。 parallaxAnimation.SetScalarParameter(MyParallaxRatio, 0.5f); // 对背景对象开始视差动画。 backgroundVisual.StartAnimation(Offset.Y, parallaxAnimation); 使用这一技巧你能够实现多种优秀的效果视差滚动、粘性表头、自定义滚动条等等。唯一缺失的就是定制操作本身的观感…… 我讲一下我的理解使用过ScrollViewer 和Manipulation相关事件的童鞋都知道想要得到一些ScrollViewer 触摸的详情太难了 DirectManipulationStarted和DirectManipulationCompleted得到信息太少了而Manipulation其他的事件又需要设置ManipulationMode,这样全部的情况都要你自己来处理。当看到 ElementCompositionPreview.GetScrollViewerManipulationPropertySet(MyScrollViewer); 的时候你是不是感觉有点亲切。看上去你拿到了ScrollViewer 的一些Manipulation 的信息。。话说这里是最最坑爹了 MyForeground 其实是GetScrollViewerManipulationPropertySet返回的东东 但MyForeground.Translation.Y这是什么鬼东西。。Manipulation 的Translation??? 后来我在网上搜索了一下 但我查了下CompositionPropertySet 并没发现有相关Translation的属性啊 难道跟Manipulation事件里面的参数里面的Translation 是一样的吗这是我的推测。 网上都是这样用的但是没有文档。。除了Translation不知道还有其他属性能使用不。 暂时没有寻找到答案希望知道的童鞋可以留言万分感激。。。 上面这段的代码的意思就是说把Manipulation.Translation.Y 映射到backgroundVisual的Offset.Y上面。 也就是说你现在已经可以找到ScrollViewer滚动的时候一些有用的数值了。。值得说的是用鼠标滚动的时候 映射依然能生效。 这种映射是实时的是会有惯性效果的。 实现过程 因为要用到ScrollViewer所以我做了2种一种是刷新内容第一元素是ScrollViewer的一种不是ScrollViewer的。 如果刷新内容第一元素是ScrollViewer模板如下 ControlTemplate TargetTypelocal:PullToRefreshGrid1GridContentControl x:NameHeader Opacity0 VerticalAlignmentTop ContentTemplate{TemplateBinding HeaderTemplate} HorizontalContentAlignmentCenter VerticalContentAlignmentBottom /ContentPresenter x:NameContent ContentTemplate{TemplateBinding ContentTemplate} ContentTransitions{TemplateBinding ContentTransitions} Content{TemplateBinding Content} HorizontalAlignment{TemplateBinding HorizontalContentAlignment} Margin{TemplateBinding Padding} VerticalAlignment{TemplateBinding VerticalContentAlignment}//Grid/ControlTemplate 如果刷新内容第一元素不是ScrollViewer那么我为它添加了一个ScrollViewer ControlTemplate TargetTypelocal:PullToRefreshGridGridContentControl x:NameHeader Opacity0 VerticalAlignmentTop ContentTemplate{TemplateBinding HeaderTemplate} HorizontalContentAlignmentCenter VerticalContentAlignmentBottom /ScrollViewer x:NameScrollViewer VerticalSnapPointsTypeMandatorySingle VerticalSnapPointsAlignmentNearVerticalScrollModeEnabled VerticalScrollBarVisibilityHidden VerticalContentAlignmentStretch VerticalAlignmentStretchContentPresenter x:NameContent ContentTemplate{TemplateBinding ContentTemplate} ContentTransitions{TemplateBinding ContentTransitions} Content{TemplateBinding Content} HorizontalAlignment{TemplateBinding HorizontalContentAlignment} Margin{TemplateBinding Padding} VerticalAlignment{TemplateBinding VerticalContentAlignment}//ScrollViewer/Grid/ControlTemplate 当然其实第2种也是统用的我只是想减少控件的Child如果你不知道刷新内容里面有没有ScrollViewer那么用第2种就好了。有人会说为啥控件的名字这么奇怪。。那是因为我之前也写过PullToRefresh控件PullToRefreshControlPullToRefreshPanel我把名字都想完了。。实在想不出更好的了。。大家体谅下。。( ╯□╰ ) 好了重点就是拿到这个ScrollViewer 然后跟Header产生某种关系你懂的。。。 if (RefreshThreshold 0.0){RefreshThreshold headerHeight;}ratio RefreshThreshold / headerHeight;_offsetAnimation _compositor.CreateExpressionAnimation((min(max(0, ScrollManipulation.Translation.Y * ratio) / Divider, 1)) * MaxOffsetY);_offsetAnimation.SetScalarParameter(Divider, (float)RefreshThreshold);_offsetAnimation.SetScalarParameter(MaxOffsetY, (float)RefreshThreshold * 5 / 4);_offsetAnimation.SetScalarParameter(ratio, (float)ratio);_offsetAnimation.SetReferenceParameter(ScrollManipulation, _scrollerViewerManipulation);_opacityAnimation _compositor.CreateExpressionAnimation(min((max(0, ScrollManipulation.Translation.Y * ratio) / Divider), 1));_opacityAnimation.SetScalarParameter(Divider, (float)headerHeight);_opacityAnimation.SetScalarParameter(ratio, (float)1);_opacityAnimation.SetReferenceParameter(ScrollManipulation, _scrollerViewerManipulation);_headerVisual ElementCompositionPreview.GetElementVisual(_header);_contentVisual ElementCompositionPreview.GetElementVisual(_scrollViewerBorder);_headerVisual.StartAnimation(Offset.Y, _offsetAnimation);_headerVisual.StartAnimation(Opacity, _opacityAnimation);_contentVisual.StartAnimation(Offset.Y, _offsetAnimation); RefreshThreshold 是到达Release to refresh的一个点。。可以由用户设定默认是header的高度。 MaxOffsetY 是当到达RefreshThreshold之后我还能拖动的最大值这里设置为RefreshThreshold 的5/4。 (min(max(0, ScrollManipulation.Translation.Y * ratio) / Divider, 1)) * MaxOffsetY 我再来讲讲这个表达式的意思ScrollManipulation.Translation.Y 大家都已经知道了。是ScrollViewer进行Manipulation的Y值向下是正值向上时负值初始为0. 综合起来就是最大值为MaxOffsetY最小值为0.。这个速率是根据RefreshThreshold/headerHeight来的因为你会发现你向下drag scrollViewer的时候是有一定最大值的当RefreshThreshold比较大的时候你很难ScrollManipulation.Translation.Y值达到RefreshThreshold。 min((max(0, ScrollManipulation.Translation.Y * ratio) / Divider), 1) 这个也比较简单是给header的Opaicty做了一个动画。 _headerVisual.StartAnimation(Offset.Y, _offsetAnimation);_headerVisual.StartAnimation(Opacity, _opacityAnimation);_contentVisual.StartAnimation(Offset.Y, _offsetAnimation); 完成之后我们将动画开始就好了。这样在向下拖scrollviewer的时候scrollviewer和header就都会向下移动。 接下来我们需要监听 offset。 private void ScrollViewer_DirectManipulationStarted(object sender, object e){Windows.UI.Xaml.Media.CompositionTarget.Rendering OnCompositionTargetRendering;_refresh false;_header.Opacity 1;} 在开始manipulat的时候注册CompositionTarget.Rendering事件。在这个事件里面我们就可以实时获得offset的变化了。 private void OnCompositionTargetRendering(object sender, object e){_headerVisual.StopAnimation(Offset.Y);var offsetY _headerVisual.Offset.Y;IsReachThreshold offsetY RefreshThreshold;_scrollViewerBorder.Clip new RectangleGeometry() { Rect new Rect(0, 0, _content.Width, _content.Height - offsetY) };Debug.WriteLine(IsReachThreshold , _headerVisual.Offset.Y , RefreshThreshold);_headerVisual.StartAnimation(Offset.Y, _offsetAnimation);if (!_refresh){_refresh IsReachThreshold;}if (_refresh){_pulledDownTime DateTime.Now;}if (_refresh offsetY 1){_releaseTime DateTime.Now;}} 这里有点坑爹的是发现如果不StopAnimation那么Offset.Y永远都是0.。。很囧啊。。 最后我们在ScrollViewer_DirectManipulationCompleted事件里面处理是否要 触发PullToRefresh事件就ok了。 private void ScrollViewer_DirectManipulationCompleted(object sender, object e){Windows.UI.Xaml.Media.CompositionTarget.Rendering - OnCompositionTargetRendering;var cancelled (_releaseTime - _pulledDownTime) TimeSpan.FromMilliseconds(250);if (_refresh){_refresh false;if (cancelled){Debug.WriteLine(Refresh cancelled...);}else{Debug.WriteLine(Refresh now!!!);if (PullToRefresh ! null){_headerVisual.StopAnimation(Offset.Y);LastRefreshTime DateTime.Now;_headerVisual.StartAnimation(Offset.Y, _offsetAnimation);PullToRefresh(this, null);}}}} 最后说下Header模板HeaderTemplate是可以定义的。。它的DataContext是绑定到这个控件上的有用的属性有LastRefreshTimeIsReachThreshold等你可以用它们创造你属于你喜欢的Header样式。 通过本控件初步了解Composition API 的一些用法。下一篇我会讲讲一些更多的探索。。 开源有益源码GitHub地址。 问题 1.Visual 是继承IDisposable我们需要在什么时候Dispose 掉它呢 还是它自己管理的 我试过在unload的时候去dispose它。但是会出了Win32的异常。。官方sample里面对这个也讲的不清楚。 希望知道的童鞋能留言告知万分感谢。另外希望有对这个比较了解的童鞋能提供一些sample资料再次感谢。 补充使用条件 // Windows build 10240 and later. if (ApiInformation.IsApiContractPresent(Windows.Foundation.UniversalApiContract, 1)){...}// Windows build10586 and later.if (ApiInformation.IsApiContractPresent(Windows.Foundation.UniversalApiContract, 2)){...}// Windows build14332 and later.if (ApiInformation.IsApiContractPresent(Windows.Foundation.UniversalApiContract, 3)){...} 调试了下 1. Windows build14332 and later 123都为true。 2. Windows build10586 and later 12为true。 3. Windows build 10240 and later: 1为true。 因为10586之前的版本是不支持Composition API的。所以使用的时候记得判断 // Windows build10586 and later.if (ApiInformation.IsApiContractPresent(Windows.Foundation.UniversalApiContract, 2)){...} posted on 2018-03-12 13:05 NET未来之路 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cnblogs.com/lonelyxmas/p/8548729.html
