网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網

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

發布時間:2018-05-08 11:28 所屬欄目:小程序開發教程

嫌長版本:

 

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

------------------- ------------------- 詳解版: 分割線 ------------------- -------------------

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

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

在 iPhone6 上的代碼就是如下:

 

  1. var ani = wx.createAnimation({ transformOrigin: "50% 50%", duration: 1000, timingFunction: "ease" });
  2. ani.translateX(100).step(); // 即 X += 100px。

問題是:不確定機型。  所以 這里的 100px 需要每次都計算出來。  已知矩形的設計為 200rpx,即 px = 200 / 750 * systemInfo.windowWidth;

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

 

  1. // 在 iPhone6 下運行:
  2.  
  3. var systemInfo = wx.getSystemInfoSync();
  4. console.log(systemInfo.windowWidth); // 輸出 375(單位 px)
  5.  
  6. // 在 iPhone6 Plus 下:
  7. var systemInfo = wx.getSystemInfoSync();
  8. console.log(systemInfo.windowWidth); // 輸出 414 (單位 px)


易優小程序(企業版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://www.xiuhaier.com/wxmini/doc/course/24327.html 復制鏈接 如需定制請聯系易優客服咨詢:800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×