【WPF动画】实现从鼠标点击中心开始的波纹扩散特效

效果图

实现原理

Storyboard组合动画实现

核心代码

1.获取点击区域，确定扩散圆形辐射范围等属性

var ellipse = new Ellipse()
{
    Width = 10,
    Height = 10,
    Fill = Brushes.LightBlue,
    Opacity = 1,
};

var point = e.GetPosition(Canvas);
var translateTransform = new TranslateTransform(point.X, point.Y);
ellipse.RenderTransform = translateTransform;
Canvas.Children.Add(ellipse);

2.x轴y轴上指定半径开始向外扩散

//波纹扩散动画特效
//宽度从10到200
var widthAnimation = new DoubleAnimation
{
    From = 10,
    To = 200,
    Duration = TimeSpan.FromSeconds(1.5),
    AutoReverse = false,
};
Storyboard.SetTargetProperty(widthAnimation, new PropertyPath(Ellipse.WidthProperty));
Storyboard.SetTarget(widthAnimation, ellipse);
//高度从10到200
var heightAnimation = new DoubleAnimation
{
    From = 10,
    To = 200,
    Duration = TimeSpan.FromSeconds(1.5),
    AutoReverse = false,
};
Storyboard.SetTargetProperty(heightAnimation, new PropertyPath(Ellipse.HeightProperty));
Storyboard.SetTarget(heightAnimation, ellipse);

3.以鼠标点击中心开始扩散

//波纹从鼠标点击中心开始扩散动画特效
//x轴上开始扩散
//ReSharper disable once PossibleLossOfFraction
var posX = translateTransform.X - (200 - 10) / 2;
var posXAnimation = new DoubleAnimation
{
    To = posX,
    Duration = TimeSpan.FromSeconds(1.5),
};
Storyboard.SetTargetProperty(posXAnimation, new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.X)"));
Storyboard.SetTarget(posXAnimation, ellipse);
//y轴上开始扩散
// ReSharper disable once PossibleLossOfFraction
var posY = translateTransform.Y - (200 - 10) / 2;
var posYAnimation = new DoubleAnimation
{
    To = posY,
    Duration = TimeSpan.FromSeconds(1.5),
};
Storyboard.SetTargetProperty(posYAnimation, new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.Y)"));
Storyboard.SetTarget(posYAnimation, ellipse);

4.扩散过程上加上透明度变化动画

//波纹扩散淡出动画特效
var opacityAnimation = new DoubleAnimation
{
    From = 1,
    To = 0,
    Duration = TimeSpan.FromSeconds(1.5),
};
Storyboard.SetTargetProperty(opacityAnimation, new PropertyPath(Ellipse.OpacityProperty));
Storyboard.SetTarget(opacityAnimation, ellipse);

5.添加到Storyboard

//添加动画组
var storyboard = new Storyboard();
storyboard.Children.Add(widthAnimation);
storyboard.Children.Add(heightAnimation);
storyboard.Children.Add(opacityAnimation);
storyboard.Children.Add(posXAnimation);
storyboard.Children.Add(posYAnimation);
storyboard.Completed += (o, args) =>
{
    Canvas.Children.Remove(ellipse);
    storyboard.Stop();
    storyboard.Children.Clear();
};
storyboard.Begin(this);