参考网址:https://blog.csdn.net/hzw2945/article/details/72467820
https://www.cnblogs.com/changbaishan/p/3307942.html
先放效果图。类似网易云音乐播放音乐时封面旋转效果
两种实现方式,分别是前端(xaml)和后台(c#代码)实现,右边的图片旋转是在xaml实现,左边的长方形(其实是个Button控件)旋转是在c#代码里面实现
xaml代码如下
<Grid x:Name="LayoutRoot" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
</Grid.Resources>
<!--Ellipse是绘制一个椭圆形-->
<Ellipse x:Name="ellipse" Width="200" Height="200" RenderTransformOrigin="0.5,0.5">
<Ellipse.RenderTransform>
<CompositeTransform/>
</Ellipse.RenderTransform>
<Ellipse.Resources>
<!--Storyboard是一个动画容器-->
<Storyboard x:Name="EllStoryboard" RepeatBehavior="Forever">
<DoubleAnimation Duration="0:0:20" To="360" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.Rotation)" Storyboard.TargetName="ellipse" d:IsOptimized="True"/>
</Storyboard>
</Ellipse.Resources>
<!--这是用一张图片来填充这个椭圆形-->
<Ellipse.Fill>
<ImageBrush x:Name="picture" ImageSource="Assets\30.jpg" />
</Ellipse.Fill>
</Ellipse>
<Button x:Name="button" Width="50" Height="30" Margin="10">
</Button>
</Grid>
当完成了以上的xaml的时候,右边的旋转动画已经做好,只要在.cs文件里面相应的地方让动画开始或者暂停或者结束
//图片旋转动画开始
EllStoryboard.Begin();
//图片旋转动画暂停
EllStoryboard.Pause();
//图片旋转动画结束
EllStoryboard.Stop();
在.cs文件里面用c#代码来实现Button的旋转
private void Rotation()
{
button.RenderTransformOrigin = new Point(0.5, 0.5);
CompositeTransform c = new CompositeTransform();
button.RenderTransform = c;
Storyboard storyboard = new Storyboard();
DoubleAnimation animation = new DoubleAnimation
{
From = 0,
To = 360,
Duration = new Duration(TimeSpan.FromSeconds(20)),
};
Storyboard.SetTarget(animation, button);
Storyboard.SetTargetName(animation, "button");
Storyboard.SetTargetProperty(animation, "(UIElement.RenderTransform).(CompositeTransform.Rotation)");
storyboard.Children.Add(animation);
}
其实C#代码就是用代码把xaml里的属性加进去而已
————————————————
版权声明:本文为CSDN博主「hzw2945」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/hzw2945/article/details/72467820