2018-2-13-win10-UWP-动画
title | author | date | CreateTime | categories |
---|---|---|---|---|
win10 UWP 动画
|
lindexi
|
2018-2-13 17:23:3 +0800
|
2018-2-13 17:23:3 +0800
|
Win10 UWP
|
本文告诉大家如何写同一个简单的动画。
动画入门
本文开始写一个简单的动画,只是移动矩形作为本文的例子。
在 UWP 移动元素的动画,可以使用 RenderTransform 移动,然后使用动画修改 RenderTransform 进行动画。关于元素移动,请看 win10 uwp 拖动控件
首先写一个简单的界面,只有一个矩形
<Grid x:Name="Bret">
<Rectangle x:Name="Rolernd" Width="100" Height="100" Fill="#FFa2a2a2"
HorizontalAlignment="Center" VerticalAlignment="Top"> </Rectangle>
</Grid>
然后在矩形加上 RenderTransform ,作为移动
<Grid x:Name="Bret">
<Rectangle x:Name="Rolernd" Width="100" Height="100" Fill="#FFa2a2a2"
HorizontalAlignment="Center" VerticalAlignment="Top">
<Rectangle.RenderTransform>
<TranslateTransform></TranslateTransform>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
但是因为动画不可以直接播放,先加个按钮,点击按钮时播放。
<Button Content="确定" Click="Button_OnClick"></Button>
现在界面看起来就是如下
<Grid x:Name="Bret">
<Rectangle x:Name="Rolernd" Width="100" Height="100" Fill="#FFa2a2a2"
HorizontalAlignment="Center" VerticalAlignment="Top">
<Rectangle.RenderTransform>
<TranslateTransform></TranslateTransform>
</Rectangle.RenderTransform>
</Rectangle>
</Grid> <Button Content="确定" Click="Button_OnClick"></Button>
开始写动画。
需要在 Resources 写动画,于是在页面写上动画,这里使用 DoubleAnimation ,注意需要 Storyboard.TargetName 说明动画的元素。因为 RenderTransform 动画有点难,于是我才写他。
<Page.Resources>
<Storyboard x:Key="Filiberto">
<DoubleAnimation Storyboard.TargetName="Rolernd" Storyboard.TargetProperty="(Rectangle.RenderTransform).(TranslateTransform.X)"
From="0" To="100" Duration="0:0:1"> </DoubleAnimation>
</Storyboard>
</Page.Resources>
其中的 From 就是修改数值从多少开始,To 就是到多少,后面的属性就是动画时间。写完动画就在按钮写播放,请看代码
private void Button_OnClick(object sender, RoutedEventArgs e)
{
var s = (Storyboard)Resources["Filiberto"];
s.Begin();
}
点击F5就是可以看到界面出现矩形,按下按钮就向右走
win10 uwp 使用动画修改 Grid column 的宽度
http://www.cnblogs.com/KeithWang/archive/2012/03/30/2425588.html
http://www.cnblogs.com/lin277541/p/4882000.html
http://www.cnblogs.com/lin277541/p/5059489.html
http://www.cnblogs.com/lin277541/p/5064899.html
http://www.cnblogs.com/lin277541/p/5068410.html
http://www.cnblogs.com/lin277541/p/5074697.html
http://www.cnblogs.com/lin277541/p/4881188.html
http://www.cnblogs.com/lin277541/p/4876140.html
最新文章
- ActionContext和ServletActionContext区别
- EntityFramework使用中的一些Bug
- ESB数据采集思路
- 高性能 Socket 组件 HP-Socket v3.2.1-RC4 公布
- Hdu3436-Queue-jumpers(伸展树)
- GridView+ZedGraph【转】
- 日新进用户200W+,解密《龙之谷》手游背后的压测故事
- Natas Wargame Level 17 Writeup(Time-based Blind SQL Injection)
- C++入门篇十
- EF三种编程方式图文详解
- MySQL数据查询子查询语句
- 560. Subarray Sum Equals K
- 树和二叉树->;相互转化
- [py]flask操作cookie&;django的seesion和cookie机制
- 一分钟理清Vue-cli 代码构建步骤。
- 微信小程序-帝国cms会员系统调用
- memcached +mysql+php 例子
- test20181018 B君的第一题
- MySQL自定义排序
- OpenStack 认证服务 KeyStone连接和用户管理(五)