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：

受个人技术所限，没有想到怎么做到圆角或者不规则图形，所以目前只支持直角矩形控件