製作一個類似翻書的動畫效果
我們在使用APP的時候，難免會看到一些特殊的特效，像是翻書的時候，圖片會有傾斜的效果。這樣能夠使整個APP使用起來更加的生動、活潑。下面就教大家如何製作一個簡單的圖片傾斜動畫。下面的專有名詞宣告會略多一點，如有不懂的請在下方留言或者上網google都有諸多解答。
.Xaml 檔
<Canvas >
<Canvas.Resources>
<Storyboard x:Name="Storyboard1" >
<PointAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Rectangle1" Storyboard.TargetProperty="(UIElement.RenderTransformOrigin)" >
<EasingPointKeyFrame KeyTime="00:00:00" Value="1,0.5" />
<EasingPointKeyFrame KeyTime="00:00:01" Value="1,0.5" />
</PointAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Rectangle1" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(SkewTransform.AngleY)" >
<EasingDoubleKeyFrame KeyTime="00:00:01" Value="-17" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Canvas.Resources>
<Rectangle Width="200" Height="269" Canvas.Left="20" Canvas.Top="10"
Fill="Blue" Stroke="Black" StrokeThickness="4" x:Name="Rectangle1" >
<Rectangle.RenderTransform>
<TransformGroup>
<SkewTransform/>
</TransformGroup>
</Rectangle.RenderTransform>
</Rectangle>
</Canvas>
1.首先先建立一個Canvas類別，以便定義一個區域來明確使用該區域的座標
2.在該區域放置storyboard，該故事版用來設定其動畫的屬性
3.在storyboard中使用PointAnimationUsingKeyFrame屬性來設定動畫的特性、開始還有結束時間
4.在PointAnimationUsingKeyFrame中再插入EasingPointKeyFrame 屬性。目的在於在PointKeyFrame之間進行插補Point在前一個主要畫面格和它自己的值，以線性方式與產生它的輸出值的加/減速函式的值。可讓您簡化建立關聯的類別函式與PointAnimationUsingKeyFrames主要畫面格動畫。
5主要畫面格動畫的目標值由定義其KeyFrames屬性，其中包含一堆DoubleKeyFrame物件。每個DoubleKeyFrame定義它自己的目標與動畫的一段Value和KeyTime。 當動畫執行時，它複寫從一個索引鍵的值在指定的下一個關鍵時間。
6.下面就開始繪製Rectangle 矩形，設定他的長、寬'、顏色相關屬性。
7.最後在設計一個按鈕來開啟動畫
Xaml.cs檔
private void start_Click(object sender, RoutedEventArgs e)
{
//動畫開始
Storyboard1.Begin();
}
操作畫面:
由於有動畫效果的關係，故下面以一開始跟結束畫面來顯示其操作的結果
剛開始載入 動畫結束畫面
Summary
如果將這樣的動畫程式設計在原本的程式中，就可以位原本的程式加上一點生動的感覺，也可以使使用者感覺起來會更加的流暢。
