原文:uwp - 控件精确移动动画

先看效果图:

一共有8个GRID,黄色的负责移动,其他7个负责定位。新建一个页面page,替换默认代码:

 <UserControl.Resources>
<!--#region 动画-->
<Storyboard x:Name="Storyboard">
<!--整体缩小动画-->
<DoubleAnimation x:Name="dh" From="" To="" Duration="00:00:0.2"
Storyboard.TargetName="y"
Storyboard.TargetProperty="X">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseInOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
<!--#endregion-->
</UserControl.Resources>
<Grid>
<FlipView>
<FlipViewItem Width="">
<Grid>
<Grid Canvas.ZIndex="" Opacity="0.8" x:Name="w" Background="Yellow" Width="{Binding ElementName=aa,Path=ActualWidth}" HorizontalAlignment="Left">
<Grid.RenderTransform>
<TranslateTransform x:Name="y"></TranslateTransform>
</Grid.RenderTransform>
</Grid> <Grid>
<Grid.ColumnDefinitions> <ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<Grid x:Name="aa" Grid.Column="" Background="Black" Tapped="aa_Tapped">
<Grid.RenderTransform>
<TranslateTransform x:Name="b"></TranslateTransform>
</Grid.RenderTransform>
</Grid>
<Grid x:Name="bb" Grid.Column="" Background="White" Tapped="bb_Tapped">
<Grid.RenderTransform>
<TranslateTransform x:Name="bbb"></TranslateTransform>
</Grid.RenderTransform>
</Grid>
<Grid x:Name="cc" Grid.Column="" Background="Green" Tapped="cc_Tapped">
<Grid.RenderTransform>
<TranslateTransform x:Name="ccc"></TranslateTransform>
</Grid.RenderTransform>
</Grid>
<Grid x:Name="dd" Grid.Column="" Background="Azure" Tapped="dd_Tapped">
<Grid.RenderTransform>
<TranslateTransform x:Name="ddd"></TranslateTransform>
</Grid.RenderTransform>
</Grid>
<Grid x:Name="ee" Grid.Column="" Background="Red" Tapped="ee_Tapped">
<Grid.RenderTransform>
<TranslateTransform x:Name="eee"></TranslateTransform>
</Grid.RenderTransform>
</Grid>
<Grid x:Name="ff" Grid.Column="" Background="Blue" Tapped="ff_Tapped">
<Grid.RenderTransform>
<TranslateTransform x:Name="fff"></TranslateTransform>
</Grid.RenderTransform>
</Grid>
<Grid x:Name="gg" Grid.Column="" Background="DarkRed" Tapped="gg_Tapped">
<Grid.RenderTransform>
<TranslateTransform x:Name="ggg"></TranslateTransform>
</Grid.RenderTransform>
</Grid>
</Grid> </Grid>
</FlipViewItem>
</FlipView>
</Grid>

我这是用用户控件做的,所以把UserControl.Resources改成Page.Resources就行了。

后台代码:

  public void to(int i)
{ dh.From = getX(w); double to = ;
switch (i)
{
case :
to = getX(aa);
break;
case :
to = getX(bb);
break;
case :
to = getX(cc);
break;
case :
to = getX(dd);
break;
case :
to = getX(ee);
break;
case :
to = getX(ff);
break;
case :
to = getX(gg);
break; } dh.To = to;
}
public double getX(Grid g)
{ GeneralTransform gf = g.TransformToVisual(this); Point p = gf.TransformPoint(new Point(, )); return p.X; } private void gg_Tapped(object sender, TappedRoutedEventArgs e)
{
to();
Storyboard.Begin();
} private void ff_Tapped(object sender, TappedRoutedEventArgs e)
{
to();
Storyboard.Begin();
} private void ee_Tapped(object sender, TappedRoutedEventArgs e)
{
to();
Storyboard.Begin();
} private void dd_Tapped(object sender, TappedRoutedEventArgs e)
{
to();
Storyboard.Begin();
} private void cc_Tapped(object sender, TappedRoutedEventArgs e)
{
to();
Storyboard.Begin();
} private void bb_Tapped(object sender, TappedRoutedEventArgs e)
{
to();
Storyboard.Begin();
} private void aa_Tapped(object sender, TappedRoutedEventArgs e)
{
to();
Storyboard.Begin();
}

收尾。

好吧小结一下,重点在布局和获取控件的相对坐标,通过表格定义同等宽度7列,从而达到不管在什么设备上多能平均分布,然后获取7个坐标进行位置移动就可以了,可以改变缓动函数以及参数实现一些有意思的动画,比如弹簧啊什么的,还可以叠加更多动画让它看上去不那么单调。

this.close();

