源项目地址:https://github.com/Microsoft/...
以下是把示例转换为简要说明,同时给出实际运行效果及关键代码剖析:
ConcentricRingsDemo同心环动画效果图
如下:
描述:
- 在一个点附近中不断涌现出不同颜色的圆圈,圆圈不断变大后消散。
只有简单的代码,那么具体思路如何实现呢?
一种是利用帧数驱动(未设置)。
另一种是利用动画循环,本例是使用动画代码设定随机生成源,在中心点、尺寸、透明度上进行动画循环。
- 帧数驱动代码
var frameTimer = new DispatcherTimer();
frameTimer.Tick += OnFrame;
frameTimer.Interval = TimeSpan.FromSeconds(1.0/60.0);
frameTimer.Start();
_lastTick = Environment.TickCount;
_rand = new Random(GetHashCode());
- 利用循环方法:
CreateCircles();for循环中
具体步骤如下:
生成圆,设定随机颜色的轮廓画笔,
设定偏移量,控件添加进画布
var e = new Ellipse();
var alpha = (byte) _rand.Next(96, 192);
var colorIndex = _rand.Next(4);
e.Stroke =
new SolidColorBrush(Color.FromArgb(alpha, colors[colorIndex].R, colors[colorIndex].G,
colors[colorIndex].B));
e.StrokeThickness = _rand.Next(1, 4);
e.Width = 0.0;
e.Height = 0.0;
double offsetX = 16 - _rand.Next(32);
double offsetY = 16 - _rand.Next(32);
MainCanvas.Children.Add(e);
设定圆在画布中的位置
e.SetValue(Canvas.LeftProperty, centerX + offsetX);
e.SetValue(Canvas.TopProperty, centerY + offsetY);
设定动画的不同继续时间和间隔时间
设定中心点动画
var duration = 6.0 + 10.0*_rand.NextDouble();
var delay = 16.0*_rand.NextDouble();
var offsetTransform = new TranslateTransform();
var offsetXAnimation = new DoubleAnimation(0.0, -256.0, new Duration(TimeSpan.FromSeconds(duration)))
{
RepeatBehavior = RepeatBehavior.Forever,
BeginTime = TimeSpan.FromSeconds(delay)
};
offsetTransform.BeginAnimation(TranslateTransform.XProperty, offsetXAnimation);
offsetTransform.BeginAnimation(TranslateTransform.YProperty, offsetXAnimation);
设置到圆的移动呈现属性
e.RenderTransform = offsetTransform;
设定尺寸动画,并和尺寸属性一起作为圆的动画方法参数
var sizeAnimation = new DoubleAnimation(0.0, 512.0, new Duration(TimeSpan.FromSeconds(duration)))
{
RepeatBehavior = RepeatBehavior.Forever,
BeginTime = TimeSpan.FromSeconds(delay)
};
e.BeginAnimation(WidthProperty, sizeAnimation);
e.BeginAnimation(HeightProperty, sizeAnimation);
设定透明度动画,并和透明度属性作为圆的动画方法参数
var opacityAnimation = new DoubleAnimation(duration - 1.0, 0.0,
new Duration(TimeSpan.FromSeconds(duration)))
{
BeginTime = TimeSpan.FromSeconds(delay),
RepeatBehavior = RepeatBehavior.Forever
};
e.BeginAnimation(OpacityProperty, opacityAnimation);
以上。。。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。