xtf-linkuiunix

Appearance

XtfViewAnimation ​

XtfViewAnimation 基于 UniElement.animate 封装单目标、并行和序列动画。它是独立工具，不计入 112 个组件；当前源码包含 101 个 preset。

1. 基础播放 ​

vue
<template>
  <view class="animation-basic">
    <view ref="target" class="animation-target"><text class="animation-text">账单</text></view>
    <button class="animation-button" @click="play">播放淡入</button>
  </view>
</template>
<script setup lang="uts">
import { ref } from "vue"
import { XtfViewAnimation } from "@/uni_modules/xtf-linkuiunix/libs/utils/xtf-view-animation.uts"
const target = ref<UniElement | null>(null)
let animation: UniAnimation | null = null
function play(): void { animation = XtfViewAnimation.play(target.value, "fade-in-up", { duration: 360, onFinish: () => console.log("基础动画完成") }) }
</script>
<style>
.animation-basic { display: flex; flex-direction: column; padding: 24rpx; }
.animation-target { display: flex; flex-direction: row; align-items: center; justify-content: center; height: 180rpx; background-color: #e0f2fe; }
.animation-text { color: #075985; font-size: 32rpx; }
.animation-button { margin-top: 16rpx; }
</style>

2. 并行动画 ​

vue
<template>
  <view class="animation-parallel">
    <view class="animation-row"><view ref="left" class="animation-box"><text class="animation-text">收入</text></view><view ref="right" class="animation-box"><text class="animation-text">支出</text></view></view>
    <button class="animation-button" @click="playParallel">并行播放</button>
  </view>
</template>
<script setup lang="uts">
import { ref } from "vue"
import { XtfViewAnimation, type XtfViewAnimationTask } from "@/uni_modules/xtf-linkuiunix/libs/utils/xtf-view-animation.uts"
const left = ref<UniElement | null>(null)
const right = ref<UniElement | null>(null)
let animations = [] as UniAnimation[]
function playParallel(): void {
  XtfViewAnimation.cancelAll(animations)
  const tasks = [{ element: left.value, preset: "bounce-in-left", options: { duration: 420 } }, { element: right.value, preset: "rotate-in", options: { duration: 420, onFinish: () => console.log("并行动画完成") } }] as XtfViewAnimationTask[]
  animations = XtfViewAnimation.playParallel(tasks)
}
</script>
<style>
.animation-parallel { display: flex; flex-direction: column; padding: 24rpx; }
.animation-row { display: flex; flex-direction: row; justify-content: space-between; }
.animation-box { display: flex; flex-direction: row; align-items: center; justify-content: center; width: 46%; height: 140rpx; background-color: #dcfce7; }
.animation-text { color: #166534; font-size: 28rpx; }
.animation-button { margin-top: 16rpx; }
</style>

3. 序列与暂停 ​

vue
<template>
  <view class="animation-sequence">
    <view ref="target" class="animation-sequence-target"><text class="animation-text">同步完成</text></view>
    <view class="animation-controls"><button class="animation-control" @click="start">开始序列</button><button class="animation-control" @click="pause">暂停</button><button class="animation-control" @click="resume">继续</button></view>
  </view>
</template>
<script setup lang="uts">
import { ref } from "vue"
import { XtfViewAnimation, type XtfViewAnimationSequence, type XtfViewAnimationSequenceStep } from "@/uni_modules/xtf-linkuiunix/libs/utils/xtf-view-animation.uts"
const target = ref<UniElement | null>(null)
let sequence: XtfViewAnimationSequence | null = null
const steps = [{ preset: "fade-in-up", options: { duration: 320 } }, { preset: "pulse", options: { duration: 320 } }, { preset: "fade-out-down", options: { duration: 320, onFinish: () => console.log("序列完成") } }] as XtfViewAnimationSequenceStep[]
function start(): void { XtfViewAnimation.cancelSequence(sequence); sequence = XtfViewAnimation.playSequence(target.value, steps) }
function pause(): void { XtfViewAnimation.pauseSequence(sequence) }
function resume(): void { XtfViewAnimation.resumeSequence(sequence) }
</script>
<style>
.animation-sequence { display: flex; flex-direction: column; padding: 24rpx; }
.animation-sequence-target { display: flex; flex-direction: row; align-items: center; justify-content: center; height: 160rpx; background-color: #fef3c7; }
.animation-controls { display: flex; flex-direction: row; margin-top: 16rpx; }
.animation-control { margin-right: 12rpx; }
.animation-text { color: #92400e; font-size: 28rpx; }
</style>

方法签名 ​

方法签名用途
playplay(element: UniElement | null, preset: string, options: XtfViewAnimationOptions | null = null): UniAnimation | null播放单个 preset；目标为空或 preset 不存在时返回 null。
cancel/pause/resume/finish(animation: UniAnimation | null): void控制单个动画实例。
resetreset(element: UniElement | null, animation: UniAnimation | null = null): void取消动画并清除 opacity、transform。
playParallelplayParallel(tasks: XtfViewAnimationTask[]): UniAnimation[]同时启动多个目标任务。
cancelAllcancelAll(animations: UniAnimation[]): void取消并行动画数组。
playSequenceplaySequence(element: UniElement | null, steps: XtfViewAnimationSequenceStep[], loop: boolean = false): XtfViewAnimationSequence顺序执行步骤并返回控制器。
cancelSequence/pauseSequence/resumeSequence(sequence: XtfViewAnimationSequence | null): void取消、暂停或恢复序列。

XtfViewAnimationOptions ​

字段类型作用
durationnumber | null动画时长，默认 560ms。
delaynumber | null播放延迟。
easingUniAnimationOptionEasing | null缓动函数。
iterationsnumber | null播放次数，可传 Infinity。
directionUniAnimationOptionDirection | null播放方向。
fillUniAnimationOptionFill | null结束帧保持方式。
onStart/onFinish/onCancel() => void生命周期回调。

编排结构 ​

  • XtfViewAnimationTask：element、preset、可选 options。
  • XtfViewAnimationSequenceStep：preset、可选 options。
  • XtfViewAnimationSequence：保存 animations/cancelled/paused/finished/loop 等运行状态，由序列控制 API 使用。

Preset ​

  • fade-in
  • fade-out
  • fade-in-up
  • fade-in-down
  • fade-in-left
  • fade-in-right
  • fade-out-up
  • fade-out-down
  • fade-out-left
  • fade-out-right
  • fade-in-small
  • fade-in-large
  • fade-out-small
  • fade-out-large
  • fade-slide-in-up
  • fade-slide-in-down
  • fade-slide-in-left
  • fade-slide-in-right
  • fade-slide-out-up
  • fade-slide-out-down
  • fade-slide-out-left
  • fade-slide-out-right
  • slide-in-up
  • slide-in-down
  • slide-in-left
  • slide-in-right
  • slide-out-up
  • slide-out-down
  • slide-out-left
  • slide-out-right
  • zoom-in
  • zoom-out
  • zoom-in-up
  • zoom-in-down
  • zoom-in-left
  • zoom-in-right
  • zoom-out-up
  • zoom-out-down
  • zoom-out-left
  • zoom-out-right
  • rotate-in
  • rotate-out
  • rotate-in-left
  • rotate-in-right
  • rotate-out-left
  • rotate-out-right
  • flip-x
  • flip-y
  • flip-in-x
  • flip-out-x
  • flip-in-y
  • flip-out-y
  • roll-in
  • roll-out
  • light-speed-in-left
  • light-speed-in-right
  • light-speed-out-left
  • light-speed-out-right
  • bounce
  • bounce-in
  • bounce-out
  • bounce-in-up
  • bounce-in-down
  • bounce-in-left
  • bounce-in-right
  • bounce-out-up
  • bounce-out-down
  • bounce-out-left
  • bounce-out-right
  • pulse
  • heartbeat
  • flash
  • rubber-band
  • shake-x
  • shake-y
  • swing
  • tada
  • wobble
  • jello
  • spin
  • spin-reverse
  • pop-in
  • pop-out
  • drop-in
  • drop-out
  • float
  • float-x
  • drift-left
  • drift-right
  • breathe
  • blink
  • pendulum
  • rock
  • tilt-in-left
  • tilt-in-right
  • tilt-out-left
  • tilt-out-right
  • skew-in
  • skew-out
  • compress-in
  • compress-out

当前 Demo 验证了代表 preset、并行和序列的主要流程；preset 映射存在不等于每个效果已在所有原生平台完成视觉验收。

MIT Licensed

Copyright © 2026 xtf-linkuiunix