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

http://www.cnblogs.com/mantgh/p/4437892.html

http://www.datiancun.net/thread-1586-1-1.html

2018-2-13-win10-UWP-动画的更多相关文章

  1. win10 UWP 动画

    原文:win10 UWP 动画 本文告诉大家如何写同一个简单的动画. 动画入门 本文开始写一个简单的动画,只是移动矩形作为本文的例子. 在 UWP 移动元素的动画,可以使用 RenderTransfo ...

  2. win10 uwp 使用 Microsoft.Graph 发送邮件

    在 2018 年 10 月 13 号参加了 张队长 的 Office 365 训练营 学习如何开发 Office 365 插件和 OAuth 2.0 开发,于是我就使用 UWP 尝试使用 Micros ...

  3. Win10 UWP开发系列:实现Master/Detail布局

    在开发XX新闻的过程中,UI部分使用了Master/Detail(大纲/细节)布局样式.Win10系统中的邮件App就是这种样式,左侧一个列表,右侧是详情页面.关于这种 样式的说明可参看MSDN文档: ...

  4. win10 uwp 拖动控件

    我们会使用控件拖动,可以让我们做出好看的动画,那么我们如何移动控件,我将会告诉大家多个方法.其中第一个是最差的,最后的才是我希望大神你去用. Margin 移动 我们可以使用Margin移动,但这是w ...

  5. win10 uwp 渲染原理 DirectComposition 渲染

    本文来告诉大家一个新的技术DirectComposition,在 win7 之后(实际上是 vista),微软正在考虑一个新的渲染机制 在 Windows Vista 就引入了一个服务,桌面窗口管理器 ...

  6. win10 uwp 如何开始写 uwp 程序

    本文告诉大家如何创建一个 UWP 程序. 这是一系列的 uwp 入门博客,所以写的很简单 本文来告诉大家如何创建一个简单的程序 安装 VisualStudio 在开始写 UWP 需要安装 Visual ...

  7. win10 uwp 萤火虫效果

    原文:win10 uwp 萤火虫效果 本文在Nukepayload2指导下,使用他的思想用C#写出来. 本文告诉大家,如何使用 win2d 做出萤火虫效果. 安装 win2d 安装win2d的方法请使 ...

  8. Win10 UWP版《芒果TV》v2.4.0直播超女,芒果台综艺一网打尽

    Win10 UWP版<芒果TV>直播超女,芒果台综艺一网打尽 Win10版UWP<芒果TV>自2015年9月登录商店以来,一直在持续更新,积极改进,拥有芒果台视频的独家点播和直 ...

  9. win10 uwp 手把手教你使用 asp dotnet core 做 cs 程序

    本文是一个非常简单的博客,让大家知道如何使用 asp dot net core 做后台,使用 UWP 或 WPF 等做前台. 本文因为没有什么业务,也不想做管理系统,所以看到起来是很简单. Visua ...

  10. win10 uwp win2d CanvasVirtualControl 与 CanvasAnimatedControl

    本文来告诉大家 CanvasVirtualControl ,在什么时候使用这个控件. 在之前的入门教程win10 uwp win2d 入门 看这一篇就够了我直接用的是CanvasControl,实际上 ...

随机推荐

  1. spark复习总结03

    1.DataFrame的创建方式 1.1 通过加载外部文件创建 //通过sqlContext读取json文件创建DataFrame DataFrame dataFrame=sqlContext.rea ...

  2. HashMap源码解析笔记

    首先简单介绍下HashMap: 1.HashMap有三种数据结构:数组,链表,红黑树. 2.HashMap是非线程安全的 3.HashMap存储的内容是键值对(key-value)映射,key.val ...

  3. CG-CTF re部分wp

    将cgctf re部分移到这Re1,hello re没什么可说的,拖进ida,发现几个大数字,用热键r一下,将数字变为字符串,由于是小端,将字符串倒过来就是flag 了2,readasm2int ma ...

  4. 解决HDFS小文件带来的计算问题

    hive优化 一.小文件简述 1.1. HDFS上什么是小文件? HDFS存储文件时的最小单元叫做Block,Hadoop1.x时期Block大小为64MB,Hadoop2.x时期Block大小为12 ...

  5. springMVC框架入门案例

    控制器: package cn.mepu.controller; import org.springframework.stereotype.Controller; import org.spring ...

  6. hbuilder模拟器端口

    模拟器 | 端口 夜神安卓模拟器夜神安卓模拟器     62001 逍遥安卓模拟器逍遥安卓模拟器     21503 BlueStacks(蓝叠安卓模拟器)BlueStacks(蓝叠安卓模拟器)    ...

  7. Apache Hadoop集群离线安装部署(三)——Hbase安装

    Apache Hadoop集群离线安装部署(一)——Hadoop(HDFS.YARN.MR)安装:http://www.cnblogs.com/pojishou/p/6366542.html Apac ...

  8. Codeforces 1163D DP + KMP

    题意:给你一个字符串s,以及两个字符串s1,s2.s中有些位置是*,意思是可以随便填字母,s的子串中如果出现一次s1,就加一分,如果出现一次s2,就减一分.问这个字符串s最多可以得多少分? 思路: 设 ...

  9. 前端学习(十)初识js(笔记)

    js事件(公有属性) onclick=""  当点击...时! onmouseover="" 当鼠标移入...时!onmouseout="" ...

  10. 友善之臂arm9、 smart210监控版本,烧写系统

    第一次接触嵌入式开发,就拿210练手了,第一天折腾,先烧系统. 准备:板子,8GB或者以上的SD卡,网上找下minitools以及系统小红帽,Android或者ubuntu,debian都可以.[ub ...