微信小程序——動畫操作時，rpx 和 px 的轉換計算。

嫌長版本：

var rpx = 10000;
var systemInfo = wx.getSystemInfoSync();
var px = rpx / 750 * systemInfo.windowWidth; 

 

 

 

 

 

  -------------------  ------------------- 詳解版： 分割線  -------------------  -------------------

 

• 先理解兩個概念。
• 分辨率有兩種。
  • 【物理分辨率 rpx（responsive pixel）】即 手機上實際的分辨率。如 iPhone6 是 1334rpx * 750rpx。
  • 【邏輯分辨率 px】即 代碼計算時的分辨率。
• 【像素倍率 dpr】即 物理分辨率 除以 邏輯分辨率。如 iPhone6 的是 (1334 * 750) / (667 *  375) = 2。

 

如圖：一個矩形寬度為200rpx，要將它從左側看不到的地方移動到屏幕內然后靠最左側停下。即 將它的X坐標加 200rpx。

在 iPhone6 上的代碼就是如下：

var ani =  wx.createAnimation({ transformOrigin: "50% 50%", duration: 1000, timingFunction: "ease" });

ani.translateX(100).step(); // 即 X += 100px。

 

 

問題是：不確定機型。

所以 這里的 100px 需要每次都計算出來。

已知矩形的設計為 200rpx，即 px = 200 / 750 * systemInfo.windowWidth; 

 

 

 

微信提供的函數可以同步獲取到設備信息。

// 在 iPhone6 下運行：

var systemInfo = wx.getSystemInfoSync();
console.log(systemInfo.windowWidth); // 輸出 375（單位 px）
 
// 在 iPhone6 Plus 下：
var systemInfo = wx.getSystemInfoSync();
console.log(systemInfo.windowWidth); // 輸出 414 （單位 px）