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!