淺談關於html5中圖片拋物線運動的一些心得

常見的, 物體/圖片做拋物線或更準確的說是沿貝塞爾曲線運動是H5開發中常見的需求, 那麼如何快速的根據設計稿計算出運動路徑是開發者首要解決的問題.

我這邊H5開發常用的設計稿尺寸是640 * 1008, 那麼根據這個尺寸解決方案思路如下:

1, 先將PS中要位移的元素單獨導出一張png, 如果設計稿中已經規劃好了運動路線的話也需要將該路線導出為png;

2, 在AI中新建一個和設計稿尺寸一樣的文件,再將位移元素分兩次拖入該文件中, 如果有運動路線的話也拖入進去,如下所示:

這裡要注意的是位移圖片的擺放位置, 路徑的起點和終點應該對應著圖片的移動點.對應的情況有以下幾種:

1. canvas中不做變形處理, 那麼移動點就是圖片的左上角
2. canvas中, 圖片做了translate移動, 因根據translate(x1, y1)中的x1, y1去加上drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)中dx和dy的最終偏移.
3. 如果元素透過position:absolute定位, 並透過transform中translate3d(x, y, z)來控制位置的話,偏移應該是x, y. 通常的, transform中我們有可能模仿left, top和額外的margin來控制元素的位置, 在transform中額外的增加一個translate3D(marginLeftX, marginLeftY, 0). 也需要把這個margin的值考慮進去.

3, 在AI中透過ctrl + r鍵拉出參考線, 在元素圖片的移動拉出其x, y的位置, 如下圖所示:

然後選擇鋼筆工具, 先後在起點和終點處點擊, 在點擊終點後滑鼠不要鬆開, 直接拖曳AI會自動添加2個控制點. 透過移動滑鼠可以調整兩個控制點的位置, 從而達到調整鋼筆工具所產生的路徑的目的, 直到和設計稿上的參考線路徑一致.如下所示:

拖曳到想要的位置後, 放開滑鼠, 鍵盤回車確定路徑, 如果所勾勒的路徑不合心意還可以繼續拖曳控制點以作調整.

4, 在調整完畢後, 額外的拖動兩條參考線到控制點1的位置, 然後通過菜單欄-- 窗口-- 信息, 打開信息面板, 分別將起點, 控制點, 終點, 3個點的坐標取出來.

5, 分別計算控制點, 終點和起點的像素差, 根據H5中要位移的圖片的真實x, y的坐標值和像素差做計算得出真實的控制點, 終點坐標. 再將這三個坐標點應用於公式中即可.