GLTransitions

GLTransitions 是开源的WebGL过渡效果库,包含大量过渡效果,所有效果都能在 AsTransition 中使用。

安装

yarn add gl-transitions
<script src="https://unpkg.com/gl-transitions/gl-transitions.js"></script>

使用

transition 属性

  • 将GLTransitions[x].glsl 赋值给 shader
  • 将GLTransitions[x].defaultParams 赋值给 uniforms, 可根据需求修改参数
export interface Transition {
  shader?: string
  uniforms?: Record<string, any>
}
<script>
import GLTransitions from "gl-transitions";
</script>
<template>
  <AsTransition
    :transition="{
      shader: GLTransitions[0].glsl,
      uniforms: GLTransitions[0].defaultParams
    }"
    ...
  </AsTransition>
</template>

示例

点击切换过渡效果

Loading CodeSandbox...
在 GitHub 上编辑本页面 更新时间: Thu, May 19, 2022