原文:
UWP：使用Composition实现类似安卓的水波纹Ripple效果
先放效果图：
首先，建立一个RippleHelper.cs文件，然后建立以下附加属性：
IsFillEnable：是否扩大到整个控件
RippleDuration：持续时间
RippleRadius：不扩大到整个控件时的最大半径
RippleColor：波纹的颜色
public static bool GetIsFillEnable(DependencyObject obj) { return (bool)obj.GetValue(IsFillEnableProperty); } public static void SetIsFillEnable(DependencyObject obj, bool value) { obj.SetValue(IsFillEnableProperty, value); } public static readonly DependencyProperty IsFillEnableProperty = DependencyProperty.RegisterAttached("IsFillEnable", typeof(bool), typeof(RippleHelper), new PropertyMetadata(false)); public static TimeSpan GetRippleDuration(UIElement obj) { return (TimeSpan)obj.GetValue(RippleDurationProperty); } public static void SetRippleDuration(UIElement obj, TimeSpan value) { obj.SetValue(RippleDurationProperty, value); } public static readonly DependencyProperty RippleDurationProperty = DependencyProperty.RegisterAttached("RippleDuration", typeof(TimeSpan), typeof(RippleHelper), new PropertyMetadata(TimeSpan.FromMilliseconds(330))); public static double GetRippleRadius(UIElement obj) { return (double)obj.GetValue(RippleRadiusProperty); } public static void SetRippleRadius(UIElement obj, double value) { obj.SetValue(RippleRadiusProperty, value); } public static readonly DependencyProperty RippleRadiusProperty = DependencyProperty.RegisterAttached("RippleRadius", typeof(double), typeof(RippleHelper), new PropertyMetadata(100d)); public static Color GetRippleColor(UIElement obj) { return (Color)obj.GetValue(RippleColorProperty); } public static void SetRippleColor(UIElement obj, Color value) { obj.SetValue(RippleColorProperty, value); } public static readonly DependencyProperty RippleColorProperty = DependencyProperty.RegisterAttached("RippleColor", typeof(Color), typeof(RippleHelper), new PropertyMetadata(Colors.White));
接下来再写一个附加属性和一个enum
public static RippleHelperState GetRippleHelperState(UIElement obj) { return (RippleHelperState)obj.GetValue(RippleHelperStateProperty); } public static void SetRippleHelperState(UIElement obj, RippleHelperState value) { obj.SetValue(RippleHelperStateProperty, value); } public static readonly DependencyProperty RippleHelperStateProperty = DependencyProperty.RegisterAttached("RippleHelperState", typeof(RippleHelperState), typeof(RippleHelper), new PropertyMetadata(RippleHelperState.None, (s, e) => { if (e.NewValue != null && e.OldValue != e.NewValue) { var value = (RippleHelperState)e.NewValue; var oldvalue = (RippleHelperState)e.OldValue; if (s is UIElement ele) { switch (value) { case RippleHelperState.Pressed: { ele.RemoveHandler(UIElement.PointerReleasedEvent, pointerEventHandler); ele.AddHandler(UIElement.PointerPressedEvent, pointerEventHandler, true); } break; case RippleHelperState.Released: { ele.RemoveHandler(UIElement.PointerPressedEvent, pointerEventHandler); ele.AddHandler(UIElement.PointerReleasedEvent, pointerEventHandler, true); } break; case RippleHelperState.None: { ele.RemoveHandler(UIElement.PointerPressedEvent, pointerEventHandler); ele.RemoveHandler(UIElement.PointerReleasedEvent, pointerEventHandler); ElementCompositionPreview.SetElementChildVisual(ele, null); } break; } } } }));
在命名空间里建立enum
public enum RippleHelperState { Pressed, Released, None }
然后编写两个鼠标事件，对应RippleHelperState的Pressed和Released两个状态
private static void Ele_PointerPressed(object sender, PointerRoutedEventArgs e) { if (sender is UIElement ele) { var position = e.GetCurrentPoint(ele).Position.ToVector2(); StartRippleAnimation(ele, position); } } private static void Ele_PointerReleased(object sender, PointerRoutedEventArgs e) { if (sender is UIElement ele) { var position = e.GetCurrentPoint(ele).Position.ToVector2(); StartRippleAnimation(ele, position); } }
public static void StartRippleAnimation(UIElement ele, Vector2 position) { StartRippleAnimation(ele, position, GetRippleColor(ele), GetIsFillEnable(ele), GetRippleDuration(ele), GetRippleRadius(ele)); } public static void StartRippleAnimation(UIElement ele, Vector2 position, Color color, bool isFillEnable, TimeSpan duration, double radius = 0) { var hostVisual = ElementCompositionPreview.GetElementVisual(ele); var cVisual = ElementCompositionPreview.GetElementChildVisual(ele) as ContainerVisual; if (cVisual == null) { cVisual = compositor.CreateContainerVisual(); SizeBind.ClearParameter("hostVisual"); SizeBind.SetReferenceParameter("hostVisual", hostVisual); cVisual.StartAnimation("Size", SizeBind); cVisual.Clip = compositor.CreateInsetClip(); ElementCompositionPreview.SetElementChildVisual(ele, cVisual); } var sVisual = CreateSpriteVisual(ele, color); cVisual.Children.InsertAtTop(sVisual); sVisual.Offset = new Vector3(position.X, position.Y, 0f); if (isFillEnable) { var nWidth = Math.Max(Math.Max(position.X, ele.RenderSize.Width - position.X), Math.Max(position.Y, ele.RenderSize.Height - position.Y)); var r = Math.Sqrt(nWidth * nWidth * 2); var finalScale = (float)r / 45f; PropSet.InsertScalar("ScaleValue", finalScale); ScaleAnimation.Duration = TimeSpan.FromMilliseconds(400); OpacityAnimation.Duration = TimeSpan.FromMilliseconds(430); } else { if (radius == 100d) { PropSet.InsertScalar("ScaleValue", 2f); } else { PropSet.InsertScalar("ScaleValue", (float)GetRippleRadius(ele) / 45f); } } ScaleAnimation.Duration = duration; OpacityAnimation.Duration = duration; var batch = compositor.GetCommitBatch(CompositionBatchTypes.Animation); batch.Completed += (s1, e1) => { OnRippleComplated(ele); cVisual.Children.Remove(sVisual); }; sVisual.StartAnimationGroup(RippleAnimationGroup); }
动画完成的事件：
public static event EventHandler RippleComplated; private static void OnRippleComplated(UIElement ele) { RippleComplated?.Invoke(ele, EventArgs.Empty); }
最后在类的开头编写Composition的动画和资源：
private static readonly PointerEventHandler pointerEventHandler = new PointerEventHandler(Ele_PointerReleased); private static Compositor compositor => Window.Current.Compositor; private static ExpressionAnimation _SizeBind; private static CompositionEasingFunction _EaseOut; private static ScalarKeyFrameAnimation _OpacityAnimation; private static Vector3KeyFrameAnimation _ScaleAnimation; private static CompositionAnimationGroup _RippleAnimationGroup; private static CompositionPropertySet _PropSet; private static CompositionBrush _Mask; private static ExpressionAnimation SizeBind { get { if (_SizeBind == null) _SizeBind = compositor.CreateExpressionAnimation("hostVisual.Size"); return _SizeBind; } } private static CompositionEasingFunction EaseOut { get { if (_EaseOut == null) _EaseOut = compositor.CreateCubicBezierEasingFunction(new Vector2(0f, 0f), new Vector2(0.9f, 1f)); return _EaseOut; } } private static ScalarKeyFrameAnimation OpacityAnimation { get { if (_OpacityAnimation == null) { _OpacityAnimation = compositor.CreateScalarKeyFrameAnimation(); _OpacityAnimation.InsertKeyFrame(0f, 1f, EaseOut); _OpacityAnimation.InsertKeyFrame(1f, 0f, EaseOut); _OpacityAnimation.Duration = TimeSpan.FromMilliseconds(350); _OpacityAnimation.Target = "Opacity"; } return _OpacityAnimation; } } private static Vector3KeyFrameAnimation ScaleAnimation { get { if (_ScaleAnimation == null) { _ScaleAnimation = compositor.CreateVector3KeyFrameAnimation(); _ScaleAnimation.InsertKeyFrame(0f, new Vector3(0f, 0f, 1f), EaseOut); _ScaleAnimation.InsertExpressionKeyFrame(0.8f, "Vector3(propSet.ScaleValue,propSet.ScaleValue,1f)", EaseOut); _ScaleAnimation.InsertExpressionKeyFrame(1f, "Vector3(propSet.ScaleValue,propSet.ScaleValue,1f)", EaseOut); _ScaleAnimation.SetReferenceParameter("propSet", PropSet); _ScaleAnimation.Duration = TimeSpan.FromMilliseconds(320); _ScaleAnimation.Target = "Scale"; } return _ScaleAnimation; } } private static CompositionAnimationGroup RippleAnimationGroup { get { if (_RippleAnimationGroup == null) { _RippleAnimationGroup = compositor.CreateAnimationGroup(); _RippleAnimationGroup.Add(OpacityAnimation); _RippleAnimationGroup.Add(ScaleAnimation); } return _RippleAnimationGroup; } } private static CompositionPropertySet PropSet { get { if (_PropSet == null) { _PropSet = compositor.CreatePropertySet(); PropSet.InsertScalar("ScaleValue", 2f); } return _PropSet; } } private static CompositionBrush Mask { get { if (_Mask == null) { var surface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///MaterialLibs/Assets/RippleMask.png"), new Windows.Foundation.Size(100d, 100d)); _Mask = compositor.CreateSurfaceBrush(surface); } return _Mask; } }
最后在Mask读取的Uri的对应位置放上如下的图片文件：
【
】
完整代码已经开源在Github：https://github.com/cnbluefire/MaterialLibs
受个人技术所限，没有想到怎么做到圆角或者不规则图形，所以目前只支持直角矩形控件
