微信小程序动画（四）：平移

种一颗树，最好的时机是十年期，而后是现在。
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.translate(number tx, number ty) 平移变换

参数：
number tx
当仅有该参数时表示在 X 轴偏移 tx，单位 px

number ty
在 Y 轴平移的距离，单位为 px

核心代码：
this.animationData.translate(80, 100).step()

效果如下

2. Animation.translateX(number translation) 对 X 轴平移

核心代码：
this.animationData.translateX(100).step()

效果如下

3. Animation.translateY(number translation) 对 Y 轴平移

核心代码：
this.animationData.translateY(100).step()

效果如下

4. Animation.translateZ(number translation) 对 Z 轴平移

核心代码：
this.animationData.translateZ(100).step()

视觉上没变化，沿着z轴平移，即将图像正推或者逆推的过程，只是我们是正面图，无法肉眼感知。
效果如下

5. Animation.translate3d(number tx, number ty, number tz) 对 xyz 坐标进行平移变换

参数：
number tx
在 X 轴平移的距离，单位为 px

number ty
在 Y 轴平移的距离，单位为 px

number tz
在 Z 轴平移的距离，单位为 px

核心代码：
this.animationData.translate3d(80, 100, 50).step()

效果如下

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

x、y轴分别为标签中心线，z轴垂直标签中心点

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

微信小程序动画（四）：平移相关推荐

微信小程序动画(七)：让页面动起来
本文默认读者已具备小程序基本动画api,如不了解可先阅读相关的详细介绍文章: 微信小程序动画(一):样式微信小程序动画(二):旋转微信小程序动画(三):缩放微信小程序动画(四):平移微信小程序 ...
微信小程序--动画animation
微信小程序--动画animation 一. 获取需要实现动画效果的元素 1. 微信小程序获取元素节点: 2. 合适的生命周期调用二.动画 1. 创建动画 2. 监听动画 3. 动画循环播放一. 获 ...
微信小程序动画之圆形进度条
微信小程序动画之圆形进度条上图: 代码: js: //获取应用实例 var app = getApp()var interval; var varName; var ctx = wx.createC ...
java基于微信小程序的四六级英语学习测试系统 uinapp 计算机毕业设计
通过本课题的研究与分析,能够建立一种基于微信小程序的四六级助手系统,以MySQL为数据库,后端采用Java语言SSM框架,并对系统中的各个模块功能及它们之间相互协调工作进行了详细的分析与设计:尤其是对 ...
微信小程序动画执行一次问题
微信小程序动画执行一次解决方法简单总结一下微信动画的实现及执行步骤(更新data使用的方式和vue一样直接this.data=""). const anim = wx.creat ...
微信小程序动画渐入以及动态存值setdata问题
微信小程序动画渐入以及动态存值setdata问题想要在微信小程序中制作多个元素逐一渐入的效果,效果类似下图: 首先参考微信开发文档API动画部分的内容开发文档API–动画Animation 创建动 ...
微信小程序动画效果,小程序animation动画
微信小程序动画效果最近一直在做小程序开发,在官方文档中无意间看到过渡动画效果,我就有点小激动,用每一个开发框架的时候我都最先研究动画和过渡闲来无事写了一个小demo <!--wxml代码-- ...
mpvue微信小程序动画_mpvue 与微信小程序的火花
介绍项目介绍 WeScale 定位为音乐训练小程序,初期规划了基础音阶的三个训练,以及他们的镜像模式. 数字简谱字母简谱数字简谱对字母简谱后期看情况更新追加其他训练. 产品展示扫描下方小程序 ...
微信小程序框架(四)-全面详解（学习总结---从入门到深化）
目录路由_navigateTo 页面跳转携带参数返回上一级页面路由_redirectTo 页面跳转路由_reLaunch 页面跳转路由_switchTab 实现 tabbar 页面跳转交 ...

微信小程序动画（四）：平移

微信小程序动画（四）：平移相关推荐

最新文章

热门文章