Windows8&Windows 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>
                    <Storyboard
                        AutoReverse="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>
                    <Storyboard
                        AutoReverse="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>
                    <Storyboard
                        AutoReverse="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!