Transition
vue3-pixi provides out-of-the-box transition effects. You can use the Transition component on any element, which inherits from Vue's <BaseTransition>.
The usage of PTransition is similar to Vue Transition (but does not include CSS modes). The component can wrap any element, and the transition effect is triggered when the v-if condition of the element becomes true|false. It can also be encapsulated as a standalone transition component.
It is important to note that the default Transition component cannot be overridden, so the exported component name is
PTransition|PixiTransition.
Usage
Pixi.js does not provide a built-in tweening engine, but you can use third-party tweening engines like GSAP or Tween.js to achieve tween animations.
Properties Mode
Unlike the Vue Transition, you can achieve transition effects by setting different properties:
Ease
By default, all transition effects are linear. You can customize the transition easing by using custom cubic-bezier curves.
Ease Presets
The following transitions are available via the TransitionPresets constant.
lineareaseInSineeaseOutSineeaseInOutSineeaseInQuadeaseOutQuadeaseInOutQuadeaseInCubiceaseOutCubiceaseInOutCubiceaseInQuarteaseOutQuarteaseInOutQuarteaseInQuinteaseOutQuinteaseInOutQuinteaseInExpoeaseOutExpoeaseInOutExpoeaseInCirceaseOutCirceaseInOutCirceaseInBackeaseOutBackeaseInOutBack
For more complex transitions, a custom function can be provided.
Ticker
You can also control the transition effects by setting enter and level to functions:
API
PTransition Props
| Name | Type | Default | Description |
|---|---|---|---|
| duration | number object | 500 | Transition duration (ms). |
| before-enter | function object|array | undefined | Called before the transition starts. |
| enter | function object|array | undefined | Called when the transition starts. |
| after-enter | function object|array | undefined | Called after the transition ends. |
| before-leave | function object|array | undefined | Called before the transition starts. |
| leave | function object|array | undefined | Called when the transition starts. |
| after-leave | function object|array | undefined | Called after the transition ends. |
PTransition Events
| Name | Type | Description |
|---|---|---|
| before-enter | function | Called before the transition starts. |
| enter | function | Called when the transition starts. |
| after-enter | function | Called after the transition ends. |
| enter-cancelled | function | Called when the transition is cancelled. |
| before-leave | function | Called before the transition starts. |
| leave | function | Called when the transition starts. |
| after-leave | function | Called after the transition ends. |
TransitionVars Properties
| Name | Type | Description |
|---|---|---|
| delay | number | Transition delay (ms). |
| duration | number | Transition duration (ms). |
| sase | string | Transition easing. |
| x | number | The x position of the element. |
| y | number | The y position of the element. |
| alpha | number | The alpha of the element. |
| rotation | number | The rotation of the element. |
| scale | number | The scale of the element. |
| scaleX | number | The scaleX of the element. |
| scaleY | number | The scaleY of the element. |
| skew | number | The skew of the element. |
| skewX | number | The skewX of the element. |
| skewY | number | The skewY of the element. |
| pivot | number | The pivot of the element. |
| pivotX | number | The pivotX of the element. |
| pivotY | number | The pivotY of the element. |
| tint | number | The tint of the element. |
| tileX | number | The tileX of the element. |
| tileY | number | The tileY of the element. |
| tilePosition | number | The tilePosition of the element. |
| tilePositionX | number | The tilePositionX of the element. |
| tilePositionY | number | The tilePositionY of the element. |
| tileScale | number | The tileScale of the element. |
| tileScaleX | number | The tileScaleX of the element. |
| tileScaleY | number | The tileScaleY of the element. |
| zIndex | number | The zIndex of the element. |
| width | number | The width of the element. |
| height | number | The height of the element. |
| anchor | number | The anchor of the element. |
| anchorX | number | The anchorX of the element. |
| anchorY | number | The anchorY of the element. |
| autoAlpha | number | The autoAlpha of the element. |
| blur | number | The blur of the element. |
| blurX | number | The blurX of the element. |
| blurY | number | The blurY of the element. |
| blurPadding | number | The blurPadding of the element. |
| brightness | number | The brightness of the element. |
| colorize | number | The colorize of the element. |
| colorizeAmount | number | The colorizeAmount of the element. |
| colorMatrixFilter | number | The colorMatrixFilter of the element. |
| combineCMF | number | The combineCMF of the element. |
| contrast | number | The contrast of the element. |
| fillColor | number | The fillColor of the element. |
| hue | number | The hue of the element. |
| lineColor | number | The lineColor of the element. |