編程實戰——電影管理器之界面UI及動畫切換


在前文“編程實戰——電影管理器之利用MediaInfo獲取高清視頻文件的相關信息”中提到電影管理器的目的是方便播放影片,在想看影片時不需要在茫茫的文件夾下找尋。

 

我對電影管理器的想法如下:

1、可以全鍵盤操作(不依賴鼠標),最好是利用鍵盤上的小數字鍵區就能完成全部操作。

2、基於HTPC的全屏操作,故軟件的大小為1920*1080

3、模仿時下流行的“磁貼”效果。

 

下圖是本軟件的初步的界面UI

bg

解釋一下:

1、HTPC的屏幕是1920*1080,在軟件設計的時候,由於電腦的屏幕沒那么大,初步設計為960*540,等調試完全沒有問題后,再將分辨率調成1920*1080。

2、整個屏幕分為上下兩個部分。上部是類別信息(上圖中頂部的黑條,目前是空在那兒),下部是電影信息的磁貼

3、磁貼一共3*3=9個,分別用1-9標示,對應小數字鍵盤上的數字鍵,設想是按相應的數字鍵,調用系統播放器播放相應的影片

4、由於電影的數量眾多,利用數字小鍵盤區上的/、*鍵實現電影列表的左右切換;利用-、+鍵實現電影列表的上下切換

 

現在的流行的UI,在列表切換的時候,都會有一段動畫的切換效果,以避免呆板的效果。

 

下面就給出動畫切換的實現代碼


    Private  Sub TransFilm(Bmp1 As  Bitmap, Bmp2 As  Bitmap)
        Dim I As  Integer
        Dim X As  Integer

        Dim Steps As  Integer = 35

        _IsDrawing = True

        _G.SetClip( New  Rectangle(0, 30, 960, 510))

        For I = 0 To Steps

            X = Int(( Math.Cos(I / Steps * Math.PI) - 1) * 480 + 0.5) 

            _G.DrawImageUnscaled(Bmp1, X, 30)
            _G.DrawImageUnscaled(Bmp2, X + 960, 30)

            PrivatePaint()

            'Threading.Thread.Sleep(20)

        Next

        _G.ResetClip()
        _IsDrawing = False
    End  Sub

首先,將要切換的2個電影列表繪到2個Bitmap對象(上面的代碼沒有顯示描繪的代碼,作為參數傳入到方法中)。

所謂的動畫,就是把動畫拆成若干步,然后把每一步繪制到界面上,在每一步中間加上Threading.Thread.Sleep(20),使動畫在不同的機器上動畫的時間不會相差太大。

 

不過上面的代碼,有這幾個問題,不太好解決。寫在這也是向網友求教,看看有沒有啥好的解決方法

1、加上Threading.Thread.Sleep(20)后,在參數大於20,有頻閃的現象。我已經用了雙緩沖技術,_G就是在內存中開辟的緩沖區,在繪圖完成后,用PrivatePaint方法把_G的內容繪制到WinForm上

2、把這句話注釋后,雖然動畫看起來快了很多,但是動畫很流暢,沒有頻閃的現象。不過在Steps參數改成超過40后,還是有一絲閃爍。

 

有網友能給出比較好的VS的動畫教程么?也考慮到也許用Directx.Direct2D實現動畫效果比較好,只是相關的資料找尋比較少而作罷。

 

曾經考慮用WPF實現動畫,不過相關的資料找尋比較少而作罷。不過WPF和WP7、WP8、IOS、Android等技術相似度比較高。在本軟件的首個版本開發后,可以考慮用WPF技術再開發一個版本


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM