通通玩blend美工（5）旋轉木馬，互動性設計

這一篇偏向於邏輯的比較多，放在這個系列裡會不會欠妥呢？在中國互動性設計也是美工的份內職責哦~

所以沒有blend基礎的人也可以看懂這篇文章，不過要用到初中的幾何知識哦~親

相信很多人都在手機或者網頁上或者ktv的點歌系統裡看到過旋轉木馬的目錄導航，這個是如何做的呢？？　　

)改變左上角的資料，會有意想不到的效果喲~

(特別鳴謝烤地瓜的答疑，和地瓜村眾人的熱心幫助)

1.總體思路

分析上面效果：一排方塊在轉圈，點選的塊跑到最近的位置

圈:其實就是乙個橢圓，只不過人的近大遠小的邏輯思維，大腦根據常識把它裝換成了乙個空間。

最近的位置:其實就是橢圓的最下面，塊變得最大，所以感覺最近。

2.設計過程

首先我們來實現讓這堆塊圍繞成乙個橢圓。

step.1

橢圓是這樣來產生滴~！↓

我以我微薄的幾何知識用blend畫出了上圖，右上角看到我們久違的橢圓公式。第乙個公式當把y單獨提到等號一邊時發現是要開根號的這樣，就如圖所看到的，乙個x對應著兩個y值還得去判斷正負號顯得麻煩了，就用第二個公式吧。其中a為x半軸，b為y半軸，d為角度。只需要乙個角度d就可以確定出這個橢圓中的所有點了。

首先寫出變換塊位置的方法：

private
void setposition(grid item, double degree)

step.2

跟隨鼠轉

標起來吧

這樣傳入需要變換的塊和事先計算的該塊的位置所在就角度就可以確定該塊的位置、大小、層次了。單mousemove的時候，只要給每乙個塊都重新定位，把滑鼠的移動距離裝換為塊組需要旋轉的角度。

private
void layoutroot_mousemove(object sender, mouseeventargs e)//
滑鼠移動時轉動
startpoint.x = e.getposition(this).x;//
把但前位置賦給開始位置
} }

我把每個grid的tag用來儲存自己當前所在的角度。

step.3

點選就轉到前面來啊，親~

接下來製作點選塊轉動的動畫，即點選塊後更具該塊所在的位置，計算出旋轉到90'時需要旋轉的角度，然後所有塊都轉這個角度（為什麼是90°呢？應該是270°啊~因為wpf中的位移動畫，y軸移動向下是為正，向上為負，這樣就剛好和我們課堂上通用的座標系剛好上下翻轉了）

void newgrid_mouseup(object sender, mousebuttoneventargs e)//
單擊其中一塊轉正
});}
yscaleanimation.to = xscaleanimation.to = (1 - scale) / b * yanimation.to +scale;
sb.children.add(xscaleanimation); 
storyboard.settarget(xscaleanimation, myst); 
storyboard.settargetproperty(xscaleanimation, 
new propertypath("
scalex
")); 
sb.children.add(yscaleanimation);
storyboard.settarget(yscaleanimation, myst);
storyboard.settargetproperty(yscaleanimation, 
new propertypath("
scaley
"));
sb.begin();
//開始動畫
item.tag = degree + needangle;//
記錄最後的角度
} }

step.4

最靠近下面的要自動對正哦~

ok，接下來還差最有一點就是自動對正了，即當拖動時把最接近最近位置的塊自定定位到最近。

原理就是遍歷所有塊的但前位置，角度越接近90°的就模擬一下它的單擊

private
void layoutroot_mouseup(object sender, mousebuttoneventargs e)//
當滑鼠彈起時判斷最近的塊，自動轉正
}newgrid_mouseup(neargrid, 
null);//
模擬最近的塊被點了一次
ispress = false
; }

做完收工。

下面是我修改左上角的引數實現的幾個比較好看的效果

效率也是很不錯的，上面的100個塊在我i7的電腦上一點都不卡哦。

大家如果調出什麼好看的效果可以貼到回覆裡，交流下。

通通玩blend美工（5）旋轉木馬，互動性設計

通通玩blend美工（7）簡約而不簡單的塊

渲染設定系列5 Blend

TT玩加帶你暢「遊」5G

通通玩blend美工（5） 旋轉木馬，互動性設計

通通玩blend美工（7） 簡約而不簡單的塊

渲染設定系列5 Blend

TT玩加帶你暢「遊」5G

相關推薦

通通玩blend美工（5）旋轉木馬，互動性設計

通通玩blend美工（7）簡約而不簡單的塊