在使用 uni.createAnimation 创建动画时，你可以使用多种效果来控制动画的不同属性。以下是一个表格，列出了常见的动画效果及其方法：

动画效果 方法名 描述
透明度 opacity(value) 设置透明度，范围从 0 到 1
旋转 rotate(deg) 旋转，以度为单位
绕 X 轴旋转 rotateX(deg) 绕 X 轴旋转，以度为单位
绕 Y 轴旋转 rotateY(deg) 绕 Y 轴旋转，以度为单位
绕 Z 轴旋转 rotateZ(deg) 绕 Z 轴旋转，以度为单位
缩放 scale(s) 缩放，传入一个值，范围从 0 到 1
缩放 X 轴 scaleX(s) 缩放 X 轴，传入一个值，范围从 0 到 1
缩放 Y 轴 scaleY(s) 缩放 Y 轴，传入一个值，范围从 0 到 1
缩放 Z 轴 scaleZ(s) 缩放 Z 轴，传入一个值，范围从 0 到 1
偏移 translate(tx, ty) 偏移，分别为 X 轴和 Y 轴的偏移量
偏移 X 轴 translateX(tx) 偏移 X 轴，单位为 px
偏移 Y 轴 translateY(ty) 偏移 Y 轴，单位为 px
偏移 Z 轴 translateZ(tz) 偏移 Z 轴，单位为 px
倾斜 skew(ax, ay) 倾斜，分别为 X 轴和 Y 轴的倾斜角度
倾斜 X 轴 skewX(ax) 倾斜 X 轴，以度为单位
倾斜 Y 轴 skewY(ay) 倾斜 Y 轴，以度为单位
矩阵变换 matrix(a, b, c, d, tx, ty) 矩阵变换，参数分别为 a, b, c, d, tx, ty
矩阵变换 3D matrix3d(...) 矩阵变换 3D，接受 16 个参数
宽度变化 width(value) 设置宽度，单位为 px
高度变化 height(value) 设置高度，单位为 px
顶部偏移 top(value) 设置顶部偏移，单位为 px
左侧偏移 left(value) 设置左侧偏移，单位为 px
底部偏移 bottom(value) 设置底部偏移，单位为 px
右侧偏移 right(value) 设置右侧偏移，单位为 px
背景色变化 backgroundColor(color) 设置背景色，接受一个颜色值
高斯模糊 blur(radius) 设置高斯模糊，接受一个半径值

示例代码

下面是一个使用多种动画效果的示例代码：

<template>
  <view class="container">
    <view class="box" :animation="animationData"></view>
    <button @click="startAnimation">Start Animation</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      animationData: {}
    };
  },
  methods: {
    startAnimation() {
      const animation = uni.createAnimation({
        duration: 1000,
        timingFunction: 'ease-in-out'
      });

      animation
        .opacity(0.5)
        .rotate(45)
        .scale(1.5)
        .translate(50, 50)
        .backgroundColor('#ff0000')
        .step();

      this.animationData = animation.export();
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin-top: 20px;
}

button {
  margin-top: 20px;
}
</style>

这个示例演示了如何使用 uni.createAnimation 创建一个复杂的动画，包括透明度、旋转、缩放、平移和背景色变化。你可以根据需要调整和组合这些动画效果来实现你的需求。

timingFunction

uni.createAnimation 的 timingFunction 参数用于指定动画的缓动函数（easing function），它决定了动画的速度变化方式。常用的 timingFunction 类型有以下几种：

类型 描述
linear 动画从头到尾的速度是相同的。
ease 动画以低速开始，然后加速，在结束前变慢。
ease-in 动画以低速开始。
ease-in-out 动画以低速开始和结束。
ease-out 动画以低速结束。
step-start 动画一开始就跳到最终状态。
step-end 动画在结束前保持初始状态，然后突然跳到最终状态。

这些缓动函数用于控制动画的过渡效果，使动画显得更加自然和流畅。

示例代码

下面是一个使用不同 timingFunction 类型的示例代码：

<template>
  <view class="container">
    <view class="box" :animation="animationData"></view>
    <button @click="startAnimation('linear')">Linear</button>
    <button @click="startAnimation('ease')">Ease</button>
    <button @click="startAnimation('ease-in')">Ease-in</button>
    <button @click="startAnimation('ease-in-out')">Ease-in-out</button>
    <button @click="startAnimation('ease-out')">Ease-out</button>
    <button @click="startAnimation('step-start')">Step-start</button>
    <button @click="startAnimation('step-end')">Step-end</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      animationData: {}
    };
  },
  methods: {
    startAnimation(timingFunction) {
      const animation = uni.createAnimation({
        duration: 1000,
        timingFunction: timingFunction
      });

      animation.width('300px').step();
      this.animationData = animation.export();
    }
  }
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 1s ease-in-out;
}

button {
  margin-top: 10px;
}
</style>

详细说明

  1. 模板部分：

    • 创建多个按钮，每个按钮对应一种 timingFunction 类型。
    • 通过 :animation="animationData" 绑定动画数据。

  2. 脚本部分：

    • data 中定义 animationData 用于保存动画数据。
    • methods 中定义 startAnimation 方法，接受一个 timingFunction 参数。
    • 使用 uni.createAnimation 创建动画实例，设置动画持续时间和缓动函数。
    • 修改元素宽度，并调用 step() 方法生成动画步骤。
    • 使用 animation.export() 导出动画数据，并更新到 animationData。

  3. 样式部分：

    • 定义基本样式，使动画效果可见。
    • 使用 transition 属性定义宽度变化的动画效果。

通过这些缓动函数，你可以创建出不同的动画效果，满足各种需求。