Pixi Transition in Vue3
MIT License
🚛 This package is now part of [email protected].
👉 Refer to https://github.com/hairyf/vue3-pixi/tree/main/packages/transition instead.
!before using vue3-pixi-transition, you need to install vue3-pixi-renderer
# with pnpm
pnpm add vue3-pixi-transition
# with yarn
yarn add vue3-pixi-transition
vue3-pixi-transition
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-transition";
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
andleave-cancelled
are invalid due to the lack of CSS mode.
Unlike the Vue Transition, you can achieve transition effects by setting different properties:
<script setup lang="ts">
import { PTransition } from "vue3-pixi-transition";
</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
andduration
are used to individually control the delay and duration of each animation node (theitem-duration
uses theduration
property by default).
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-transition";
</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-transition";
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>
You can also control the transition effects by setting enter
and level
to functions:
<script setup lang="ts">
import { Transition } from "vue3-pixi-transition";
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>
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-transition";
// ....
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>
vue3-pixi-transition
also supports the transition effects of Pixi objects in the v-for
loop:
<script setup lang="ts">
import { PTransitionGroup } from "vue3-pixi-transition";
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>