Try it Online

Install

from [email protected] Built in at the beginning, you only need to install vue3 pixi to use vue pixi transition

Usage

vue3-pixi is used to control the transition effects of Pixi objects, similar to the Vue Transition component (except for CSS mode).

<script setup lang="ts">
import { PTransition } from "vue3-pixi";
import { Container } from 'pixi.js'
function onBeforeEnter(el: Container) {}
function onEnter(el: Container, done: Function) {}
function onLeave(el: Container, done: Function) {}
// ....
const show = ref(true)
</script>

<template>
  <PTransition
    @before-enter="onBeforeEnter"
    @enter="onEnter"
    @after-enter="onAfterEnter"
    @leave="onLeave"
  >
    <container v-if="show"><!-- pixi-element --><container>
  </PTransition>
</template>

Note that after-leave and leave-cancelled are invalid due to the lack of CSS mode.

difference

Unlike the Vue Transition, you can achieve transition effects by setting different properties:

<script setup lang="ts">
import { PTransition } from "vue3-pixi";
</script>

<template>
  <PTransition
    :duration="{ enter: 1000, leave: 700 }"
    :before-enter="{ alpha: 0, scaleX: 0.25, scaleY: 0.25 }"
    :enter="{ alpha: 1, scaleX: 1, scaleY: 1 }"
    :before-leave="{/* ... */}"
    :leave="[
      { scaleX: 0.25, scaleY: 0.25 },
      { delay: 500, duration: 500, alpha: 0 },
    ]"
  >
    <!-- ... -->
  </PTransition>
</template>

The delay and duration are used to individually control the delay and duration of each animation node (the item-duration uses the duration property by default).

Ease Presets

By default, all transition effects are linear. You can customize the transition easing by using custom cubic-bezier curves.

<script setup lang="ts">
import { PTransition, EasePresets } from "vue3-pixi";
</script>

<template>
  <PTransition
    :before-enter="{ x: -50 }"
    :enter="{ ease: [.42, 0, 1, 1], x: 0 }"
    :level="[
      { ease: EasePresets.easeInQuart, x: -50 },
      { delay: 500, alpha: 0 },
    ]"
  >
    <!-- ... -->
  </PTransition>
</template>

The following transitions are available via the TransitionPresets constant.

• linear
• easeInSine
• easeOutSine
• easeInOutSine
• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInExpo
• easeOutExpo
• easeInOutExpo
• easeInCirc
• easeOutCirc
• easeInOutCirc
• easeInBack
• easeOutBack
• easeInOutBack

For more complex transitions, a custom function can be provided.

<script setup lang="ts">
import { PTransition } from "vue3-pixi";
function easeOutElastic(n: number) {
  return  n === 0
    ? 0 : n === 1
      ? 1
      : (2 ** (-10 * n)) * Math.sin((n * 10 - 0.75) * ((2 * Math.PI) / 3)) + 1
}
</script>

<template>
  <PTransition
    :before-enter="{ alpha: 0, x: -50 }"
    :enter="{ alpha: 1, x: 0 }"
    :level="[
      { ease: easeOutElastic, x: 50 },
      { delay: 500, alpha: 0 },
    ]"
  >
    <!-- ... -->
  </PTransition>
</template>

Custom Transition

You can also control the transition effects by setting enter and level to functions:

<script setup lang="ts">
import { Transition } from "vue3-pixi";
import { Text } from 'pixi.js'
function typewriter(el: Text) {
  const speed = 1
  const text = el.text;
  const duration = text.length / (speed * 0.01);
  function tick(t: number) {
    const i = ~~(text.length * t);
    el.text = text.slice(0, i);
  }
   return {
     duration,
     tick
   };
}
</script>

<template>
  <PTransition :enter="typewriter" :level="typewriter">
    <Text>...</Text>
  </PTransition>
</template>

Filters

You can also control the transition effects of filters by setting before-enter, enter, before-leave, leave, ... to options or function:

<script setup lang="ts">
import { PTransition } from "vue3-pixi";
// ....
const show = ref(true)
</script>
<template>
  <PTransition
    :duration="{ enter: 1000, leave: 700 }"
    :before-enter="{ alpha: 0 }"
    :enter="{ alpha: 1 }"
    :leave="{ alpha: 0 }"
  >
    <sprite v-if="show" texture="...">
      <blur-filter
        :before-enter="{ strength: 10, blur: 80 }"
        :enter="{ strength: 0, blur: 0 }"
        :leave="{ blur: 80 }"
        :strength="0"
      />
    </sprite>
  </PTransition>

Transition Group

vue3-pixi also supports the transition effects of Pixi objects in the v-for loop:

<script setup lang="ts">
import { PTransitionGroup } from "vue3-pixi";
import { Container, Sprite } from 'pixi.js'

const items = ref([
  { texture: '...' },
  { texture: '...' },
  { texture: '...' },
])
// ....
const show = ref(true)
</script>
<template>
  <PTransitionGroup
    :duration="{ enter: 1000, leave: 700 }"
    :before-enter="{ alpha: 0 }"
    :enter="{ alpha: 1 }"
    :leave="{ alpha: 0 }"
  >
    <sprite v-for="(item, index) in items" :key="index" texture="..." />
  </PTransitionGroup>
</template>

License

MIT License © 2022-PRESENT hairyf