uwp - 做一个相对炫酷的动画按钮/按钮动画
看腻了系统自带的button animation何不尝试下自定义一个较为炫酷的动画顺便提升用户体验。效果图:
动画分为几个部分,分别是:内圆从中心放大(1)并同时渐隐(2),外圆从中心放大(3)并同时渐隐(4),按钮整体从中心缩小放大(5),非常简单对吧,代码也是。
为了方便调用,我用一个自定义用户控件来做,图标是用iconfont,这样可以在任何地方使用,首先新建【AnimationButton.xaml】用户控件,前台代码将自动生成的部分替换:
<UserControl.Resources>
<Storyboard x:Name="Storyboard">
<!--整体缩小动画-->
<DoubleAnimation From="0.5" To="1" Duration="00:00:0.5"
Storyboard.TargetName="AnGridScaleTransform3"
Storyboard.TargetProperty="ScaleY">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseInOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation From="0.5" To="1" Duration="00:00:0.5"
Storyboard.TargetName="AnGridScaleTransform3"
Storyboard.TargetProperty="ScaleX">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseInOut"
/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation> <!--1-->
<DoubleAnimation From="1" To="0" Duration="00:00:0.5"
Storyboard.TargetName="Angrid"
Storyboard.TargetProperty="Opacity">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseInOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation> <DoubleAnimation From="0" To="2" Duration="00:00:0.5"
Storyboard.TargetName="AnGridScaleTransform"
Storyboard.TargetProperty="ScaleY">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseInOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation From="0" To="2" Duration="00:00:0.5"
Storyboard.TargetName="AnGridScaleTransform"
Storyboard.TargetProperty="ScaleX">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseInOut"
/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<!--2-->
<DoubleAnimation From="1" To="0" Duration="00:00:0.5"
Storyboard.TargetName="Angrid2"
Storyboard.TargetProperty="Opacity">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseInOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation> <DoubleAnimation From="0" To="1" Duration="00:00:0.5"
Storyboard.TargetName="AnGridScaleTransform2"
Storyboard.TargetProperty="ScaleY">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseInOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation From="0" To="1" Duration="00:00:0.5"
Storyboard.TargetName="AnGridScaleTransform2"
Storyboard.TargetProperty="ScaleX">
<DoubleAnimation.EasingFunction>
<PowerEase EasingMode="EaseInOut"
/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="ABBg" Tapped="TsTapped">
<Grid.RenderTransform>
<ScaleTransform x:Name="AnGridScaleTransform3" CenterX="25" CenterY="25"/>
</Grid.RenderTransform>
<!--<Rectangle Fill="Red" x:Name="anm" Opacity="0" RadiusX="100" RadiusY="100">
<Rectangle.RenderTransform>
<ScaleTransform x:Name="AnGridScaleTransform" CenterX="25" CenterY="25"/>
</Rectangle.RenderTransform>
</Rectangle>-->
<Grid Canvas.ZIndex="2" x:Name="Angrid" Opacity="1" Width="auto" HorizontalAlignment="Center" VerticalAlignment="Center" CornerRadius="{Binding ElementName=ab,Path=ActualWidth}" Background="{StaticResource ABColorA}">
<Grid.RenderTransform>
<ScaleTransform x:Name="AnGridScaleTransform" CenterX="25" CenterY="25"/>
</Grid.RenderTransform>
</Grid>
<Grid Canvas.ZIndex="2" x:Name="Angrid2" Opacity="1" Width="auto" HorizontalAlignment="Center" VerticalAlignment="Center" CornerRadius="{Binding ElementName=ab,Path=ActualWidth}" Background="{StaticResource ABColorB}">
<Grid.RenderTransform>
<ScaleTransform x:Name="AnGridScaleTransform2" CenterX="25" CenterY="25"/>
</Grid.RenderTransform>
</Grid>
<TextBlock x:Name="textblock_icon" Text="{Binding ElementName=ab,Path=Icon}" Style="{StaticResource system_iconfont}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
要注意修改的部分1是
{Binding ElementName=ab,Path=Icon}这里绑定了一个文本数据,就是iconfont图标u码,用你喜欢的方式改就行了,还有2是要改
{StaticResource ABColorA}
{StaticResource ABColorB}
引用了资源字典,就是内圆颜色和外圆的颜色而已。
后台代码就一个处理事件:
分别负责设置动画GRID的宽高和中心点
private void TsTapped(object sender, TappedRoutedEventArgs e)
{
Angrid.Opacity = 1; Angrid.Width = this.ActualWidth;
Angrid.Height = this.ActualHeight; Angrid.CornerRadius = new CornerRadius(this.ActualWidth);
AnGridScaleTransform.CenterX = this.ActualWidth / 2;
AnGridScaleTransform.CenterY = this.ActualHeight / 2; Angrid2.Opacity = 1; Angrid2.Width = this.ActualWidth;
Angrid2.Height = this.ActualHeight; Angrid2.CornerRadius = new CornerRadius(this.ActualWidth);
AnGridScaleTransform2.CenterX = this.ActualWidth / 2;
AnGridScaleTransform2.CenterY = this.ActualHeight / 2; AnGridScaleTransform3.CenterX = this.ActualWidth / 2;
AnGridScaleTransform3.CenterY = this.ActualHeight / 2;
if (Animation == 0)
{ }
else
{ }
//启动动画
Storyboard.Begin();
}
this.close();
uwp - 做一个相对炫酷的动画按钮/按钮动画的更多相关文章
- 手把手带你做一个超炫酷loading成功动画view Android自定义view
写在前面: 本篇可能是手把手自定义view系列最后一篇了,实际上我也是一周前才开始真正接触自定义view,通过这一周的练习,基本上已经熟练自定义view,能够应对一般的view需要,那么就以本篇来结尾 ...
- jQuery.smoove — jQuery和CSS3炫酷滚动页面内容元素动画特效插件
插件介绍: jQuery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转. ...
- WebGIS简单实现一个区域炫酷的3D立体地图效果
1.别人的效果 作为一个GIS专业的,做一个高大上的GIS系统一直是我的梦想,虽然至今为止还没有做出一个理想中的系统,但是偶尔看看别人做的,学习下别人的技术还是很有必要的.眼睛是最容易误导我们的,有时 ...
- 做一个可复用的 echarts-vue 组件(延迟动画加载)
在 vue 项目使用 echarts 的场景中,以下三点不容忽视:1. 可视化的数据往往是异步加载的:2. 若一个页面存在大量的图表( 尤其当存在关系图和地图时 ),往往会导致该页面的渲染速度很慢并可 ...
- 【动画消消乐|CSS】086.炫酷水波浪Loading过渡动画
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...
- 如何用纯 CSS 创作炫酷的同心矩形旋转动画
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教 ...
- 前端每日实战:17# 视频演示如何用纯 CSS 创作炫酷的同心矩形旋转动画
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教程 此视频 ...
- 17.纯 CSS 创作炫酷的同心矩形旋转动画
原文地址:https://segmentfault.com/a/1190000014807564 感想: 这个特效不难,但是这想法可能想不到,哈哈,怎么又废了. HTML代码: <div cla ...
- Swift - 炫酷放射弹出按钮菜单(改造自AwesomeMenu)
这个是一个第三方按钮菜单组件,原版是使用Objective-C编写的名为AwesomeMenu的组件,地址是:https://github.com/levey/AwesomeMenu 这里改造成了Sw ...
随机推荐
- ORACLE RMAN备份及还原 RMAN能够进行增量备份:数据库,表空间,数据文件
ORACLE RMAN备份及还原 RMAN能够进行增量备份:数据库.表空间.数据文件 仅仅有使用过的block能够被备份成backup set 表空间与数据文件相应关系:dba_data_file ...
- 【EasyUi】页面设计必学之Layout
接触EasyUi也快一年了.非常多时候都把重心放在实现功能方面.要显示大量数据了就用DataGrid,要实现分页效果了就想着Tabs,如此等等,再接下来就是考虑CSS.js怎样让这个功能实现的更好. ...
- 飘逸的python - property及实现lazy property
@property有什么用呢?表面看来,就是将一个方法用属性的方式来訪问. 上代码,代码最清晰了. class Circle(object): def __init__(self, radius): ...
- 该扩展程序未列在 Chrome 网上应用店中,并可能是在您不知情的情况下添加的
"chrome扩展程序无法启用"的解决方案 http://www.cnplugins.com/tool/installpluginfix.html win10家庭版没有组策略怎么办? https:// ...
- 【Heritrix基础教程之3】Heritrix的基本架构 分类: H3_NUTCH 2014-06-01 16:56 1267人阅读 评论(0) 收藏
Heritrix可分为四大模块: 1.控制器CrawlController 2.待处理的uri列表 Frontier 3.线程池 ToeThread 4.各个步骤的处理器 (1)Pre-fetch ...
- MySQL搜索:WHERE
MySQL指定搜索条件进行搜索能够使用where条件. 在SELECT语句中.数据依据WHERE子语句中指定的条件进行过滤,WHERE子语句在表名之后给出. product表例如以下: a 查找价格等 ...
- UUIDUtils工具类
原理是根据自身的操作系统和电脑硬件生成的一个32位的随机字符串,如果是一台电脑使用的话,一年不会重复,经过java之后貌似编程了36位,多了4个"-",下面是代码实现: impor ...
- Redis Service
https://raw.githubusercontent.com/MSOpenTech/redis/3.0/Windows%20Service%20Documentation.md
- 【hdu 3389】Game
Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submission(s) ...
- 【9602】&&【b402】合并果子
Time Limit: 1 second Memory Limit: 50 MB [问题描述] 在一个果园里,多多已经将所有的果子打了下来,而且按果子的不同种类分成了不同的堆.多多决定把所有的果子合成 ...