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 - 控件精确移动动画的更多相关文章
- WindowsXamlHost:在 WPF 中使用 UWP 控件库中的控件
在 WindowsXamlHost:在 WPF 中使用 UWP 的控件(Windows Community Toolkit) 一文中,我们说到了在 WPF 中引入简单的 UWP 控件以及相关的注意事项 ...
- 使用 Microsoft.UI.Xaml 解决 UWP 控件和对老版本 Windows 10 的兼容性问题
原文 使用 Microsoft.UI.Xaml 解决 UWP 控件和对老版本 Windows 10 的兼容性问题 虽然微软宣称 Windows 10 将是最后一个 Windows 版本,但由于年代跨越 ...
- Windows Community Toolkit 3.0 新功能 在WinForms 和 WPF 使用 UWP 控件
本文告诉大家一个令人震惊的消息,Windows Community Toolkit 有一个大更新,现在的版本是 3.0 .最大的提升就是 WinForm 和 WPF 程序可以使用部分 UWP 控件. ...
- TimePicker控件、帧动画、补间动画
1.TimePicker控件 最近感觉每个开发平台的控件基本都差不多,在Android中控件的事件和.net控件直接写事件有一定的区别,net事件可以直接界面进行事件的绑定哈.不过在Silverlig ...
- UWP控件与DataBind
在uwp开发中必不可少的一个环节就是各种通用的控件的开发,所以在闲暇时间汇总了一下在uwp开发中控件的几种常用写法,以及属性的几种绑定方式,有可能不全面,请大家多多包涵 :) 1.先从win10新增的 ...
- Unity NGUI 描点控件的位移动画
要让一个描点的控件动画移动到一个Position,能够用TweenPosition.可是这个仅仅能用在Position是固定的情况下.并且不能依据分辨率适配来进行移动. 以NGUI自带的 ...
- 自己定义控件三部曲之动画篇(七)——ObjectAnimator基本使用
前言: 假如生活欺骗了你, 不要悲伤,不要心急! 忧郁的日子里须要镇静: 相信吧,快乐的日子终将会来临! 心儿永远向往着未来: 如今却常是忧郁. 一切都是瞬息,一切都将会过去: 而那过去了的,就会成为 ...
- 自己定义控件三部曲之动画篇(十三)——实现ListView Item进入动画
前言:宝剑锋从磨砺出,梅花香自苦寒来 相关文章: <Android自己定义控件三部曲文章索引>: http://blog.csdn.net/harvic880925/article/det ...
- DevExpress Windows 10 v19.1新版亮点:UWP控件新功能全面解析
行业领先的.NET界面控件DevExpress 日前正式发布v19.1版本,本站将以连载的形式介绍各版本新增内容.在本系列文章中将为大家介绍DevExpress WPF v19.1中新增的一些控件及部 ...
随机推荐
- springboot下静态资源的处理(转)
在SpringBoot中有默认的静态资源文件相关配置,需要通过如下源码跟踪: WebMvcAutoConfiguration-->configureResourceChain(method)-- ...
- [Algorithms] Binary Search Algorithm using TypeScript
(binary search trees) which form the basis of modern databases and immutable data structures. Binary ...
- [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 ...
- programming-challenges Crypt Kicker (110204) 题解
我的解答,可是复杂度不是非常惬意,是一个指数级的复杂度.可是測试数据比較弱,还是ac了.在网上找了找.都是brute force的解法,不知道有没有更好的解法. 解答中犯了两个错误,第一个.map&l ...
- Swift 语言概览 -自己在Xcode6 动手写2-tableView
import UIKit class ViewController: UIViewController ,UITableViewDelegate, UITableViewDataSource { va ...
- 简要分析武汉一起好P2P平台的核心功能
写作背景 加入武汉一起好,正式工作40天了,对公司的核心业务有了更多的了解,想梳理下自己对于P2P平台的认识. 武汉一起好,自己运营的yiqihao.com,是用PHP实现的,同时也帮助若干P2P平台 ...
- USB 3.0规范中译本 附录
本文为CoryXie原创译文,转载及有任何问题请联系cory.xie#gmail.com. 附录A 符号编码 表A-1显示了对于数据字符字节到符号的编码. 表 A-2显示了对于特殊符号的编码. R ...
- [TypeScript] Understand lookup types in TypeScript
Lookup types, introduced in TypeScript 2.1, allow us to dynamically create types based on the proper ...
- RGCDQ(线段树+数论)
题意:求n和m之间的全部数的素因子个数的最大gcd值. 分析:这题好恶心.看着就是一颗线段树.但本题有一定的规律,我也是后来才发现,我还没推出这个规律.就不说了,就用纯线段树解答吧. 由于个点数都小于 ...
- Redis使用文档一
1 Redis概述 1.1前言 Redis是一个开源.支持网络.基于内存亦可持久化的日志型.键值对存储数据库.使用ANSI C编写.并提供多种语言的API. 其开发由VMware主持,是最流行的键值对 ...