feat: complete field mode

playground/package.json

@@ -8,7 +8,8 @@
     "gsap": "^3.11.5",
     "pixi-filters": "^5.2.1",
     "vue": "^3.2.47",
-    "vue3-pixi-renderer": "^0.5.7"
+    "vue3-pixi-renderer": "^0.5.7",
+    "vue3-pixi-transition": "workspace:^"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.1",

playground/src/App.vue

@@ -3,6 +3,8 @@ import { ref } from 'vue'
 import { useWindowSize } from '@vueuse/core'
 
 import BasicTransition from './components/BasicTransition.vue'
+import FieldTransition from './components/FieldTransition.vue'
+import TickerTransition from './components/TickerTransition.vue'
 
 const enabled = ref(true)
 
@@ -23,7 +25,7 @@ const { width, height } = useWindowSize()
       :height="height"
     >
       <template v-if="enabled">
-        <BasicTransition />
+        <TickerTransition />
       </template>
     </Stage>
   </div>

playground/src/components/BasicTransition.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { Container } from 'pixi.js'
+import { Container, Text } from 'pixi.js'
 import type { Graphics as GraphicsIns } from 'pixi.js'
-import gsap, { Elastic } from 'gsap'
+import { Transition } from 'vue3-pixi-transition'
+import gsap from 'gsap'
 import PixiPlugin from 'gsap/PixiPlugin'
 import { nextTick, ref } from 'vue'
 import * as PIXI from 'pixi.js'
@@ -11,7 +12,7 @@ PixiPlugin.registerPIXI(PIXI)
 
 // 在元素被插入到 DOM 之前被调用
 // 用这个来设置元素的 "enter-from" 状态
-async function onBeforeEnter(el: Container) {
+async function onBeforeEnter(el: Text) {
   await nextTick()
   gsap.set(el, {
     pixi: {
@@ -37,7 +38,7 @@ function onEnter(el: Container, done: () => void) {
 
   return {
     duration: 1000,
-    tick: (t) => {
+    tick: (t: any) => {
 
     },
   }
@@ -93,19 +94,6 @@ const show = ref(true)
     >
       <graphics v-if="show" :scale="1" :pivot="30" :x="200" :y="60" @draw="onDrawRounded" />
     </Transition>
-
-    <Transition
-      :duration="{ enter: 1000, leave: 700 }"
-      :before-enter="{ alpha: 0, scaleX: 0, scaleY: 0 }"
-      :enter="{ ease: 'elastic.inOut(2.5, 1)', delay: 0, alpha: 1 }"
-      :before-leave="{}"
-      :leave="[
-        { ease: 'elastic.inOut(2.5, 1)', scaleX: 1, scaleY: 1 },
-        { delay: 0.5, alpha: 0 },
-      ]"
-    >
-      -
-    </Transition>
   </Container>
 </template>
 

playground/src/components/FieldTransition.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { EasePresets, Transition as Tn } from 'vue3-pixi-transition'
+import type { Graphics as GraphicsIns } from 'pixi.js'
+
+const show = ref(true)
+
+function onDrawRounded(e: GraphicsIns) {
+  e.beginFill('#00a3af')
+  e.drawRoundedRect(0, 0, 60, 60, 10)
+}
+</script>
+
+<template>
+  <Text :position="60" :style="{ fill: '#fff' }" @click="show = !show">
+    Toggle
+  </Text>
+  <Tn
+    :appear="true"
+    :duration="{ enter: 2000, leave: 700 }"
+    :before-enter="{ alpha: 0, scaleX: 0, scaleY: 0 }"
+    :enter="{ delay: 0, alpha: 1 }"
+    :before-leave="{}"
+    :leave="[
+      { ease: EasePresets.easeInExpo, scaleX: 0, scaleY: 0 },
+      { alpha: 0 },
+    ]"
+    @before-enter="() => 1231"
+  >
+    <graphics v-if="show" :scale="1" :pivot="30" :x="200" :y="60" @draw="onDrawRounded" />
+  </Tn>
+</template>
+
+<style lang="scss" scoped></style>

playground/src/components/TickerTransition.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { Transition as Tn } 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,
+  }
+}
+const show = ref(true)
+</script>
+
+<template>
+  <Text :position="60" :style="{ fill: '#fff' }" @click="show = !show">
+    Toggle
+  </Text>
+
+  <Tn
+    :appear="true"
+    :enter="typewriter"
+    :leave="typewriter"
+  >
+    <Text v-if="show" :position="150" :style="{ fill: '#fff' }">
+      The quick brown fox jumps over the lazy dog
+    </Text>
+  </Tn>
+</template>
+
+<style lang="scss" scoped></style>