微信小程序动画（三）：缩放

种一颗树，最好的时机是十年期，而后是现在。
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.scale(number sx, number sy) X 轴、Y 轴同时缩放sx倍数，>1为放大，<1缩小。

参数：
number sx
当仅有 sx 参数时，表示在 X 轴、Y 轴同时缩放sx倍数

number sy
在 Y 轴缩放 sy 倍数

核心代码：
this.animationData.scale(0.2, 1.2).step()

效果如下

也可以只设置一个参数，表示仅仅在x轴方向进行缩放。设置一个参数时，等同于scaleX(）方法

核心代码：
this.animationData.scale(1.2).step()

效果如下

如果 sx为负数，则先缩放至0倍，再放大至sx的绝对值倍

核心代码：
this.animationData.scale(-1.5).step()

效果如下

2. Animation.scaleX(number scale) 缩放 X 轴

核心代码：
this.animationData.scaleX(1.2).step()

效果如下

3. Animation.scaleY(number scale) 缩放 Y 轴

核心代码：
this.animationData.scaleY(1.2).step()

效果如下

4. Animation.scaleZ(number scale) 缩放 Z 轴

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

视觉上没变化，沿着z轴缩放，就是正方形变成长方体的过程，只是我们是正面图，无法肉眼感知。
效果如下

5. Animation.scale3d(number sx, number sy, number sz) 缩放

参数：
number sx
x 轴的缩放倍数

number sy
y 轴的缩放倍数

number sz
z 轴的缩放倍数

核心代码：
this.animationData.scale3d(1.2, 0.2, 6).step()

效果如下

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

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

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

微信小程序动画（三）：缩放相关推荐

微信小程序动画-倒计时缩放
刚接触小程序,项目需要做个动画的倒计时,本来css3的animation用着挺好,但考虑到,微信提供了这个东东,那在这里就尝试用一用微信小程序的wx.animation,我理解的小程序动画就是用js来 ...
微信小程序动画(七)：让页面动起来
本文默认读者已具备小程序基本动画api,如不了解可先阅读相关的详细介绍文章: 微信小程序动画(一):样式微信小程序动画(二):旋转微信小程序动画(三):缩放微信小程序动画(四):平移微信小程序 ...
微信小程序动画之圆形进度条
微信小程序动画之圆形进度条上图: 代码: js: //获取应用实例 var app = getApp()var interval; var varName; var ctx = wx.createC ...
微信小程序（三个小点）颜色显示问题
微信小程序(三个小点)颜色显示问题修改加载图标的默认颜色在已经添加下拉刷新页面对应的json文件中添加 "backgroundTextStyle": "dark&qu ...
微信小程序动画执行一次问题
微信小程序动画执行一次解决方法简单总结一下微信动画的实现及执行步骤(更新data使用的方式和vue一样直接this.data=""). const anim = wx.creat ...
微信小程序动画渐入以及动态存值setdata问题
微信小程序动画渐入以及动态存值setdata问题想要在微信小程序中制作多个元素逐一渐入的效果,效果类似下图: 首先参考微信开发文档API动画部分的内容开发文档API–动画Animation 创建动 ...
微信小程序动画效果,小程序animation动画
微信小程序动画效果最近一直在做小程序开发,在官方文档中无意间看到过渡动画效果,我就有点小激动,用每一个开发框架的时候我都最先研究动画和过渡闲来无事写了一个小demo <!--wxml代码-- ...
微信小程序实现双指缩放图片功能
前言本文分析怎么在微信小程序实现双指缩放图片的功能. 实现过程 1. 文件index.wxml和index.wxss代码如下,这一块比较简单,可自行查看,不做过多分析: <!--index.w ...
微信小程序--动画animation
微信小程序--动画animation 一. 获取需要实现动画效果的元素 1. 微信小程序获取元素节点: 2. 合适的生命周期调用二.动画 1. 创建动画 2. 监听动画 3. 动画循环播放一. 获 ...

微信小程序动画（三）：缩放

微信小程序动画（三）：缩放相关推荐

最新文章

热门文章