uwp - 控件精确移动动画的更多相关文章

  1. WindowsXamlHost:在 WPF 中使用 UWP 控件库中的控件

    在 WindowsXamlHost:在 WPF 中使用 UWP 的控件(Windows Community Toolkit) 一文中,我们说到了在 WPF 中引入简单的 UWP 控件以及相关的注意事项 ...

  2. 使用 Microsoft.UI.Xaml 解决 UWP 控件和对老版本 Windows 10 的兼容性问题

    原文 使用 Microsoft.UI.Xaml 解决 UWP 控件和对老版本 Windows 10 的兼容性问题 虽然微软宣称 Windows 10 将是最后一个 Windows 版本,但由于年代跨越 ...

  3. Windows Community Toolkit 3.0 新功能 在WinForms 和 WPF 使用 UWP 控件

    本文告诉大家一个令人震惊的消息,Windows Community Toolkit 有一个大更新,现在的版本是 3.0 .最大的提升就是 WinForm 和 WPF 程序可以使用部分 UWP 控件. ...

  4. TimePicker控件、帧动画、补间动画

    1.TimePicker控件 最近感觉每个开发平台的控件基本都差不多,在Android中控件的事件和.net控件直接写事件有一定的区别,net事件可以直接界面进行事件的绑定哈.不过在Silverlig ...

  5. UWP控件与DataBind

    在uwp开发中必不可少的一个环节就是各种通用的控件的开发,所以在闲暇时间汇总了一下在uwp开发中控件的几种常用写法,以及属性的几种绑定方式,有可能不全面,请大家多多包涵 :) 1.先从win10新增的 ...

  6. Unity NGUI 描点控件的位移动画

           要让一个描点的控件动画移动到一个Position,能够用TweenPosition.可是这个仅仅能用在Position是固定的情况下.并且不能依据分辨率适配来进行移动. 以NGUI自带的 ...

  7. 自己定义控件三部曲之动画篇(七)——ObjectAnimator基本使用

    前言: 假如生活欺骗了你, 不要悲伤,不要心急! 忧郁的日子里须要镇静: 相信吧,快乐的日子终将会来临! 心儿永远向往着未来: 如今却常是忧郁. 一切都是瞬息,一切都将会过去: 而那过去了的,就会成为 ...

  8. 自己定义控件三部曲之动画篇(十三)——实现ListView Item进入动画

    前言:宝剑锋从磨砺出,梅花香自苦寒来 相关文章: <Android自己定义控件三部曲文章索引>: http://blog.csdn.net/harvic880925/article/det ...

  9. DevExpress Windows 10 v19.1新版亮点:UWP控件新功能全面解析

    行业领先的.NET界面控件DevExpress 日前正式发布v19.1版本,本站将以连载的形式介绍各版本新增内容.在本系列文章中将为大家介绍DevExpress WPF v19.1中新增的一些控件及部 ...

随机推荐

  1. springboot下静态资源的处理(转)

    在SpringBoot中有默认的静态资源文件相关配置,需要通过如下源码跟踪: WebMvcAutoConfiguration-->configureResourceChain(method)-- ...

  2. [Algorithms] Binary Search Algorithm using TypeScript

    (binary search trees) which form the basis of modern databases and immutable data structures. Binary ...

  3. [RxJS] Subject: an Observable and Observer hybrid

    This lesson teaches you how a Subject is simply a hybrid of Observable and Observer which can act as ...

  4. programming-challenges Crypt Kicker (110204) 题解

    我的解答,可是复杂度不是非常惬意,是一个指数级的复杂度.可是測试数据比較弱,还是ac了.在网上找了找.都是brute force的解法,不知道有没有更好的解法. 解答中犯了两个错误,第一个.map&l ...

  5. Swift 语言概览 -自己在Xcode6 动手写2-tableView

    import UIKit class ViewController: UIViewController ,UITableViewDelegate, UITableViewDataSource { va ...

  6. 简要分析武汉一起好P2P平台的核心功能

    写作背景 加入武汉一起好,正式工作40天了,对公司的核心业务有了更多的了解,想梳理下自己对于P2P平台的认识. 武汉一起好,自己运营的yiqihao.com,是用PHP实现的,同时也帮助若干P2P平台 ...

  7. USB 3.0规范中译本 附录

    本文为CoryXie原创译文,转载及有任何问题请联系cory.xie#gmail.com. 附录A 符号编码   表A-1显示了对于数据字符字节到符号的编码. 表 A-2显示了对于特殊符号的编码. R ...

  8. [TypeScript] Understand lookup types in TypeScript

    Lookup types, introduced in TypeScript 2.1, allow us to dynamically create types based on the proper ...

  9. RGCDQ(线段树+数论)

    题意:求n和m之间的全部数的素因子个数的最大gcd值. 分析:这题好恶心.看着就是一颗线段树.但本题有一定的规律,我也是后来才发现,我还没推出这个规律.就不说了,就用纯线段树解答吧. 由于个点数都小于 ...

  10. Redis使用文档一

    1 Redis概述 1.1前言 Redis是一个开源.支持网络.基于内存亦可持久化的日志型.键值对存储数据库.使用ANSI C编写.并提供多种语言的API. 其开发由VMware主持,是最流行的键值对 ...