ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

uwp之图片旋转动画实现

2021-07-21 22:02:20  阅读:253  来源: 互联网

标签:动画 Storyboard xaml uwp 旋转 animation new


参考网址: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

标签:动画,Storyboard,xaml,uwp,旋转,animation,new
来源: https://www.cnblogs.com/bruce1992/p/15041777.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有