我正在尝试以用户控件的形式创建3..2..1倒计时。像this这样的东西。我的想法是在彼此的顶部创建两个矩形,一个光和一个黑色,并且有一个径向圆作为暗矩形的剪切器。径向圆将具有动画的角度属性,因此它将转向。
我找到了一个径向圆的实现,并在我的圆圈的RenderedGeometry属性上绑定了矩形的Clip属性。结果如下:
红色笔画是我的剪刀的形状。这似乎是剪辑的一个奇怪的行为,但我有点理解它,但我想知道是否有办法绕过 事实上,我的剪切对象似乎以一种奇怪的方式使用了RenderedGeometry。
编辑1 :我正在寻找的效果http://www.youtube.com/watch?v=9FPHTo5V2BQ
答案 0 :(得分:2)
下面显示的简单派生Shape控件绘制倒计时矩形。您必须设置其Fill
(可能还有Stroke
),Width
,Height
和Angle
属性,并且可以从0设置Angle
动画至360。
public class CountdownRect : Shape
{
static CountdownRect()
{
WidthProperty.OverrideMetadata(typeof(CountdownRect),
new FrameworkPropertyMetadata((o, e) => ((CountdownRect)o).UpdateGeometry()));
HeightProperty.OverrideMetadata(typeof(CountdownRect),
new FrameworkPropertyMetadata((o, e) => ((CountdownRect)o).UpdateGeometry()));
StrokeLineJoinProperty.OverrideMetadata(typeof(CountdownRect),
new FrameworkPropertyMetadata(PenLineJoin.Round));
}
public static readonly DependencyProperty AngleProperty =
DependencyProperty.Register("Angle", typeof(double), typeof(CountdownRect),
new FrameworkPropertyMetadata((o, e) => ((CountdownRect)o).UpdateGeometry()));
public double Angle
{
get { return (double)GetValue(AngleProperty); }
set { SetValue(AngleProperty, value); }
}
private readonly StreamGeometry geometry = new StreamGeometry();
protected override Geometry DefiningGeometry
{
get { return geometry; }
}
private void UpdateGeometry()
{
if (!double.IsNaN(Width) && !double.IsNaN(Height))
{
var angle = ((Angle % 360d) + 360d) % 360d;
var margin = StrokeThickness / 2d;
var p0 = new Point(margin, margin);
var p1 = new Point(Width - margin, margin);
var p2 = new Point(Width - margin, Height - margin);
var p3 = new Point(margin, Height - margin);
using (var context = geometry.Open())
{
if (angle == 0d)
{
context.BeginFigure(p0, true, true);
context.LineTo(p1, true, false);
context.LineTo(p2, true, false);
context.LineTo(p3, true, false);
}
else
{
var x = p2.X / 2d;
var y = p2.Y / 2d;
var a = Math.Atan2(x, y) / Math.PI * 180d;
var t = Math.Tan(angle * Math.PI / 180d);
context.BeginFigure(new Point(x, y), true, true);
if (angle < a)
{
context.LineTo(new Point(x + y * t, p0.Y), true, false);
context.LineTo(p1, true, false);
context.LineTo(p2, true, false);
context.LineTo(p3, true, false);
context.LineTo(p0, true, false);
}
else if (angle < 180d - a)
{
context.LineTo(new Point(p2.X, y - x / t), true, false);
context.LineTo(p2, true, false);
context.LineTo(p3, true, false);
context.LineTo(p0, true, false);
}
else if (angle < 180d + a)
{
context.LineTo(new Point(x - y * t, p2.Y), true, false);
context.LineTo(p3, true, false);
context.LineTo(p0, true, false);
}
else if (angle < 360d - a)
{
context.LineTo(new Point(p0.X, y + x / t), true, false);
context.LineTo(p0, true, false);
}
else
{
context.LineTo(new Point(x + y * t, p0.Y), true, false);
}
context.LineTo(new Point(x, p0.Y), true, false);
}
}
}
}
}
答案 1 :(得分:2)
您可以使用剪裁ArcSegment
中的PathGeometry
剪裁矩形,并为ArcSegment
的端点(Point
)设置动画。
可以使用PointAnimationUsingPath
动画为端点设置动画,使用相同的ArcSegment
作为路径。以下是基于Charlez Petzold在这里的出色答案的建议:Drawing pie slices
<UserControl ... >
<UserControl.Resources>
<Point x:Key="SweepCenter" X="100" Y="100" />
<Size x:Key="SweepRadius" Width="130" Height="130" />
<!-- Start sweeping at twelve o'clock.. -->
<Point x:Key="SweepStart" X="100" Y="-30" />
<!-- ..and keep sweeping clockwise until we're (almost) back at the start point: -->
<Point x:Key="SweepEnd" X="99.99" Y="-30" />
<Storyboard x:Key="Sweeper" RepeatBehavior="Forever" AutoReverse="False" >
<PointAnimationUsingPath Storyboard.TargetName="arc"
Storyboard.TargetProperty="Point"
Duration="0:0:5">
<PointAnimationUsingPath.PathGeometry>
<PathGeometry>
<PathFigure StartPoint="{StaticResource SweepStart}">
<ArcSegment Size="{StaticResource SweepRadius}"
Point="{StaticResource SweepEnd}"
SweepDirection="Clockwise"
IsLargeArc="True" />
</PathFigure>
</PathGeometry>
</PointAnimationUsingPath.PathGeometry>
</PointAnimationUsingPath>
<BooleanAnimationUsingKeyFrames Storyboard.TargetName="arc"
Storyboard.TargetProperty="IsLargeArc" >
<DiscreteBooleanKeyFrame KeyTime="0:0:2.5" Value="True" />
<DiscreteBooleanKeyFrame KeyTime="0:0:5" Value="False" />
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<Grid Width="200" Height="200" >
<Rectangle Fill="Black" />
<Rectangle Fill="Gray" >
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard Storyboard="{StaticResource Sweeper}" />
</EventTrigger>
</Rectangle.Triggers>
<Rectangle.Clip>
<PathGeometry>
<PathFigure StartPoint="{StaticResource SweepCenter}"
IsClosed="True" >
<LineSegment Point="{StaticResource SweepStart}" />
<ArcSegment x:Name="arc"
Size="{StaticResource SweepRadius}"
Point="{StaticResource SweepStart}"
SweepDirection="Clockwise" />
</PathFigure>
</PathGeometry>
</Rectangle.Clip>
</Rectangle>
</Grid>
</UserControl>