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