uwp之图片旋转动画实现
参考网址: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
相关文章
- canvas系列教程07-canvas动画基础1
- JS框架_(JQuery.js)点赞按钮动画
- 图片碎片化mask动画
- 用js触发CSS3-transition过渡动画
- 定制controller转场动画
- Unity3D骨骼动画的分解(CleanData.Ani详解)
- Css 动画的回调
- 动画---图形图像与动画(三)Animation效果的XML实现
- SAP UI5 Fiori flower动画效果的实现明细
- uni——抽卡动画(animation、按钮禁用、样式添加等)
- AutoJs学习-Canvas实现立方体动画
- CSS3 实现 60 FPS (60帧)动画效果
- android ViewFlipper实现垂直滚动动画
- 【QML Model-View】ListView-动画+上移下移(三)
- Qt状态机实现动画
- CSharpGL(50)使用Assimp加载骨骼动画
- Android 实现个性的ViewPager切换动画 实战PageTransformer(兼容Android3.0下面)
- Android开发 从底部弹出动画(选择菜单)