動(dòng)畫基礎(chǔ)課件

1、動(dòng)畫基礎(chǔ)第一個(gè)簡(jiǎn)單動(dòng)畫n n n n n recn opacity n n n n n n n n private void button1_click(object sender, routedeventargs e)n n mystory.begin();n 改成矩形旋轉(zhuǎn)的動(dòng)畫nn n n n myrotaten angle n n n n n n n n n n 關(guān)鍵幀動(dòng)畫n n n n n mytransn xn n n n n n n n n n n n n貝塞爾曲線ndoubleanimation屬性屬性nstoryboard.targetname - 要進(jìn)行動(dòng)畫處理的對(duì)象的名稱要

2、進(jìn)行動(dòng)畫處理的對(duì)象的名稱storyboard.targetproperty - 要進(jìn)行動(dòng)畫處理的對(duì)象的屬性要進(jìn)行動(dòng)畫處理的對(duì)象的屬性begintime - 時(shí)間線在被觸發(fā)時(shí)間線在被觸發(fā) begintime 的時(shí)間后才能開(kāi)始播放的時(shí)間后才能開(kāi)始播放timespan - -日日.時(shí)時(shí):分分:秒秒.1位到位到7為的秒后的小數(shù)為的秒后的小數(shù)（可為正；可（可為正；可為負(fù)；可為空；默認(rèn)值為為負(fù)；可為空；默認(rèn)值為 0）from - 動(dòng)畫的起始值動(dòng)畫的起始值to - 動(dòng)畫的結(jié)束值動(dòng)畫的結(jié)束值by - 動(dòng)畫從起始值開(kāi)始計(jì)算，所需變化的總量（動(dòng)畫從起始值開(kāi)始計(jì)算，所需變化的總量（to 優(yōu)先于優(yōu)先于 by）dura

3、tion - 時(shí)間線的持續(xù)時(shí)間時(shí)間線的持續(xù)時(shí)間timespan - -日日.時(shí)時(shí):分分:秒秒.1位到位到7為的秒后的小數(shù)為的秒后的小數(shù)automatic - 自動(dòng)確定自動(dòng)確定forever - 無(wú)限長(zhǎng)無(wú)限長(zhǎng)autoreverse - 動(dòng)畫完成后是否要原路返回。默認(rèn)值為動(dòng)畫完成后是否要原路返回。默認(rèn)值為 falserepeatbehavior - 動(dòng)畫重復(fù)播放的時(shí)間、次數(shù)或類型動(dòng)畫重復(fù)播放的時(shí)間、次數(shù)或類型timespan - -日日.時(shí)時(shí):分分:秒秒.1位到位到7為的秒后的小數(shù)為的秒后的小數(shù)nx - 播放次數(shù)。播放次數(shù)。1x, 2x, 3xforever - 永久播放永久播放speedrati

4、o - 時(shí)間線的速率的倍數(shù)。默認(rèn)值時(shí)間線的速率的倍數(shù)。默認(rèn)值 1fillbehavior - 動(dòng)畫結(jié)束后的行為動(dòng)畫結(jié)束后的行為 system.windows.media.animation.fillbehavior枚舉枚舉fillbehavior.holdend - 動(dòng)畫結(jié)束后，保留動(dòng)畫屬性的結(jié)束值。默認(rèn)動(dòng)畫結(jié)束后，保留動(dòng)畫屬性的結(jié)束值。默認(rèn)值值fillbehavior.stop - 動(dòng)畫結(jié)束后，恢復(fù)動(dòng)畫屬性為其初始值動(dòng)畫結(jié)束后，恢復(fù)動(dòng)畫屬性為其初始值新建項(xiàng)目testanimationn以下替換gridn n將演示圖板作為一種資源。將 storyboard 放入一個(gè)資源塊內(nèi)，以便能夠輕松地自代

5、碼引用該 storyboard，以執(zhí)行開(kāi)始、停止、暫停和繼續(xù)等操作。下面的標(biāo)記顯示 stackpanel 對(duì)象資源塊中聲明的 storyboard。請(qǐng)注意，您可以在任意資源塊中聲明 storyboard，只要該資源塊與您希望進(jìn)行動(dòng)畫處理的對(duì)象位于同一個(gè)作用域中。 n nstoryboard對(duì)象的作用是通過(guò)時(shí)間線控制動(dòng)畫，并為其子動(dòng)畫提供對(duì)象和屬性目標(biāo)信息，還可以使用 storyboard 對(duì)象的交互式方法來(lái)啟動(dòng)、暫停、繼續(xù)和停止動(dòng)畫。若要向?qū)ο髴?yīng)用動(dòng)畫，需要?jiǎng)?chuàng)建 storyboard 對(duì)象并使用 targetname 和 targetproperty 附加屬性指定要進(jìn)行動(dòng)畫處理的對(duì)象和屬性。n

