本文gif图片较大，流量党慎点。本文内动效均为手写实现，其创意大部分来自于掘金动效区。其作用于我的个人移动端博客，无开源计划，仅供热爱折腾的同学提供创意
技术栈
- Vue3
- TypeScript
- Less
动效参考链接
超实用！7 个优秀的 UI 交互动画技巧 (juejin.cn)
主页面切换
思路: transition组件加个动画罢了 ，不过这个并不是完全体，完全体在最终旋转完成后才会渐变改变页面，而上图是同时进行的（ps: css功底太差了，欢迎大佬在评论区给出解答，白嫖党等待ing）
文章详情跳转
思路: 外部容器和内部路由节点加个动画，再判断一下进出调用就行了
动漫切换
思路: 这个就说白了就一无缝轮播，然后带了个滑动过渡，没啥好说的
动漫详情跳转
思路: 这也不是完全体，完全体没思路.... 至于难点，对touch事件熟悉的思路一下就有了，也就一个无缝轮播和满屏滑动，再稍微处理一下滑动冲突。这个交互来自于魅族系统主题商店，如下：
可以看出未完成的内容：滚动到下屏后仍然可以继续往下、上部轮播挤压的动效
音乐滚动歌词
思路: 这个动效源于qq音乐的歌词动效（低配版 emmm），难点在于 1正常播放时激活歌词在顶部，拖动选时激活在中间 2位置的计算 3歌词源的处理
用户杂项
思路: 常见的无缝页面切换，这个思路就多了。上图在跳转前记录进入关键区位置，将其在跳转路由时传入params，然后再在子路由中拿到并执行过渡动画，但感觉这种思路不理想
总结
可以看出，移动端的动效真的是touch事件满天飞，况且这些都还只是常见的交互，去看看国外那些概念性动效，直接就没思路。不过u1s1，写这种花里胡哨的东西确实挺好玩的
