AnimationFrame 动画帧

提供 stages 控制 GIF 动画播放, 默认点击进行阶段跳转

基础用法

提供一张 GIF 图片, 默认完整播放

<template>
  <div class="animation-container wh-full">
    <px-animation-frame
      src="/pixel-ui/images/twoking.gif"
      :stages="stages"
      class="static!"
    />
  </div>
</template>
<script lang="ts" setup>
const stages = [{ type: 'loop', start: 0, end: 6 }]
</script>

Loop 循环播放

通过 loop 属性控制是否循环播放

<template>
  <div class="animation-container wh-full">
    <px-animation-frame
      src="/pixel-ui/images/taffy.gif"
      loop
      :width="320"
      :height="320"
      class="static!"
    />
  </div>
</template>

Stages 跳转阶段

TIP

stages 属性类型为 AnimationFrameStage[]

其中 AnimationFrameStage:{start:number;end:number;type:'loop'|'once'}

点击切换动画阶段, 建议合理运用 GIF 分解工具查看对应帧

通过 stages 属性控制 GIF 动画播放, 默认点击进行阶段跳转

<template>
  <div class="animation-container wh-full">
    <px-animation-frame
      src="/pixel-ui/images/pet.gif"
      :stages="stages"
      class="static!"
    />
  </div>
</template>
<script setup lang="ts">
const stages = [
  { type: 'loop', start: 0, end: 11 },
  { type: 'once', start: 12, end: 41 },
  { type: 'loop', start: 31, end: 41 },
  { type: 'once', start: 42, end: 52 }
]
</script>

API_Table插件测试

DANGER

该插件基于 markdown-it 开发, 解析组件 types.ts 文件生成 API 表格, 测试中

AnimationFrame API

Props

Name	Description	Type	Default
src	图片地址	string	-
stages	动画帧控制器	object	[]
loop	是否启用循环播放	boolean	false
width	图片宽度	number	320
height	图片高度	number	320
draggable	是否可拖拽	boolean	true
overflow	拖动范围是否可超出可视区域(非容器区域)	boolean	false

Events

Name	Description	Type
click	内置点击事件,跳转下一阶段	function

type AnimationFrameType = 'loop' | 'once'

interface AnimationFrameStage {
  start: number
  end: number
  type: AnimationFrameType
}