wpf做的3d滑動gallery

隨著iphone\ipad的流行及熱捧，現在做移動產品不管是什麼平台的，領導總想做成像ios系統的樣子。自從微軟發布了window8預覽版之後，領導就想著把公司的移動產品移殖到window8上去了。公司的移動產品的主介面是做成3d gallery的立體畫冊效果的，如下圖：

window8是不帶這樣的控制項的，究竟有沒有實現如此效果的控制項我就不清楚了，我認為是沒有的，因為我在vs上找不到，也不符合window8風格，我找遍了網際網路也沒有找到這樣效果的第三方控制項，所以只好自已去開發實現了。雖然我認為做這樣的效果放上window8上比較搞笑，但領導想要如此就沒辦法了，領導說怎麼做就怎麼做！

window8的metro風格開發需要在window8平台上開發，雖然開發框架並不是wpf ，不過也是差不多的，就是xaml加c#（這個效果其實用silverlight來實現會更簡單一些，因為它有將2d檢視直接模擬3d動畫的類）, window8只在虛擬機器上裝了，所以就用wpf來研究了。

在網際網路只找到一種模擬環繞滾動效果的開源**，及滾動效果都有了（只是2d圖效果），就拿它來開刀改造成我們要的效果。需要增加四個功能效果，一是讓它支援用滑鼠滑動控制，二是讓有透視立體效果，三是當前圖滑動到左右時能且有動畫效果在正面與則面視角間轉換，四是為每張圖增加點選觸發事件。

一、滑鼠滑動控制功能

private
void layoutroot_mousemove(object
sender, mouseeventargs e)
_touch_move_distance += 1
; }
else
if (tempp.x 
_touch_move_distance -= 1
; }
tempp =e.getposition(layoutroot);
}else
if (e.leftbutton ==mousebuttonstate.released)
else
}

二、讓有透視立體效果，動畫效果在正面與則面視角間轉換立體效果需要有控制項或類支援才行，xaml提供了一種實現方法就是用viewport3d類，首先自定義乙個具有把2d圖轉3d的view控制項，用xaml實現，涉及的**較多這裡不列出來了，只說一下轉換的動畫效果實現，以下只是其實一種

geometrymodel3d current = this
.contentview;
var transform3dgroup = current.transform as
transform3dgroup;
var rotate = (transform3dgroup.children[0] as rotatetransform3d).rotation as
axisanglerotation3d;
animationvisualelement(rotate, 
45);

animationvisualelement是自定義的實現動畫效果的方法，只實現在立體旋轉，其他如大小縮放也是需要的

private
void animationvisualelement(axisanglerotation3d rotate, double
angel)

三、為每張圖增加點選觸發事件點選事件在新增子時新增進去

public
void
addimage(imagesource bitmapimage)
void image_mousedown(object
sender, mousebuttoneventargs e)
public
delegate
void touchdownhander(uielement view, int
index);
public
event touchdownhander ontouchdownevent;

比較特別的是，此控制項擁有滑動時會產生慣性滑動效果，實現此效果的關鍵**是這部分

void _timer_tick(object
sender, eventargs e)
for (int i = 0; i < _images.count; i++)
if (math.abs(_target - _current) < critical_point && ispressed == false) return;//
慣性滑動效果
_current += (_target - _current) *spriness;
}

其實就是移動距離的變化演算法實現的此控制項實現在效果跟ios或android上的gallery控制項的效果是一模一樣的。同學們學會製件此控制項後，應該也就會對模擬自然物理動畫效果的實現有些了解了，首先控制項本身是自帶計時器的，然後是需要相關效果的模擬效果數值演算法。給同學們奉上全部源**及demo, 還有乙個gallery的變種，效果更複雜一些的，這裡就不解說它的實現原理了，同學們自已研究。gallery變種效果圖：

該demo介面

wpf做的3d滑動gallery

純CSS做3D旋轉魔方

WPF自帶的3D效果學習筆記（1）

Android 滑動效果高階篇（五） 3D旋轉

wpf做的3d滑動gallery

純CSS做3D旋轉魔方

WPF自帶的3D效果 學習筆記（1）

Android 滑動效果高階篇（五） 3D旋轉

相關推薦

WPF自帶的3D效果學習筆記（1）