|
本文告訴大家一個(gè)有趣的動(dòng)畫，在鼠標(biāo)點(diǎn)擊的時(shí)候，在點(diǎn)擊所在的點(diǎn)顯示一個(gè)圓圈，然后這個(gè)圓圈做動(dòng)畫變大，但是顏色變淡的效果。本文的控件可以讓大家將對(duì)應(yīng)的容器放在自己應(yīng)用里面就能實(shí)現(xiàn)這個(gè)效果 這個(gè)效果特別簡(jiǎn)單，屬于入門級(jí)的動(dòng)畫，代碼也很少，請(qǐng)看效果 本文的控件只是一個(gè)簡(jiǎn)單的 Canvas 控件，可以將本文的這個(gè)控件替換為你自己需要的控件。或者復(fù)制本文的代碼，放在你自己的項(xiàng)目里面，只需要讓你的項(xiàng)目里面有一個(gè) Canvas 同時(shí)這個(gè) Canvas 能接收鼠標(biāo)事件就能作出本文效果 先在界面放一個(gè) Canvas 控件
上面代碼有一個(gè)細(xì)節(jié)是 在后臺(tái)代碼添加鼠標(biāo)點(diǎn)擊的代碼 如何在 WPF 中顯示一個(gè)圓圈？ 在 WPF 可以通過(guò) Ellipse 控件顯示橢圓，如果設(shè)置他的寬度和高度相同，那么就是一個(gè)圓，添加一個(gè) Ellipse 的代碼請(qǐng)看下面 var currentSize = 10;
var ellipse = new Ellipse()
{
Width = currentSize,
Height = currentSize,
Fill = Brushes.Gray
};上面代碼的 Fill 是設(shè)置填充顏色，而要設(shè)置圓圈的邊框顏色可以使用 Stroke 屬性，設(shè)置邊框粗細(xì)使用 StrokeThickness 屬性 如何在鼠標(biāo)點(diǎn)擊的地方顯示一個(gè)圓圈？ 在 WPF 中，可以通過(guò) GetPosition 方法拿到鼠標(biāo)相對(duì)于某個(gè)元素的坐標(biāo)，或者說(shuō)鼠標(biāo)點(diǎn)擊到某個(gè)元素的坐標(biāo)。通過(guò) TranslateTransform 的方法可以設(shè)置某個(gè)元素的坐標(biāo) 獲取鼠標(biāo)相對(duì)于 Canvas 的坐標(biāo)的方法如下 var point = e.GetPosition(Canvas); 為什么需要有鼠標(biāo)獲取的時(shí)候，是相對(duì)于某個(gè)控件？原因是不同的控件的坐標(biāo)是不同的，鼠標(biāo)點(diǎn)擊的絕對(duì)坐標(biāo)是屏幕，但是應(yīng)用的控件一般都是相對(duì)于上一層容器，如窗口等。假設(shè)此時(shí)的鼠標(biāo)點(diǎn)擊屏幕坐標(biāo)是 (100,100) 而應(yīng)用窗口坐標(biāo)是 (10,10) 那么窗口里面的 x 元素想要知道此時(shí)鼠標(biāo)點(diǎn)擊在哪，難道還需要 x 控件自己去拿到當(dāng)前窗口坐標(biāo)在哪，然后換算出鼠標(biāo)點(diǎn)擊到 x 空控件的哪里？這樣的做法太渣了，所以 WPF 框架就提供了 GetPosition 拿到相對(duì)于某個(gè)元素的鼠標(biāo)點(diǎn)擊 在拿到鼠標(biāo)點(diǎn)擊到 Canvas 的坐標(biāo)時(shí)如何設(shè)置剛才創(chuàng)建的圓圈的坐標(biāo)，可以通過(guò) TranslateTransform 方法，請(qǐng)看代碼 var translateTransform = new TranslateTransform(point.X, point.Y); ellipse.RenderTransform = translateTransform; 注意 TranslateTransform 的作用是設(shè)置水平和垂直平移，需要設(shè)置到對(duì)應(yīng)元素的 RenderTransform 里面。這些變換的方法包括了縮放和旋轉(zhuǎn)等。用變換的方法做動(dòng)畫的效率相對(duì)會(huì)比較高 接下來(lái)就是動(dòng)畫的部分了，在 WPF 中的動(dòng)畫需要通過(guò) Storyboard 故事板觸發(fā)，而通過(guò)具體的 Animation 執(zhí)行對(duì)不同的屬性的更改。也就是一個(gè) Storyboard 里面包含多個(gè)不同的動(dòng)畫，而每個(gè)動(dòng)畫都對(duì)特定的某個(gè)對(duì)象的某個(gè)屬性的更改，通過(guò)更改屬性的方式做到讓某個(gè)對(duì)象做動(dòng)畫 本文需要做的動(dòng)畫包括讓圓圈變大，修改圓圈透明度 讓圓圈變大的方法就是修改 Ellipse 的寬度和高度，可以試試下面的方法 var storyboard = new Storyboard();
var widthAnimation = new DoubleAnimation(toValue: toSize, new Duration(TimeSpan.FromSeconds(1)));
Storyboard.SetTargetProperty(widthAnimation, new PropertyPath("Width"));
Storyboard.SetTarget(widthAnimation, ellipse);
storyboard.Children.Add(widthAnimation);
var heightAnimation = new DoubleAnimation(toValue: toSize, new Duration(TimeSpan.FromSeconds(1)));
Storyboard.SetTargetProperty(heightAnimation, new PropertyPath("Height"));
Storyboard.SetTarget(heightAnimation, ellipse);
storyboard.Children.Add(heightAnimation);
storyboard.Begin();上面代碼使用 DoubleAnimation 作出連續(xù)的動(dòng)畫，在使用 DoubleAnimation 時(shí)將會(huì)從對(duì)應(yīng)屬性的當(dāng)前值修改到指定值，修改的速度可以通過(guò)速度函數(shù)設(shè)置，默認(rèn)使用勻速動(dòng)畫。動(dòng)畫的時(shí)間通過(guò) Duration 設(shè)置 設(shè)置完成之后通過(guò) Storyboard.SetTargetProperty 這個(gè)靜態(tài)方法，將 Animation 和對(duì)應(yīng)的元素的屬性路徑關(guān)聯(lián)起來(lái)，也就是 PropertyPath 的作用。關(guān)聯(lián)的時(shí)候需要關(guān)聯(lián)屬性路徑和作用的元素，也就是下面兩句代碼 Storyboard.SetTargetProperty(widthAnimation, new PropertyPath("Width"));
Storyboard.SetTarget(widthAnimation, ellipse);將 Animation 添加到 storyboard 才能在 storyboard 開始的時(shí)候執(zhí)行 通過(guò)相同的方法設(shè)置高度，然后嘗試開啟動(dòng)畫 storyboard.Begin(); 此時(shí)點(diǎn)擊 Canvas 容器的時(shí)候，就可以看到在鼠標(biāo)點(diǎn)擊顯示圓圈，然后圓圈不斷變大 當(dāng)然，還有下一步就是讓圓圈變淡，在 WPF 中可以通過(guò)修改圓圈的透明度做動(dòng)畫，請(qǐng)看代碼 var opacityAnimation = new DoubleAnimation(toValue: 0, new Duration(TimeSpan.FromSeconds(1)));
Storyboard.SetTargetProperty(opacityAnimation, new PropertyPath("Opacity"));
Storyboard.SetTarget(opacityAnimation, ellipse);
storyboard.Children.Add(opacityAnimation);在 WPF 中使用 Opacity 表示透明度，準(zhǔn)確說(shuō)是不透明度，使用 1 表示完全不透明，使用 0 表示全透明。小伙伴都知道，如果是全透明，也就是看不見 在 Animation 類提供了兩個(gè)屬性，一個(gè)是 From 另一個(gè)是 To 分別表示讓屬性從哪里什么值開始修改到哪個(gè)值。而 From 屬性不設(shè)置的話就是從當(dāng)前值開始 注意上面代碼需要放在 此時(shí)運(yùn)行代碼大概可以看到本文的效果，但是還有一點(diǎn)細(xì)節(jié)是，剛才只是修改元素的大小，但是元素的左上角不變，也就是在做元素變大的動(dòng)畫時(shí)候，其實(shí)可以看到不是通過(guò)圓心開始變大的 一個(gè)優(yōu)化的方法是在元素做變大的動(dòng)畫的時(shí)候，同時(shí)修改元素的左上角的坐標(biāo)，修改左上角移動(dòng)多少？可以修改移動(dòng)變大的一半，如從 10 到 15 也就是移動(dòng) 2.5 單位。在 WPF 中的單位不一定是像素，因?yàn)?WPF 和屏幕具體分辨率等有很復(fù)雜的關(guān)系，詳細(xì)請(qǐng)看本文最后的參考文檔 還記得剛才是如何修改元素的坐標(biāo)？通過(guò) TranslateTransform 方法修改圓圈的坐標(biāo)，也就是動(dòng)畫也可以通過(guò)修改 TranslateTransform 的 X 和 Y 屬性做動(dòng)畫 和上面代碼相同，設(shè)置 DoubleAnimation 設(shè)置 X 和 Y 屬性的值。只是這里的屬性不是一級(jí)的，因?yàn)槭峭ㄟ^(guò) TranslateTransform 放到 RenderTransform 里面，此時(shí)的屬性路徑相對(duì)就長(zhǎng)一點(diǎn) // ( ToWidth(15) - CurrentWidth(10) ) / 2 = 2.5
var translateTransformX = translateTransform.X - (toSize - currentSize) / 2;
var xAnimation = new DoubleAnimation(toValue: translateTransformX, new Duration(TimeSpan.FromSeconds(1)));
Storyboard.SetTargetProperty(xAnimation,
new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.X)"));
Storyboard.SetTarget(xAnimation, ellipse);
storyboard.Children.Add(xAnimation);如上文說(shuō)的，設(shè)置 translateTransformX 的坐標(biāo)為放大的寬度減去原先的一半，也就是從原先的 10 修改為 15 的一半 而PropertyPath的就是拿到對(duì)應(yīng)的 RenderTransform 屬性的值，強(qiáng)行轉(zhuǎn)換為 TranslateTransform 然后拿到 X 屬性 對(duì)另一個(gè)屬性也做相同的動(dòng)畫 var translateTransformY = translateTransform.Y - (toSize - currentSize) / 2;
var yAnimation = new DoubleAnimation(toValue: translateTransformY, new Duration(TimeSpan.FromSeconds(1)));
Storyboard.SetTargetProperty(yAnimation,
new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.Y)"));
Storyboard.SetTarget(yAnimation, ellipse);此時(shí)運(yùn)行代碼就能看到本文的效果了 但是點(diǎn)擊了很多次之后，會(huì)在實(shí)時(shí)可視化樹里面看到 Canvas 存在很多看不到的圓圈元素，原因是這些元素只是透明度是 0 看不到，但是依然在視覺樹上面，可以在動(dòng)畫播放完成之后，刪除這個(gè)元素，請(qǐng)看代碼 storyboard.Completed += (o, args) => { Canvas.Children.Remove(ellipse); };本文鼠標(biāo)點(diǎn)擊的代碼如下 private void Canvas_OnMouseDown(object sender, MouseButtonEventArgs e)
{
var toSize = 15;
var currentSize = 10;
var ellipse = new Ellipse()
{
Width = currentSize,
Height = currentSize,
Fill = Brushes.Gray
};
var point = e.GetPosition(Canvas);
var translateTransform = new TranslateTransform(point.X, point.Y);
ellipse.RenderTransform = translateTransform;
Canvas.Children.Add(ellipse);
var storyboard = new Storyboard();
var widthAnimation = new DoubleAnimation(toValue: toSize, new Duration(TimeSpan.FromSeconds(1)));
Storyboard.SetTargetProperty(widthAnimation, new PropertyPath("Width"));
Storyboard.SetTarget(widthAnimation, ellipse);
storyboard.Children.Add(widthAnimation);
var heightAnimation = new DoubleAnimation(toValue: toSize, new Duration(TimeSpan.FromSeconds(1)));
Storyboard.SetTargetProperty(heightAnimation, new PropertyPath("Height"));
Storyboard.SetTarget(heightAnimation, ellipse);
storyboard.Children.Add(heightAnimation);
var opacityAnimation = new DoubleAnimation(toValue: 0, new Duration(TimeSpan.FromSeconds(1)));
Storyboard.SetTargetProperty(opacityAnimation, new PropertyPath("Opacity"));
Storyboard.SetTarget(opacityAnimation, ellipse);
storyboard.Children.Add(opacityAnimation);
// ( ToWidth(15) - CurrentWidth(10) ) / 2 = 2.5
var translateTransformX = translateTransform.X - (toSize - currentSize) / 2;
var xAnimation = new DoubleAnimation(toValue: translateTransformX, new Duration(TimeSpan.FromSeconds(1)));
Storyboard.SetTargetProperty(xAnimation,
new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.X)"));
Storyboard.SetTarget(xAnimation, ellipse);
storyboard.Children.Add(xAnimation);
var translateTransformY = translateTransform.Y - (toSize - currentSize) / 2;
var yAnimation = new DoubleAnimation(toValue: translateTransformY, new Duration(TimeSpan.FromSeconds(1)));
Storyboard.SetTargetProperty(yAnimation,
new PropertyPath("(UIElement.RenderTransform).(TranslateTransform.Y)"));
Storyboard.SetTarget(yAnimation, ellipse);
storyboard.Children.Add(yAnimation);
storyboard.Completed += (o, args) => { Canvas.Children.Remove(ellipse); };
storyboard.Begin();
}
|
|
|