6、示例中的 storyboard 僅包含一個(gè)動(dòng)畫，不過(guò)您可以添加多個(gè)動(dòng)畫。 n n n n n 點(diǎn)擊正方形開(kāi)始動(dòng)畫n n ndoubleanimation 就是這樣一種動(dòng)畫；它可以創(chuàng)建兩個(gè) double 值之間的過(guò)渡。若要指定 doubleanimation 的起始值，可設(shè)置其 from 屬性。若要指定其終止值，可設(shè)置其 to 屬性。 n創(chuàng)建了不透明度值從 1.0 向 0.0 過(guò)渡的動(dòng)畫，此過(guò)渡使目標(biāo)元素從完全不透明逐漸轉(zhuǎn)變?yōu)橥耆豢梢?jiàn)。若要使元素在消失后再逐漸回到視野中，請(qǐng)將 autoreverse 屬性設(shè)置為 true。若要使動(dòng)畫無(wú)限期地重復(fù)，請(qǐng)將其 repeatbehavior 屬性設(shè)置為

7、 forever。n使用 targetname 附加屬性指定要進(jìn)行動(dòng)畫處理的對(duì)象。在下面的代碼中，為 doubleanimation 指定了一個(gè)目標(biāo)名稱 myanimatedrectangle，這是要進(jìn)行動(dòng)畫處理的對(duì)象的名稱。n使用 targetproperty 附加屬性指定要進(jìn)行動(dòng)畫處理的屬性。在下面的代碼中，動(dòng)畫被配置為面向 rectangle 的 opacity 屬性。 n n/ 當(dāng)用戶點(diǎn)擊正方形時(shí)動(dòng)畫開(kāi)始運(yùn)行nprivate void mouse_clicked(object sender, mouseeventargs e)nn mystoryboard.begin();nn從事件處

8、理程序控制動(dòng)畫。 storyboard 提供多種方法，這些方法允許您控制 storyboard 動(dòng)畫的播放，包括 begin、stop、pause 和 resume。本示例使用 begin 方法，該方法在用戶單擊矩形并引發(fā) mouseleftbuttondown 事件時(shí)啟動(dòng)動(dòng)畫。 關(guān)鍵幀動(dòng)畫n n n n n n n n n n n n n n n n n n n n 另一種書(shū)寫方式n n n n n n n n n n n n n n n n動(dòng)態(tài)創(chuàng)造圓n ellipse ellipse = new ellipse();n ellipse.width = 150;n ellipse.heigh

9、t = 150;n ellipse.fill = new solidcolorbrush(color.fromargb(255, 255, 0, 0);ncanvas_parent.children.add(ellipse);c#實(shí)現(xiàn)動(dòng)畫n doubleanimation animation1 = new doubleanimation();n storyboard.settarget(animation1, ellipse);n storyboard.settargetproperty(animation1, new propertypath(canvas.left);n animation

10、1.from = 20;n animation1.to = 400;n animation1.duration = new duration(new timespan(0, 0, 0, 1);n storyboard sb = new storyboard(); n sb.repeatbehavior = repeatbehavior.forever;n sb.autoreverse = true;n sb.children.add(animation1);n sb.begin();跟隨鼠標(biāo)n n n n n n n n usercontrol_mouseleftbuttondown事件n/創(chuàng)

11、建移動(dòng)動(dòng)畫 n storyboard storyboard = new storyboard();n point p = e.getposition(null);n /創(chuàng)建x軸方向動(dòng)畫 n doubleanimation doubleanimation = new doubleanimation(); n doubleanimation.from = canvas.getleft(ell);n doubleanimation.to = p.x;n doubleanimation.duration = new duration(timespan.fromseconds(2);n storyboa

12、rd.settarget(doubleanimation, ell);n storyboard.settargetproperty(doubleanimation, new propertypath(canvas.left);n storyboard.children.add(doubleanimation);n n /創(chuàng)建y軸方向動(dòng)畫 n doubleanimation = new doubleanimation(); n doubleanimation.from = canvas.gettop(ell);n doubleanimation.to = p.y - ell.height;n doubleanimation.duration = new duration(timespan.fromseconds(2);n storyboard.settarget(doubleanimation,ell);n storyboard.settargetproperty(doubleanimation, new propertypath(canvas.top);n storyboard.children.add(doubleanimation);n/動(dòng)畫播放 n storyboard.begin(); 在運(yùn)