嫌长版本:

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)

微信小程序——动画操作时,rpx 和 px 的转换计算。的更多相关文章

  1. 微信小程序动画:高度渐变,left渐变

    今天在测试微信小程序动画的时候遇到了坑,需求是这样的点击时子元素从外部滑动回来,父元素的高度跟随子元素的高度改变. 实现子元素left为0并不复杂,但是改变父元素box的高度的时候却遇到了坑,因为是需 ...

  2. 微信小程序动画之圆形进度条

    微信小程序动画之圆形进度条 上图: js: //获取应用实例 var app = getApp() var interval; var varName; var ctx = wx.createCanv ...

  3. 微信小程序动画实现(API,css)

    微信小程序动画API实现 index.js clicktap:function(){ var Animation=wx.createAnimation({ duration: 2000, }) Ani ...

  4. 微信小程序的尺寸单位rpx介绍

    rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375 ...

  5. 微信小程序相关操作

    显示用户基本信息 在微信小程序中,经常会碰到需要展示微信用户的基本信息,如果只是为了显示用户信息,最简单有效的办法是使用open-data,这是微信小程序内置的用于展示微信开放数据的组件,通过改变ty ...

  6. 如何实现微信小程序动画?添加到我的小程序动画实现详细讲解,轻松学会动画开发!附壁纸小程序源码下载链接

    为了让用户能尽可能多地使用小程序,也算是沉淀用户,现在很多小程序中,都有引导用户"添加到我的小程序"的操作提示,而且大多都是有动画效果.在高清壁纸推荐小程序首页,用户每次进入,都会 ...

  7. 微信小程序动画技巧

    用微信小程序自带的wx.createAnimation api可创建动画,该动画效果相比css写的动画更流畅. 栗子与用法,见官网:https://mp.weixin.qq.com/debug/wxa ...

  8. 微信小程序动画之弹出菜单

    用微信小程序做了一个动画,效果如上图: 代码: js: Page({ data: { isPopping: false, animPlus: {}, animCollect: {}, animTran ...

  9. 微信小程序获取formId时提示"the formId is a mock one"

    微信小程序使用模板消息需要使用表单提交 formId,因此进行了简单的代码测试,在 wxml 文件中创建 form 对象,并在 form 标签中声明属性 report-submit="tru ...

随机推荐

  1. RxJava / RxAndroid

    RxJava 是什么 RxJava 是函数响应式编程框架,它用观察者设计模式. 常用来做异步数据处理,在安卓中用来代替传统的 AsyncTask + Handler 的组合结构. RxJava 架构简 ...

  2. GO学习笔记 - 没有条件的 switch 同 switch true 一样。

    官方教程:https://tour.go-zh.org/flowcontrol/11 没有条件的 switch 同 switch true 一样. 这一构造使得可以用更清晰的形式来编写长的 if-th ...

  3. ESXi到KVM之v2v迁移

    1.ESXi到KVM之v2v情况说明 (1).配置任务列表: 1)VMwareESXi虚拟平台下linux系统迁移到KVM虚拟平台.2)VMwareESXi虚拟平台下windows系统迁移到KVM虚拟 ...

  4. leecode刷题(18)-- 报数

    leecode刷题(18)-- 报数 报数 描述: 报数序列是一个整数序列,按照其中的整数的顺序进行报数,得到下一个数.其前五项如下: 1. 1 2. 11 3. 21 4. 1211 5. 1112 ...

  5. Java 设计模式——单例模式

    Java有很多的设计模式,但是让我们一个个分析出来,可能就一脸蒙逼了,今天就和大家一块来分析一下Java中的一些常用的设计模式.今天先分析单例模式 单例模式的好处 举个例子:有一个类,里面有若干个公共 ...

  6. (二)SSO之CAS框架单点退出,自定义退出界面.

    用CAS的退出,只能使用它自己的那个退出界面,如果有这样的要求, 要求退出后自动跳转到登录界面, 该如何做呢?下面这篇文章实现了退出后可以自定义跳转界面.  用了CAS,发现退出真是个麻烦事,退出后跳 ...

  7. python基础之循环

    一.while循环 如果条件成立(true),重复执行相同操作,条件不符合,跳出循环 while   循环条件: 循环操作 (1)while循环示例 例:输入王晓明5门课程的考试成绩,计算平均成绩 i ...

  8. python基础知识梳理-----7函数

    基本内容梳理 1:函数定义,函数名,函数体以及函数的调用方式 2:函数的返回值 3:函数的参数 4:函数---动态传参数 5:名称空间,局部名称的加载顺序,全局名称空间,作用域,加载顺序 6:函数的嵌 ...

  9. mysql随机取出若干条记录的实用方法

    1.常见的方法 ; 这种方法可以随机取得数据,但是如果表比较大,数据量很多的时候会很耗时. 2.优化后的方式 ) as t ); 分析,首先根据条件筛选出要选的数据,然后随机排序取出要的条数的id , ...

  10. BootStrap Modal 点击空白时自动关闭

    本文为大家讲解的是如何禁用 BootStrap Modal 点击空白时自动关闭的方法,感兴趣的同学参考下. 方法如下 $('#myModal').modal({backdrop: 'static', ...