• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序——动画操作时,rpx和px的转换计算。

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

嫌长版本:

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)

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序怎样将字符串转化为html发布时间:2022-07-18
下一篇:
微信小程序uploadFilefailurlnotindomainlist发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap