项目地址：hero-motion
记得还蛮早以前写过一篇介绍 FLIP 动画的，然后搁置了很久，平时写写业务也不知道哪里用得上，作为一个 vue 开发者做 b 端项目一般 Transform 一把梭就已经满足大部份需求了。
直到看到 antfu 很早之前一个录播，实现多个页面之间共享组件达到过渡的效果（实际上也看了有段时间了）也提到过 FLIP 的形式。
在想有没有可能牺牲一点灵活性封装一个更简洁的动画组件
他们都是怎么做的？
自己开工前当然还是需要了解一下现成的方案们，首当其冲的还是跨页面共享组件（但是感觉用起来不太方便就 pass 了
其次就是 FLIP 的形式，会牺牲一些效果，对过程更不可控，例子么就是大名鼎鼎的 framer motion 可以参考其中 shared layout 的部分
可惜好像 vue 生态里面好像没有类似的工具，当然也有可能是没发现 hhh
但是至少有 @vueuse/motion 还是方便了很多，即使是普通的页面加上动画交互也会友好很多喔，感觉可以算是 vue 生态下的 gsap 了
上手试试
话不多少，选个顺眼的 Vue.js 项目先用起来～ 当前还只支持 3.x 版本哦
pnpm add @vueuse/motion hero-motion
因为是基于 @vueuse/motion 的所以也需要一起安装一下，然后找到入口文件，在根节点外层包裹一个 HeroProvider
<script setup>
import { HeroProvider } from 'hero-motion'
</script>
<template>
<HeroProvider>
<RouterView />
</HeroProvider>
</template>
这一步会在项目中注入一个 hero motion 的对象，用来收集项目的 layoutId 而有相同 id 的两个元素会根据 transition 中定义的方式进行过渡
然后找到需要过渡的元素：
<script setup>
import { Hero } from 'hero-motion'
</script>
<template>
<Hero as="div" layout-id="ID" />
</template>
那么接下来，如果这个元素在多个页面中被使用到就可以欣赏到动画辣
用在哪？
说了这么多这到底哪些场景会用上呢？
虽然说到底还是看大家的想象力，但是我个人的话使用场景比较多的主要还是各种 cursor
不知道大家有没有碰到过 nuxt layout 中定义的过渡效果在 ssr 模式下有时候并不生效，这是因为 layout 的部分已经在服务端渲染好了，对于浏览器来说切换到另一个页面 cursor 已经固定了，那么通过 hero-motion 就能很好的避免这个问题
<script setup lang="ts">
import { Hero } from 'hero-motion'
</script>
<template>
<Hero
as="div"
layout-id="sidebar-item-cursor"
/>
</template>
或者自己封装组件 tabs 的时候，光标想要流畅的从一个 tab 移动到另一个，如果不借助这个工具的话可能就要计算偏移量等等，而且明明 cursor 属于某个 tab 但是为了共享一个组件就不得不定义在外面，对代码结构也有很大影响。而这也同样能很好的被 hero-motion 解决
// Cursor.vue
<script setup lang="ts">
import { Hero } from 'hero-motion'
</script>
<template>
<Hero
as="div"
layout-id="cursor"
/>
</template>
// Selector.vue
<script setup lang="ts">
import { Cursor } from './Cursor.vue'
</script>
<template>
<div v-for="item in options" :key="item.key">
<div>
{{ name }}
</div>
<Cursor v-if="isActive" />
</div>
<template>
最后
过渡动画什么的很容易就会被忽略了，毕竟同样也有很多可以曲线救国的方式
实在不行就和 UI/UX 设计们 battle 一下嘛
但是友好的交互方式真的会让人很有使用的欲望，想要好好做产品的时候难免会碰到实现难度、代码组织方式难两全的情况，那么不妨尝试一下 hero-motion
欢迎来我主页看看有啥感兴趣的嗷 ⇒ tmg0
