微信小程序动画（二）：旋转

种一颗树，最好的时机是十年期，而后是现在。
The best time to plant a tree was twenty years ago. The second-best time is now.

在微信小程序中，提供了这样一个API——wx.createAnimation(Object object)。该API创建一个动画实例 animation。调用实例的方法来描述动画。

本文主要介绍animation实例的旋转相关的方法及其使用。

假设我们创建了这样一个实例：

this.animationData = wx.createAnimation({duration: 1000
})

1. Animation.rotate(number angle) 从原点顺时针旋转一个角度（可理解为沿着Z轴旋转，等价于Animation.rotateZ(number angle)）
参数angle：旋转的角度。范围 [-180, 180]

核心代码：
this.animationData.rotate(45).step()

效果如下

如果angle为负数，则表示逆时针旋转

核心代码：
this.animationData.rotate(-45).step()

效果如下

2. Animation.rotateX(number angle) 从 X 轴顺时针旋转一个角度

核心代码：
this.animationData.rotateX(45).step()

效果如下

3. Animation.rotateY(number angle) 从 Y轴顺时针旋转一个角度

核心代码：
this.animationData.rotateY(45).step()

效果如下

4. Animation.rotateZ(number angle) 从 Z轴顺时针旋转一个角度

核心代码：
this.animationData.rotateZ(45).step()

效果如下

5. Animation.rotate3d(number x, number y, number z, number angle) 从固定轴顺时针旋转一个角度

参数：
number x
旋转轴的 x 坐标

number y
旋转轴的 y 坐标

number z
旋转轴的 z 坐标

number angle
旋转的角度。范围 [-180, 180]

这里的x,y,z可以理解为空间直角坐标系（x,y,z）和原点确定一个轴，然后在该轴上旋转angle的角度

核心代码：
this.animationData.rotate3d(10,10,10,45).step()

效果如下

对于空间理解力较差的同学，这里有张图可以帮助理解：

x、y轴分别为标签中心线，z轴垂直标签中心点
以rorateX为例：围绕x轴旋转时，转动x轴即可。【方向：让+x插向自己，旋转度数为正时，顺时针】

注：以上效果均设置过渡时间为1000ms，即1s

微信小程序动画（二）：旋转相关推荐

微信小程序动画(七)：让页面动起来
本文默认读者已具备小程序基本动画api,如不了解可先阅读相关的详细介绍文章: 微信小程序动画(一):样式微信小程序动画(二):旋转微信小程序动画(三):缩放微信小程序动画(四):平移微信小程序 ...
微信小程序动画效果,小程序animation动画
微信小程序动画效果最近一直在做小程序开发,在官方文档中无意间看到过渡动画效果,我就有点小激动,用每一个开发框架的时候我都最先研究动画和过渡闲来无事写了一个小demo <!--wxml代码-- ...
微信小程序--动画animation
微信小程序--动画animation 一. 获取需要实现动画效果的元素 1. 微信小程序获取元素节点: 2. 合适的生命周期调用二.动画 1. 创建动画 2. 监听动画 3. 动画循环播放一. 获 ...
【微信小程序】二维码跳转规则的前缀匹配是什么意思？
前言基础库 2.12.0 开发者工具 1.03.2008270 微信小程序的二维码跳转规则为了方便小程序开发者更便捷地推广小程序,兼容线下已有的二维码,微信公众平台开放扫描普通链接二维码跳转小程序 ...
微信小程序入门二：底部导航tabBar
小程序底部导航栏组件tabBar,可以参考下官方的API:tabBar 先看代码 //app.json {"pages":["pages/index/index" ...
微信小程序获取二维码中URL中带的参数
解析微信小程序获取二维码中的url参数 onLoad: function (options) { console.log(options) let qrUrl = decodeURIComponent ...
微信小程序普通二维码解析
1.区别于微信小程序官方二维码是直接从onLoad的 options 解构出来就行,它是一个对象,这个大家都知道. 2.普通二维码也是从onLoad的 options 里解构出来,此时options ...
微信小程序：二开版优化新紫色UI云开发新款壁纸小程序源码
这是一款由旧版https://airymz.com/3387.html进行优化二开的一个新版本本壁纸表情包头像小程序采用(dcloud云开发)所以无需服务器与域名无需服务器.无需域名.云开发直接上 ...
微信小程序扫描二维码或者条码
程序是需要扫描条形码然后跳转到对应的产品信息页,其实微信小程序就有一个扫码识别的API,下面一起来看看: wx.scanCode(Object object) 调起客户端扫码界面进行扫码. 示例代码: ...
微信小程序项目实例——二维码生成器
微信小程序项目实例--二维码生成器文章目录微信小程序项目实例--二维码生成器一.项目展示二.项目核心代码三.效果展示文末项目代码见文字底部,点赞关注有惊喜一.项目展示项目是一个简单实 ...

微信小程序动画（二）：旋转

微信小程序动画（二）：旋转相关推荐

最新文章

热门文章