效果图
![在这里插入图片描述](https://img-blog.csdnimg.cn/57abd6b713224add84a7b3f61e86f303.gif#pic_center)
实现原理
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);