Windows8Windows Phone 做一个图片效果

这个效果类似于Windows Phone自带的那个相册用汉字来形容就是“一张图片在某个区域内来回移动”。

这个效果在很多地方看过例如“网易云阅读”“鲜果联播” 图片不再是那种静态的了,非常cool。

coding4fun 上有源代码大致的原理就是一个Clip+一个位移动画。

想一想就是一个Panel容器里面嵌套一个图片然后用位移动画移动它既可，于是有了如下代码

 <Canvas Height="375" Width="500"><Image x:Name="dream" Stretch="UniformToFill" Source="images/dream.jpg"></Image>
</Canvas>

很不幸。。会出现一种问题，就是图片会把Canvas撑大，原本WPF有一个“ClipToBound”的属性可以把内部元素超出的部分裁剪掉,但是貌似Windows Store App xaml方式的布局没有提供这个属性。coding4fun 上实现了这个效果他写了个依赖属性的东西超级好用。在他的“Coding4Fun.Toolkit.Controls.Binding.FrameworkElementBinding"里面原理就是用了Clip 然后是RectangleGeometry，那么..就有了下面的代码

 <Canvas Height="375" Width="500"><Canvas.Clip><RectangleGeometry Rect="0 0 500 375" /></Canvas.Clip><Image x:Name="dream" Stretch="UniformToFill" Source="images/dream.jpg"><Image.RenderTransform><CompositeTransform  /></Image.RenderTransform></Image></Canvas>

然后就是一个动画了计算当前图片显示的高度和宽带得到需要做的位移值，为了响应动画添加一个事件触发器就在Grid Load的时候启动这个动画

   <Grid.Triggers><EventTrigger RoutedEvent="Grid.Loaded" ><BeginStoryboard><StoryboardAutoReverse="True" RepeatBehavior="Forever"><DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"Storyboard.TargetName="dream"><SplineDoubleKeyFrame KeyTime="0:0:1"/><SplineDoubleKeyFrame KeyTime="0:0:16" Value="-263"/><SplineDoubleKeyFrame KeyTime="0:0:17" Value="-263" /></DoubleAnimationUsingKeyFrames></Storyboard></BeginStoryboard><BeginStoryboard><StoryboardAutoReverse="True" RepeatBehavior="Forever"><DoubleAnimationUsingKeyFrames BeginTime="0:0:17"Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"Storyboard.TargetName="dream"><SplineDoubleKeyFrame KeyTime="0:0:1"/><SplineDoubleKeyFrame KeyTime="0:0:16" Value="-350"/><SplineDoubleKeyFrame KeyTime="0:0:17" Value="-350" /></DoubleAnimationUsingKeyFrames></Storyboard></BeginStoryboard></EventTrigger></Grid.Triggers>

wow~上面的动画实现的时在1-16秒内水平和垂直同时位移，然后停顿一秒后移回去,不断的这一重复下去。

目测就是这样了，这个可以用代码来实现的感兴趣的用代码封装下否则每次都要要写个触发器来启动这个动画感觉“味道很坏"的..

然后在弄个全屏的这种效果全屏的简单至少不用加Clip

 <StackPanel Margin="0 -300 0 0"><Image x:Name="dream" Stretch="UniformToFill" Source="images/desktop.jpg"><Image.RenderTransform><CompositeTransform  /></Image.RenderTransform></Image></StackPanel>

动画效果和上面的基本类似

 <Grid.Triggers><EventTrigger RoutedEvent="Grid.Loaded" ><BeginStoryboard><StoryboardAutoReverse="True" RepeatBehavior="Forever"><DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"Storyboard.TargetName="dream"><SplineDoubleKeyFrame KeyTime="0:0:1"/><SplineDoubleKeyFrame KeyTime="0:0:5" Value="300"/><SplineDoubleKeyFrame KeyTime="0:0:6" Value="300" /></DoubleAnimationUsingKeyFrames></Storyboard></BeginStoryboard></EventTrigger></Grid.Triggers>

但是要注意图片”drem“ 要给它的高度多增加300否则就会出现一种”图片移出屏幕“的现象

用代码或者Bind 把drem的宽度增加300

dream.Height = Window.Current.Bounds.Height + 300;

ok 效果就是这样了

然后附上

Windows Phone交流群"157153754"

Windows8交流群 "243302359"

Happy Coding!

转载于:https://www.cnblogs.com/beyondblog/archive/2013/03/30/2990806.html

Windows8Windows Phone 做一个图片效果相关推荐

媳妇儿喜欢玩某音中的动漫特效，那我就用python做一个图片转化软件。
最近某音上的动漫特效特别火,很多人都玩着动漫肖像,我媳妇儿也不例外.看着她这么喜欢这个特效,我决定做一个图片处理工具,这样媳妇儿的动漫头像就有着落了. 编码为了快速实现我们的目标,我们就不自己写图片 ...
卡通化图片python实现代码_媳妇儿喜欢玩某音中的动漫特效，那我就用python做一个图片转化软件。...
最近某音上的动漫特效特别火,很多人都玩着动漫肖像,我媳妇儿也不例外.看着她这么喜欢这个特效,我决定做一个图片处理工具,这样媳妇儿的动漫头像就有着落了. 编码为了快速实现我们的目标,我们就不 ...
【4003】通过html+css做一个图片列表的静态页面。
[4003]通过html+css做一个图片列表的静态页面. 学习目标: [ 1]学习前端第三天掌握 html与css(基础选择器,有.无序列表相关)入门知识,梳理今天的学习知识点: [ 2]通过已学知 ...
简单的做一个图片上传预览（web前端）
在做web项目很多的时候图片都是避免不了的,所以操作图片就成了一个相对比较棘手的问题,其实也不是说很麻烦,只是说上传然后直接预览的过程很恶心,今天简单的做一个处理. 效果预览: 代码: <!DO ...
【PR】如何做一个图片动画出场
先往轨道拉一个图片对图片参数进行修改把图片选择,然后点击运动.在把图片上的圈进行调动即可设置图片出场动画先把图片放置视频的开头然后选择位置,这个时候发现图片没了那么我们在选中一次运动,这个 ...
用python做一个图片验证码
看一下做出来的验证码长啥样验证码分析 1. 有很多点 2. 有很多线条 3. 有字母,有数字需要用到的模块: 1. random 2. Pillow (python3中使用pillow) 安装p ...
Java做一个动画效果音量调节_设计与实现一个 ISoundable 接口，该接口具有发声功能、还能调节音量大小...
[java]代码库package experiment6; public interface ISoundable { public void increaseVolume(); public voi ...
js：使用canvas做一个图片标注功能
canvas相关库的选择名称 star(2021.3) 文档备注 fabricjs 18.2k http://fabricjs.com/ -------- konva 6k https://kon ...
使用 JavaScript 和 CSS 做一个图片转 PDF 的转换器

Windows8Windows Phone 做一个图片效果

Windows8Windows Phone 做一个图片效果相关推荐

最新文章

热门文章