createAnimation
该 API 使用方法为 wx.createAnimation(Object object)
功能说明:创建一个动画实例 animation。调用实例的方法来描述动画。最后通动画实例的 export 方法导出动画数据传递给组件的 animation 属性。
参数及说明:Object object。
属性 | 类型 | 默认值 | 必填 | 说明 |
duration | number | 400 | 否 | 动画持续时间,单位:ms |
timingFunction | string | 'linear' | 否 | 动画的效果 |
delay | number | 0 | 否 | 动画延迟时间,单位:ms |
transformOrigin | string | '50% 50% 0' | 否 | - |
timingFunction 的合法值
值 | 说明 |
'linear' | 动画从头到尾的速度是相同的 |
'ease' | 动画以低速开始,然后加快,在结束前变慢 |
'ease-in' | 动画以低速开始 |
'ease-in-out' | 动画以低速开始和结束 |
'ease-out' | 动画以低速结束 |
'step-start' | 动画第一帧就跳至结束状态直到结束 |
'step-end' | 动画一直保持开始状态,最后一帧跳到结束状态 |
返回值:Animation。
Animation
动画对象
示例代码
对应的 WXML 文件
<viewanimation="{{animationData}}"style="background:red;height:100rpx;width:100rpx"></view>
对应的 js 文件
Page({data: {animationData: {}},onShow() {const animation = wx.createAnimation({duration: 1000,timingFunction: 'ease',})this.animation = animationanimation.scale(2, 2).rotate(45).step()this.setData({animationData: animation.export()})setTimeout(function () {animation.translate(30).step()this.setData({animationData: animation.export()})}.bind(this), 1000)},rotateAndScale() {// 旋转同时放大this.animation.rotate(45).scale(2, 2).step()this.setData({animationData: this.animation.export()})},rotateThenScale() {// 先旋转后放大this.animation.rotate(45).step()this.animation.scale(2, 2).step()this.setData({animationData: this.animation.export()})},rotateAndScaleThenTranslate() {// 先旋转同时放大,然后平移this.animation.rotate(45).scale(2, 2).step()this.animation.translate(100, 100).step({duration: 1000})this.setData({animationData: this.animation.export()})}})
.backgroundColor
该 方法 使用方式为 Animation Animation.backgroundColor(string value)
功能说明:设置背景色。
参数及说明:string value,颜色值。
返回值:Animation。
.bottom
该 方法 使用方式为 Animation Animation.bottom(number|string value)
功能说明:设置 bottom 值。
参数及说明:number|string value,长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值。
返回值:Animation。
.export
该 API 方法的使用方法为 Object Animation.export()
功能说明:导出动画队列。export 方法每次调用后会清掉之前的动画操作。
返回值:Object,animationData。
属性 | 类型 |
actions | Array.<Object> |
.height
该 方法 使用方式为 Animation Animation.height(number|string value)
功能说明:设置高度。
参数及说明:number|string value,长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值。
返回值:Animation。
.left
该 方法 使用方式为 Animation Animation.left(number|string value)
功能说明:设置 left 值。
参数及说明:number|string value,长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值。
返回值:Animation。
.matrix
该 API 使用方法为 Animation Animation.matrix()
功能说明:同 transform-function matrix一致。
返回值:Animation。
.matrix3d
该 API 使用方法为 Animation Animation.matrix3d()
功能说明:同 transform-function matrix一致。
返回值:Animation。
.opacity
该 方法 使用方式为 Animation Animation.opacity(number value)
功能说明:设置透明度。
参数及说明:number value,透明度,范围 0-1。
返回值:Animation。
.right
该 方法 使用方式为 Animation Animation.right(number|string value)
功能说明:设置 right 值。
参数及说明:number|string value,长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值。
返回值:Animation。
.rotate
该 API 使用方法为
功能说明:从原点顺时针旋转一个角度,使用方法为 Animation Animation.rotate(number angle)。
参数及说明:number angle,旋转的角度。范围 [-180, 180]。
返回值:Animation。
.rotate3d
该 API 使用方法为 Animation Animation.rotate3d(number x, number y, number z, number angle)
功能说明:从固定轴顺时针旋转一个角度。
参数及说明:number x,旋转轴的 x 坐标;number y,旋转轴的 y 坐标;number z,旋转轴的 z 坐标;number angle,旋转的角度。范围 [-180, 180]。
返回值:Animation。
.rotateX
该 API 使用方法为 Animation Animation.rotateX(number angle)
功能说明:从 X 轴顺时针旋转一个角度。
参数及说明:number angle,旋转的角度。范围 [-180, 180]。
返回值:Animation。
.rotateY
该 方法 使用方式为 Animation Animation.rotateY(number angle)
功能说明:从 Y 轴顺时针旋转一个角度。
参数及说明:number angle,旋转的角度。范围 [-180, 180]。
返回值:Animation。
.rotateZ
该 方法 使用方式为 Animation Animation.rotateZ(number angle)
功能说明:从 Z 轴顺时针旋转一个角度。
参数及说明:number angle,旋转的角度。范围 [-180, 180]。
返回值:Animation。
.scale
该 方法 使用方式为 Animation Animation.scale(number sx, number sy)
功能说明:缩放。
参数及说明:number sx,当仅有 sx 参数时,表示在 X 轴、Y 轴同时缩放sx倍数;number sy,在 Y 轴缩放 sy 倍数。
返回值:Animation。
.scale3d
该 方法 使用方式为 Animation Animation.scale3d(number sx, number sy, number sz)
功能说明:缩放。
参数及说明:number sx,当仅有 sx 参数时,表示在 X 轴、Y 轴同时缩放sx倍数;number sy,在 Y 轴缩放 sy 倍数。
返回值:Animation。
.scaleX
该 方法 使用方式为 Animation Animation.scaleX(number scale)
功能说明:缩放 X 轴。
参数及说明:number scale,X 轴的缩放倍数。
返回值:Animation。
scaleY
该 方法 使用方式为 Animation Animation.scaleY(number scale)
功能说明:缩放 Y 轴。
参数及说明:number scale,Y 轴的缩放倍数。
返回值:Animation。
.scaleZ
该 方法 使用方式为 Animation Animation.scaleZ(number scale)
功能说明:缩放 Z 轴。
参数及说明:number scale,Z 轴的缩放倍数。
返回值:Animation。
.skew
该 方法 使用方式为 Animation Animation.skew(number ax, number ay)
功能说明:对 X、Y 轴坐标进行倾斜。
参数及说明:number sx,当仅有 sx 参数时,表示在 X 轴、Y 轴同时缩放sx倍数;number sy,在 Y 轴缩放 sy 倍数。
返回值:Animation。
.skewX
该 方法 使用方式为 Animation Animation.skewX(number angle)
功能说明:对 X 轴坐标进行倾斜。
参数及说明:number scale,X 轴的缩放倍数。
返回值:Animation。
.skewY
该 方法 使用方式为 Animation Animation.skewY(number angle)
功能说明:对 Y 轴坐标进行倾斜。
参数及说明:number scale,Y 轴的缩放倍数。
返回值:Animation。
.step
该 API 使用方法为 Animation Animation.step(Object object)
功能说明:表示一组动画完成。可以在一组动画中调用任意多个动画方法,一组动画中的所有动画会同时开始,一组动画完成后才会进行下一组动画。
参数及说明:Object object。
属性 | 类型 | 默认值 | 必填 | 说明 |
duration | number | 400 | 否 | 动画持续时间,单位 ms |
timingFunction | string | 'linear' | 否 | 动画的效果 |
delay | number | 0 | 否 | 动画延迟时间,单位 ms |
transformOrigin | string | '50% 50% 0' | 否 | - |
timingFunction 的合法值
值 | 说明 |
'linear' | 动画从头到尾的速度是相同的 |
'ease' | 动画以低速开始,然后加快,在结束前变慢 |
'ease-in' | 动画以低速开始 |
'ease-in-out' | 动画以低速开始和结束 |
'ease-out' | 动画以低速结束 |
'step-start' | 动画第一帧就跳至结束状态直到结束 |
'step-end' | 动画一直保持开始状态,最后一帧跳到结束状态 |
返回值:Animation。
.top
该 方法 使用方式为 Animation Animation.top(number|string value)
功能说明:设置 top 值。
参数及说明:number|string value,长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值。
返回值:Animation。
.translate
该 方法 使用方式为 Animation Animation.translate(number tx, number ty)
功能说明:平移变换。
参数及说明:number tx,当仅有该参数时表示在 X 轴偏移 tx,单位 px;number ty,在 Y 轴平移的距离,单位为 px。
返回值:Animation。
.translate3d
该 方法 使用方式为 Animation Animation.translate3d(number tx, number ty, number tz)
功能说明:对 xyz 坐标进行平移变换。
参数及说明:number tx,当仅有该参数时表示在 X 轴偏移 tx,单位 px;number ty,在 Y 轴平移的距离,单位为 px。
返回值:Animation。
.translateX
该 方法 使用方式为 Animation Animation.translateX(number translation)
功能说明:对 X 轴平移。
参数及说明:number translation,在 X 轴平移的距离,单位为 px。
返回值:Animation。
.translateY
该 方法 使用方式为 Animation Animation.translateY(number translation)
功能说明:对 Y 轴平移。
参数及说明:number translation,在 Y 轴平移的距离,单位为 px。
返回值:Animation。
.translateZ
该 方法 使用方式为 Animation Animation.translateZ(number translation)
功能说明:对 Z 轴平移。
参数及说明:number translation,在 Z 轴平移的距离,单位为 px。
返回值:Animation。
.width
该 方法 使用方式为 Animation Animation.width(number|string value)
功能说明:设置宽度,使用方法为。
参数及说明:number|string value,长度值,如果传入 number 则默认使用 px,可传入其他自定义单位的长度值。
返回值:Animation。