动态与公告

【2025年1月2日】关于腾讯云小程序平台更名为腾讯云超级应用服务的公告

控制台更新动态

Android SDK 更新动态

iOS SDK 更新动态

Flutter 更新动态

IDE 更新动态

基础库更新动态

产品简介

产品概述

产品优势

应用场景

购买指南

计费概述

按量计费（后付费）

续费指引

停服说明

快速入门

套餐管理

概述

控制台账号管理

存储配置

加速配置

品牌化配置

平台功能

控制台登录

用户和权限体系

小程序管理

小游戏管理

应用管理

商业化

平台管理

用户管理

团队管理

运营管理

安全中心

代码接入指引

Demo 及 SDK 获取

Android

iOS

Flutter

App 服务端接入指南

GUID 生成规则

小程序开发指南

小程序介绍与开发环境

小程序代码组成

指南

框架

组件

API

服务端

JS SDK

基础库

IDE 使用指南

小游戏开发指南

指南

API

服务端

实践教程

小程序登录实践教程

小程序订阅消息实践教程

支付相关实践教程

广告接入实践教程

小游戏订阅消息实践教程

动画

PDF

聚焦模式

字号

最后更新时间： 2024-07-12 19:33:39

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 文件
<view
  animation="{{animationData}}"
  style="background:red;height:100rpx;width:100rpx"
></view>
对应的 js 文件
Page({
  data: {
    animationData: {}
  },
  onShow() {
    const animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease',
    })
﻿
    this.animation = animation
﻿
    animation.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 值。
参数及说明：numbe|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，x 轴的缩放倍数；number sy，y 轴的缩放倍数; number sz, z 轴的缩放倍数。
返回值：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 ax，对 X 轴坐标倾斜的角度，范围 [-180, 180]；number ay，对 Y 轴坐标倾斜的角度，范围 [-180, 180]。
返回值：Animation。
.skewX
该 方法 使用方式为  Animation Animation.skewX(number angle)
功能说明：对 X 轴坐标进行倾斜。
参数及说明：number angle，倾斜的角度，范围 [-180, 180]。
返回值：Animation。
.skewY
该 方法 使用方式为  Animation Animation.skewY(number angle)
功能说明：对 Y 轴坐标进行倾斜。
参数及说明：number angle，倾斜的角度，范围 [-180, 180]。
返回值：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； number tz，在 Z 轴平移的距离，单位为 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。

帮助和支持

本页内容是否解决了您的问题？

您也可以联系销售或提交工单以寻求帮助。

填写满意度调查问卷，共创更好文档体验。

文档反馈

属性	类型	默认值	必填	说明
duration	number	400	否	动画持续时间，单位：ms
timingFunction	string	'linear'	否	动画的效果
delay	number	0	否	动画延迟时间，单位：ms
transformOrigin	string	'50% 50% 0'	否	-

值	说明
'linear'	动画从头到尾的速度是相同的
'ease'	动画以低速开始，然后加快，在结束前变慢
'ease-in'	动画以低速开始
'ease-in-out'	动画以低速开始和结束
'ease-out'	动画以低速结束
'step-start'	动画第一帧就跳至结束状态直到结束
'step-end'	动画一直保持开始状态，最后一帧跳到结束状态

tencent cloud

腾讯云超级应用服务

动画

createAnimation

Animation

示例代码

.backgroundColor

.bottom

.export

.height

.left

.matrix

.matrix3d

.opacity

.right

.rotate

.rotate3d

.rotateX

.rotateY

.rotateZ

.scale

.scale3d

.scaleX

scaleY

.scaleZ

.skew

.skewX

.skewY

.step

.top

.translate

.translate3d

.translateX

.translateY

.translateZ

.width

帮助和支持