自定义过渡效果

参考 GLTransitions 你可以很方便的实现自己的过渡效果。

实现

接口

export interface Transition {
  shader?: string
  uniforms?: Record<string, any>
}

概念

shader

fragment shader 代码，完成过渡效果

定义变量，常量或声明 uniform 变量
vec4 transition(vec2 uv) 定义过渡函数
- 参数 uv：图片每个点坐标
内置 getFromColor 函数：获取当前图 uv 坐标点像素值
内置 getToColor 函数：获取目标图 uv 坐标点像素值
内置 uniform 变量
- progress：切换进度（0 - 1）
- next：切换方向，下一张为 true，上一张为 false

uniforms

shader 中自定义的 uniform 变量

使用

使用 `next` `progress`

<script setup>
import GLTransitions from "gl-transitions";
const customTransition = {
  shader: `
    uniform float youruniform;
    vec4 transition(vec2 uv) {
      vec4 a = getFromColor(uv);
      vec4 b = getToColor(uv);
      if ( next )
        return mix(a, b, step(uv.x, progress));
      else
        return mix(b, a, step(uv.x, 1. - progress));
    }

  `,
  uniforms: {
    youruniform: 0
  },
}
</script>
<template>
  <AsTransition
    :transition="customTransition"
    ...
  </AsTransition>
</template>

示例

向前和向后切换有不同效果

Loading CodeSandbox...

自定义过渡效果

实现

接口

概念

shader

uniforms

使用

使用 next progress

示例

使用 `next` `progress`