关键帧动画-动画_微信小程序_小程序模板

基础库 2.9.0 开始支持，低版本需做兼容处理。

从小程序基础库 2.9.0 开始支持一种更友好的动画创建方式，用于代替旧的 wx.createAnimation 。它具有更好的性能和更可控的接口。

在页面或自定义组件中，当需要进行关键帧动画时，可以使用 this.animate 接口：

this.animate(selector, keyframes, duration, callback)

参数说明

属性	类型	必填	说明
selector	String	是	选择器（同 SelectorQuery.select 的选择器格式）
keyframes	Array	是	关键帧信息
duration	Number	是	动画持续时长（毫秒为单位）
callback	function	否	动画完成后的回调函数

keyframes 中对象的结构

属性	类型	默认值	必填	说明
offset	Number		否	关键帧的偏移，范围[0-1]
ease	String	linear	否	动画缓动函数
transformOrigin	String	否	基点位置，即 CSS transform-origin
backgroundColor	String		否	背景颜色，即 CSS background-color
bottom	Number/String		否	底边位置，即 CSS bottom
height	Number/String		否	高度，即 CSS height
left	Number/String		否	左边位置，即 CSS left
width	Number/String		否	宽度，即 CSS width
opacity	Number		否	不透明度，即 CSS opacity
right	Number		否	右边位置，即 CSS right
top	Number/String		否	顶边位置，即 CSS top
matrix	Array		否	变换矩阵，即 CSS transform matrix
matrix3d	Array		否	三维变换矩阵，即 CSS transform matrix3d
rotate	Number		否	旋转，即 CSS transform rotate
rotate3d	Array		否	三维旋转，即 CSS transform rotate3d
rotateX	Number		否	X 方向旋转，即 CSS transform rotateX
rotateY	Number		否	Y 方向旋转，即 CSS transform rotateY
rotateZ	Number		否	Z 方向旋转，即 CSS transform rotateZ
scale	Array		否	缩放，即 CSS transform scale
scale3d	Array		否	三维缩放，即 CSS transform scale3d
scaleX	Number		否	X 方向缩放，即 CSS transform scaleX
scaleY	Number		否	Y 方向缩放，即 CSS transform scaleY
scaleZ	Number		否	Z 方向缩放，即 CSS transform scaleZ
skew	Array		否	倾斜，即 CSS transform skew
skewX	Number		否	X 方向倾斜，即 CSS transform skewX
skewY	Number		否	Y 方向倾斜，即 CSS transform skewY
translate	Array		否	位移，即 CSS transform translate
translate3d	Array		否	三维位移，即 CSS transform translate3d
translateX	Number		否	X 方向位移，即 CSS transform translateX
translateY	Number		否	Y 方向位移，即 CSS transform translateY
translateZ	Number		否	Z 方向位移，即 CSS transform translateZ

# 示例代码

在开发者工具中预览效果


  this.animate('#container', [
    { opacity: 1.0, rotate: 0, backgroundColor: '#FF0000' },
    { opacity: 0.5, rotate: 45, backgroundColor: '#00FF00'},
    { opacity: 0.0, rotate: 90, backgroundColor: '#FF0000' },
    ], 5000, function () {
      this.clearAnimation('#container', { opacity: true, rotate: true }, function () {
        console.log("清除了#container上的opacity和rotate属性")
      })
  }.bind(this))

  this.animate('.block', [
    { scale: [1, 1], rotate: 0, ease: 'ease-out'  },
    { scale: [1.5, 1.5], rotate: 45, ease: 'ease-in', offset: 0.9},
    { scale: [2, 2], rotate: 90 },
  ], 5000, function () {
    this.clearAnimation('.block', function () {
      console.log("清除了.block上的所有动画属性")
    })
  }.bind(this))

调用 animate API 后会在节点上新增一些样式属性覆盖掉原有的对应样式。如果需要清除这些样式，可在该节点上的动画全部执行完毕后使用 this.clearAnimation 清除这些属性。

this.clearAnimation(selector, options, callback)

参数说明

属性	类型	必填	说明
selector	String	是	选择器（同 SelectorQuery.select 的选择器格式）
options	Object	否	需要清除的属性，不填写则全部清除
callback	Function	否	清除完成后的回调函数

关键帧动画-动画_微信小程序

# 示例代码

推荐文章

网站介绍