WP7进阶技巧 自定义Toast 提示动画效果
2012-03-22 12:36
471 查看
Coding4Fun.Phone.Toolkit 这个库大家应该比较熟悉了吧,里面有一个ToastPrompt提供了本地Toast 方式提示,非常实用。可以参考我这篇文章WP7应用开发笔记(16) 本地Toast 提示。
但是ToastPrompt的效果比较简单,如果需要扩展就比较麻烦,下面我来说明一下如何模拟新浪微博类似的Toast。
做之前首先看看SL的模拟效果吧:
无法观看,请下载直接下载示例 http://files.cnblogs.com/kiminozo/ToastPromptDemo.rar
http://blogs.claritycon.com/kevinmarshall/2010/10/13/wp7-page-transitions-sample/
DialogService的源代码请去Blog下载
比较重要的成员是
AnimationType 动画类型
Child 容器内的用于控件
IsBackKeyOverride 是否覆盖后退键
Overlay 覆盖颜色,null的情况不会影响触控操作。
Opened、Closed事件
Show()、Hide() 显示、隐藏
请去http://coding4fun.codeplex.com/releases/view/79749下载。
添加效果最重要的是增加AnimationType
默认只有2种Slide,Coding4Fun代码里面增加了2种SlideHorizontal
枚举如下
为了实现我需要的效果,我添加了一种名叫Vetical的动画类型。
为这个类型添加2个Storyboard
找到Show()的代码,在switch中添加
Hide()同理
然后找到Coding4Fun的ToastPrompt类,修改Show()里面的
如下:
当然也可以使用面向对象的知识多态化ToastPrompt,这里就不详细描述了。
但是ToastPrompt的效果比较简单,如果需要扩展就比较麻烦,下面我来说明一下如何模拟新浪微博类似的Toast。
做之前首先看看SL的模拟效果吧:
无法观看,请下载直接下载示例 http://files.cnblogs.com/kiminozo/ToastPromptDemo.rar
了解DialogService
查看Coding4Fun的源代码,里面主要使用了DialogService类来实现的http://blogs.claritycon.com/kevinmarshall/2010/10/13/wp7-page-transitions-sample/
DialogService的源代码请去Blog下载
比较重要的成员是
AnimationType 动画类型
Child 容器内的用于控件
IsBackKeyOverride 是否覆盖后退键
Overlay 覆盖颜色,null的情况不会影响触控操作。
Opened、Closed事件
Show()、Hide() 显示、隐藏
修改DialogService
需要自定义效果 需要修改Coding4Fun的源代码,请去http://coding4fun.codeplex.com/releases/view/79749下载。
添加效果最重要的是增加AnimationType
默认只有2种Slide,Coding4Fun代码里面增加了2种SlideHorizontal
枚举如下
public enum AnimationTypes { Slide, SlideHorizontal, Swivel, SwivelHorizontal, Vetical//new }
为了实现我需要的效果,我添加了一种名叫Vetical的动画类型。
为这个类型添加2个Storyboard
private const string VeticalInStoryboard = @"<Storyboard xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=""(UIElement.RenderTransform).(TranslateTransform.Y)""> <EasingDoubleKeyFrame KeyTime=""0"" Value=""-50""/> <EasingDoubleKeyFrame KeyTime=""0:0:2"" Value=""0""> <EasingDoubleKeyFrame.EasingFunction>\ <ExponentialEase EasingMode=""EaseInOut"" Exponent=""6""/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimation Storyboard.TargetProperty=""(UIElement.Opacity)"" From=""0"" To=""1"" Duration=""0:0:2"" Storyboard.TargetName=""LayoutRoot""> <DoubleAnimation.EasingFunction> <ExponentialEase EasingMode=""EaseOut"" Exponent=""6""/> </DoubleAnimation.EasingFunction> </DoubleAnimation> </Storyboard>"; private const string VeticalOutStoryboard = @"<Storyboard xmlns=""http://schemas.microsoft.com/winfx/2006/xaml/presentation""> <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty=""(UIElement.RenderTransform).(TranslateTransform.Y)""> <EasingDoubleKeyFrame KeyTime=""0"" Value=""0""/> <EasingDoubleKeyFrame KeyTime=""0:0:1"" Value=""-50""> <EasingDoubleKeyFrame.EasingFunction>\ <ExponentialEase EasingMode=""EaseInOut"" Exponent=""6""/> </EasingDoubleKeyFrame.EasingFunction> </EasingDoubleKeyFrame> </DoubleAnimationUsingKeyFrames> <DoubleAnimation Storyboard.TargetProperty=""(UIElement.Opacity)"" From=""1"" To=""0"" Duration=""0:0:1"" Storyboard.TargetName=""LayoutRoot""> <DoubleAnimation.EasingFunction> <ExponentialEase EasingMode=""EaseIn"" Exponent=""6""/> </DoubleAnimation.EasingFunction> </DoubleAnimation> </Storyboard>";
找到Show()的代码,在switch中添加
case AnimationTypes.Vetical: storyboard = XamlReader.Load(VeticalInStoryboard) as Storyboard; _overlay.RenderTransform = new TranslateTransform(); break;
Hide()同理
然后找到Coding4Fun的ToastPrompt类,修改Show()里面的
AnimationType = DialogService.AnimationTypes.Vetical,
如下:
public void Show() { .. dialogService = new DialogService { AnimationType = DialogService.AnimationTypes.Vetical, Child = this, IsBackKeyOverride = true }; ... }
当然也可以使用面向对象的知识多态化ToastPrompt,这里就不详细描述了。
相关文章推荐
- Android进阶学习-自定义动画(电视关闭效果)
- Android进阶——自定义View之继承系统控件实现自带删除按钮动画效果和软键盘自动悬浮于文本框下方
- android 自定义带增长动画和点击弹窗提示效果的柱状图
- Android自定义带增长动画和点击弹窗提示效果的柱状图DEMO
- 自定义仿 ios 加载框和自定义 Toast 带动画效果
- Android 自定义View动画效果进阶
- Android自定义View之popupwindow进阶封装:高仿ios “item动画弹出”效果的popupwindow。
- android 自定义Dialog提示+动画效果(完整版)
- 微信小程序开发常用技巧(7)——实现一个类似于Android toast效果动画
- 微信小程序自定义弹窗showModel模态框、Toast提示框、actionSheet底部动画弹窗(多API调用)
- android自定义TextView实现安卓手机开机android文字Log的动画效果
- Android Toast实现提示效果
- Flutter进阶—实现动画效果(七)
- Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)
- jQuery实现信息提示框(带有圆角框与动画)效果
- Android动画效果之自定义ViewGroup添加布局动画
- 自定义简单的按钮点击动画效果
- 自定义不同颜色点赞图片被点击之后动画缩放效果
- 自定义Toast的显示效果
- Android动画机制与使用技巧(二)布局动画、插值器、自定义动画