[Windows 8 App]動畫效果--------變形特效(平移變形)

2014-01-06

平移變形元素TranslateTransform包含X、Y兩個屬性

分別用來描述以某元素的所在位置為原點

也就是說當前元素所在的起始位置為原點，向X軸、Y軸進行偏移

下面將透過範例來介紹

首先，新增一個專案【TranslateTransform】

在專案底下新增一個資料夾【image】，放置一張圖片在【image】裡面

開啟【MainPage.xaml】，在【MainPage.xaml】中輸入以下程式碼：


<Grid Background="White">
    <Image Source="image/社群之星.jpg" Width="600" Height="400" />
    <Image Source="image/社群之星.jpg" Width="600" Height="400">
        <Image.RenderTransform>
            <TranslateTransform X="150" Y="100" />
        </Image.RenderTransform>
    </Image>
</Grid>

上面程式碼中，新增了兩個Image元素

並且兩個Image元素的Source屬性值都是一樣的

接著設置圖片的長與寬

其中一個Image元素的Image.RenderTransform元素內添加一個平移變形元素TranslateTransform

將平移變形的X與Y屬性分別設置為 150px 與 100px ，以指定圖片的平移變形座標

這是執行畫面：

回首頁