微信小程序——动画操作时,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。
微信提供的函数可以同步获取到设备信息。
// 在 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 的转换计算。的更多相关文章
- 微信小程序动画:高度渐变,left渐变
今天在测试微信小程序动画的时候遇到了坑,需求是这样的点击时子元素从外部滑动回来,父元素的高度跟随子元素的高度改变. 实现子元素left为0并不复杂,但是改变父元素box的高度的时候却遇到了坑,因为是需 ...
- 微信小程序动画之圆形进度条
微信小程序动画之圆形进度条 上图: js: //获取应用实例 var app = getApp() var interval; var varName; var ctx = wx.createCanv ...
- 微信小程序动画实现(API,css)
微信小程序动画API实现 index.js clicktap:function(){ var Animation=wx.createAnimation({ duration: 2000, }) Ani ...
- 微信小程序的尺寸单位rpx介绍
rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375 ...
- 微信小程序相关操作
显示用户基本信息 在微信小程序中,经常会碰到需要展示微信用户的基本信息,如果只是为了显示用户信息,最简单有效的办法是使用open-data,这是微信小程序内置的用于展示微信开放数据的组件,通过改变ty ...
- 如何实现微信小程序动画?添加到我的小程序动画实现详细讲解,轻松学会动画开发!附壁纸小程序源码下载链接
为了让用户能尽可能多地使用小程序,也算是沉淀用户,现在很多小程序中,都有引导用户"添加到我的小程序"的操作提示,而且大多都是有动画效果.在高清壁纸推荐小程序首页,用户每次进入,都会 ...
- 微信小程序动画技巧
用微信小程序自带的wx.createAnimation api可创建动画,该动画效果相比css写的动画更流畅. 栗子与用法,见官网:https://mp.weixin.qq.com/debug/wxa ...
- 微信小程序动画之弹出菜单
用微信小程序做了一个动画,效果如上图: 代码: js: Page({ data: { isPopping: false, animPlus: {}, animCollect: {}, animTran ...
- 微信小程序获取formId时提示"the formId is a mock one"
微信小程序使用模板消息需要使用表单提交 formId,因此进行了简单的代码测试,在 wxml 文件中创建 form 对象,并在 form 标签中声明属性 report-submit="tru ...
随机推荐
- AutoMapper之如何开始,适合入门和演示
原来想应该介绍下背景说明下好处什么的,仔细想都是废话 ,直接上代码吧. 首先有两个类,一个是和数据库对应的实体 Student,一个是和页面展示相关的页面模型 StudentModel. /// &l ...
- CentOS7.x下安装VNC
1.检查是否安装VNC rpm -q tigervnc tigervnc-server 2.安装X-Window yum check-update yum groupinstall "X W ...
- “全栈2019”Java多线程第五章:线程睡眠sleep()方法详解
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...
- java实际项目中interface和abstract interface 区别
参考:https://zhidao.baidu.com/question/424485344260391052.html 这2种有什么区别,根据实际项目经验 帮我解答下 谢谢啊~~~~~~~~~问题补 ...
- P5277 【模板】多项式开根(加强版)(bsgs or Cipolla)
题面 传送门 题解 首先你得会多项式开根->这里 其次你得会解形如 \[x^2\equiv a \pmod{p}\] 的方程 这里有两种方法,一个是\(bsgs\)(这里),还有一种是\(Cip ...
- 解决 MySQL 1045错误的三种方法 (转)
连接MySQL数据库时难免会遇到1045错误,主要是因为用户输入的用户名或密码错误被拒绝访问,如果不想重装,需要找回密码或者重置密码. 问题描述: 1045-Access denied for use ...
- springboot 配置webservice接口
导入依赖的jar <!-- webservice cxf --> <dependency> <groupId>org.apache.cxf</groupId& ...
- 寻找第K大的数(快速排序的应用)
有一个整数数组,请你根据快速排序的思路,找出数组中第K大的数.给定一个整数数组a,同时给定它的大小n和要找的K(K在1到n之间),请返回第K大的数,保证答案存在.测试样例:[1,3,5,2,2],5, ...
- 【实战】Weblogic反序列化Getshell
修仙就是干,直接操作起来 1.访问http://x.x.x.x:7001/wls-wsat/CoordinatorPortType 2.加入Content-Type:text/xml 3.在body中 ...
- Vue.js 动态挂载子组件
直接来实例 父组件 <template> <div> <div :is="sub.content" :ref="sub.name" ...