旋转的太极包含了这个世界的秘密，无论用啥录屏软件或者视频制作软件，都不好做出我期望的效果，于是我自己用代码写了一次，可以自己控制所有的逻辑。本文告诉大家如何使用 WPF 写一个旋转的太极
先在 XAML 绘制一个太极
在 XAML 创建一个放入到 Viewbox 的 Grid 作为画布，放在 Viewbox 是方便缩放，里面的坐标可以使用绝对值
代码语言：javascript复制 <Viewbox Stretch="Uniform">
<Grid Width="100" Height="100">
</Grid>
</Viewbox>在 Grid 先画一个半圆，白色的半圆，如下面代码
代码语言：javascript复制 <Ellipse Fill="White">
<Ellipse.Clip>
<RectangleGeometry Rect="0,0,50,100"></RectangleGeometry>
</Ellipse.Clip>
</Ellipse>画半圆的方法就是画一个圆，然后裁剪一半
用相同的方法，画出黑色的底色
代码语言：javascript复制 <Ellipse Fill="Black">
<Ellipse.Clip>
<RectangleGeometry Rect="50,0,100,100"></RectangleGeometry>
</Ellipse.Clip>
</Ellipse>接着再添加其他的圆
代码语言：javascript复制 <Viewbox Stretch="Uniform">
<Grid Width="100" Height="100">
<Ellipse Fill="White">
<Ellipse.Clip>
<RectangleGeometry Rect="0,0,50,100"></RectangleGeometry>
</Ellipse.Clip>
</Ellipse>
<Ellipse Fill="Black">
<Ellipse.Clip>
<RectangleGeometry Rect="50,0,100,100"></RectangleGeometry>
</Ellipse.Clip>
</Ellipse>
<Ellipse Width="50" Height="50" VerticalAlignment="Top"
Fill="White">
<Ellipse.Clip>
<RectangleGeometry Rect="0,0,50,100"></RectangleGeometry>
</Ellipse.Clip>
</Ellipse>
<Ellipse Width="10" Height="10" Margin="20" VerticalAlignment="Top"
Fill="Black">
<Ellipse.Clip>
<RectangleGeometry Rect="0,0,50,100"></RectangleGeometry>
</Ellipse.Clip>
</Ellipse>
<Ellipse Width="50" Height="50" VerticalAlignment="Bottom"
Fill="Black">
<Ellipse.Clip>
<RectangleGeometry Rect="0,0,50,100"></RectangleGeometry>
</Ellipse.Clip>
</Ellipse>
<Ellipse Width="10" Height="10" Margin="20" VerticalAlignment="Bottom"
Fill="White">
<Ellipse.Clip>
<RectangleGeometry Rect="0,0,50,100"></RectangleGeometry>
</Ellipse.Clip>
</Ellipse>
</Grid>
</Viewbox>
给 Grid 加上旋转，代码如下
代码语言：javascript复制 <Grid.RenderTransform>
<RotateTransform x:Name="GridRotateTransform" CenterX="50" CenterY="50"></RotateTransform>
</Grid.RenderTransform>再加上三个按钮，作为开始和加速等
代码语言：javascript复制 <StackPanel Grid.Row="1" Orientation="Horizontal">
<Button x:Name="StartButton" Margin="10,10,10,10" Content="开始旋转"
Click="StartButton_Click"/>
<RepeatButton x:Name="SpeedUpButton" Margin="10,10,10,10" Content="加速旋转"
Click="SpeedUpButton_Click"/>
<RepeatButton x:Name="SpeedDownButton" Margin="10,10,10,10" Content="减速旋转"
Click="SpeedDownButton_Click"/>
</StackPanel>后台代码如下，加上依赖属性 Speed 作为速度
代码语言：javascript复制 public double Speed
{
get { return (double)GetValue(SpeedProperty); }
set { SetValue(SpeedProperty, value); }
}
public static readonly DependencyProperty SpeedProperty =
DependencyProperty.Register("Speed", typeof(double), typeof(MainWindow), new PropertyMetadata(0.0));对应按钮的实现逻辑如下
代码语言：javascript复制 private async void StartButton_Click(object sender, RoutedEventArgs e)
{
while (true)
{
Speed = Math.Max(Speed, 1);
var rotateValue = 0.1;
var delayTime = 1000.0;
delayTime = delayTime / Speed - Speed;
delayTime = Math.Max(delayTime, 5);
if(Speed > 10)
{
rotateValue = Speed / 10;
}
GridRotateTransform.Angle = rotateValue;
await Task.Delay(TimeSpan.FromMilliseconds(delayTime));
}
}
private void SpeedUpButton_Click(object sender, RoutedEventArgs e)
{
Speed ;
}
private void SpeedDownButton_Click(object sender, RoutedEventArgs e)
{
Speed--;
}让代码跑起来，不断加速
效果请看 WPF 旋转太极_哔哩哔哩_bilibili
本文以上的代码放在github 和 gitee 欢迎访问
可以通过如下方式获取本文的源代码，先创建一个空文件夹，接着使用命令行 cd 命令进入此空文件夹，在命令行里面输入以下代码，即可获取到本文的代码
代码语言：javascript复制git init
git remote add origin https://gitee.com/lindexi/lindexi_gd.git
git pull origin 15c60a5534f8c716c056ba181ac42c233c42256e以上使用的是 gitee 的源，如果 gitee 不能访问，请替换为 github 的源
代码语言：javascript复制git remote remove origin
git remote add origin https://github.com/lindexi/lindexi_gd.git获取代码之后，进入 CowhahiloRallkemnuke 文件夹
