WPF 動畫 同為控制項不同命

2021-09-02 15:30:30 字數 3387 閱讀 9636

讀大學的時候,有一門課的作業是用 ppt 展示。

但是我們很多同學都把 ppt 當做 word 來用,就單純地往裡面堆文字。

大家都單純地從一頁堆積的文字翻到另一頁堆積的文字,以致於台下的同學都聽不下去,包括那些以同樣的方式匯報的同學。

本來以為會在枯燥中期待下課的到來,直到有個叫幽靈東的同學匯報,他驚豔到了我們。

同時,那些和文字的出現、出現順序、消失,都採用了動畫。這些經過設計的動畫,串聯起來之後,竟讓我們觀眾像是在看一部小動漫。

我們不禁都盯著螢幕,讚嘆著正在呈現的動畫,同時又期待著下乙個動畫。

而對於我們的 windows 軟體或 **,在實現基礎的業務功能後,做一些"增值"的動畫效果,會讓我們的系統看起來,更有趣。

所以,有時候,我們會在滑鼠移入按鈕時,讓按鈕緩慢變大;

又或者開啟乙個子視窗的時候,讓這個子視窗以動畫的方式出現在我們面前,例如:像一幅畫一樣,從左到右展開的方式。

這兩種動畫都是在控制項的尺寸上做手腳。

然而,今天我們要講的重點是:

雖然按鈕(system.windows.controls.button 類)和視窗(system.windows.window 類) 都繼承自 system.window.controls.contentcontrol。

它們實現縮放動畫的方式,卻有些出入。

當你想對 button 進行縮放時,你可以通過對不同的屬性分發動畫,來實現該效果。

3.1 基於 width 和 height 的動畫

即:將動畫分發給 button 的 width 和 height 屬性,從而實現 button 的縮放。

3.1.1 **

3.1.2 效果

3.2 基於 rendertransform 的動畫

跟 width 一樣,rendertransform 也是 button 的依賴項屬性。

它的值型別為 system.windows.media.transform,這個類是定義在二維平面上啟用變換的功能,包括旋轉、縮放、扭曲、平移。

system.windows.media.transform 的子類 system.windows.media.scaletransform ,就是實現在二維 x-y 座標系內縮放物件。

所以下面我們會用到它。

3.2.1 **

3.2.2 效果

3.2.3 附件

屬性摘要

備註rendertransform

獲取或設定影響此元素的呈現位置的轉換資訊

依賴項屬性,值為 system.windows.media.transform 類的物件

scaletransform

在二維 x-y 座標系內縮放物件

繼承自 transform 類

scalex

獲取或設定 x 軸的縮放比例

scaletransform 的成員。預設值為 1

rotatetransform

在 二維 x-y 座標系內圍繞指定點按照順時針方向旋轉物件。

繼承自 transform 類

angle

獲取或設定順時針旋轉角度(以度為單位)

rotatetransform 的成員。預設值為 0

3.3 viewbox 的一次性縮放

3.3.1 **

// 將 viewbox 的尺寸放大到 1.2 倍

private void zoom_big(object sender, routedeventargs e)

// 將 viewbox 的尺寸除以 1.2

private void zoom_small(object sender, routedeventargs e)

3.3.2 解釋

當 viewbox 的尺寸改變時,子元素大小縮放的倍數等同於 viewbox 的縮放倍數。

3.3.3 效果

對於 window 的動畫,我們一般是分發給它的 rendertransform 屬性。

width 或 height 雖然也可以,但是無法實現同時縮放寬高。

既然提到了,我們就先來看看。

4.1 window 基於 width 和 height 的動畫

4.1.1 動畫只分發給 width 屬性

4.1.1.1 **

4.1.1.2 效果

這看起來還挺正常。但如果你想要寬高同時放大呢?

4.1.2 window 基於 width 和 height 的蹩腳動畫

4.1.2.1 **

4.1.2.2 效果

這種並不是我們想要的結果。

把兩個動畫的開始時間錯開,也不是使用者想要的。

所以,我們更喜歡將動畫分發給 rendertransform 屬性。

4.2 window 基於 rendertransform 的動畫

這裡將僅對 scalex 放大的情況一筆帶過了…

4.2.1 將動畫分發給 scalex 和 scaley,實現寬高同時放大的**
4.2.2 效果

對於 button,你可以通過 width|height、rendertransform、父元素 viewbox 的方式進行:寬、高、寬高同時,這 3 種的動畫縮放。

對於 window,你可以通過 width|height、rendertransform 進行寬或高的縮放,但如果要同時縮放寬高,我們用 rendertransform.

WPF給控制項新增運動動畫

在開發的專案,有的時候需要將某些控制項進行隱藏,以及隱藏後在展示出來!我們首先想到的就是控制項本身的屬性visibility 我們可以通過visibility的屬性值來進行隱藏和顯示操作!頻繁的使用該屬性,會讓程式看上去不是特別流暢。所以,給控制項加乙個過渡動畫,會提公升整個程式的流暢度。在wpf中...

wpf 動畫 WPF中監視動畫進度

前台xaml 1.新增乙個progressbar監視進度,注意這裡最大值設定為1,因為動畫始終clock的currentprocess屬性最大值是1。2.響應故事板的currenttimeinvalidated事件 後台 該事件在動畫前進乙個步長時發生 private void storyboard...

WPF控制項

什麼是控制項?控制項是指資料和方法的封裝,而且控制項有自己的方法和屬性。wpf設計ui語言是xaml,它能將使用者資料處理完成後展示出來。我們可以把控制項想像成乙個控制項是乙個容器,容器裡面的內容就是控制項的內容。控制項的內容可以直接是資料,也可以是控制項。wpf中也有預設不能看到的控制項,如doc...