Motion的布局动画的基础使用

前言

大家好,我是 Motion Vue 的作者。作为 framer-motion 的忠实粉丝,我一直非常欣赏它优雅的 API 设计和极致的动画体验。本文想和大家简单分享下 Motionlayout animation 基础用法和实战技巧,希望能给你带来启发,也欢迎大家关注 Motion VueVue 生态的实现与探索。


布局动画基础

什么是布局动画?

在 Framer Motion 中,只需给 motion 组件加上 layout 属性,就能让它在不同布局之间平滑过渡,这就是布局动画。

布局(layout)指什么?

  • 位置相关:如 CSS 的 flexpositiongrid
  • 尺寸相关:如 widthheight
  • 列表中元素的整体位置(比如排序/重排)

普通的 initialanimate 不能实现布局动画,必须用 layout

示例:

vue 复制代码
<template>
    <motion.div layout :style="{ justifySelf: position }" />
</template>

可以看到我们每次进行布局变化,带有layout 属性会让组件从上一个布局平滑过渡到新布局,否则会瞬移。

布局动画让 UI 交互更自然,尤其适合列表增删、排序等场景,配合 AnimatePresence 效果更佳。

自定义布局动画过度效果

你可以通过以下方式自定义布局动画过度效果

vue 复制代码
<motion.div
 layout
 :transition="{
   layout: {
     duration: 1.5,
   },
 }"
/>

修复布局动画borderRadius的失真问题

有时布局动画会导致如 borderRadius属性在过渡时出现失真。解决方法:

  • 这些属性用内联 style 明确指定
vue 复制代码
<motion.div
  layout
  :style="{ borderRadius: expanded ? '20px' : '150px' }"
/>

注意:用 CSS 变量设置 borderRadius 无法避免失真,必须用具体值。

layout 属性的更多用法

layout 不只是布尔值,还可以:

  • layout="position":只平滑过渡位置,尺寸变化瞬间完成
  • layout="size":只平滑过渡尺寸,位置变化瞬间完成 适合需要分别控制位置/尺寸动画的场景。

布局动画元素被拉伸压扁怎么解决

有时,由于布局动画的作用,调整大小的组件的内容可能会被 压扁拉伸。如果你在制作布局动画时发现这种情况,只需将布局属性设置为 position,就有可能解决这个问题。

下面是这种情况的一个例子:

  • 删除水平列表中的项目将影响每个组件的大小。默认情况下,您会注意到当物品被删除时,组件会稍微挤压。
  • 将内容放在motion组件下,并将layout属性设置为position

共享布局动画

不同于前面介绍的布局动画(基于同一组件的布局样式变化进行过渡转换),共享布局动画是在具有相同layoutId属性的不同组件进行动画。我们来看下下面这个例子:

vue 复制代码
<template>
 <div class="list">
   <div
     v-for="item in items"
     :key="item"
     class="item"
     @click="selected = item"
     tabindex="0"
   >
     <div>Item {{ item }}</div>
         <Arrow
           v-if="item === selected"
           layoutId="arrow"
           :style="{
             height: '24px',
             color: '#5686F5',
             transform: 'rotate(-90deg)'
           }"
         />
   </div>
 </div>
</template>

// Arrow组件
<template>
   <Motion 
       layoutId="arrow" 
       :style="{ height: '24px', color: '#5686F5', transform: 'rotate(-90deg)' }"
    />
</template>

当两个组件共享相同的 layoutId 时, Motion 会自动在它们之间创建过渡动画。在这个例子中:

  • 每个列表项都有一个可选的箭头指示器
  • 箭头组件使用 layoutId="arrow" 来标识
  • 当用户点击不同的列表项时,箭头会平滑地从一个位置移动到另一个位置

总结

以上就是关于motion布局动画的一些基础使用。

对布局动画感兴趣的同学可以查看以下文档。

或者加入Motion Vue的discord频道,可以问我关于Motion Vue的使用问题。或者提提建议,我需要听到更多来自Vue社区的反馈。

相关文档

相关推荐
知识分享小能手2 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台
清灵xmf2 小时前
CSS field-sizing 让表单「活」起来
前端·css·field-sizing
文火冰糖的硅基工坊2 小时前
[光学原理与应用-480]:《国产检测设备对比表》
前端·人工智能·系统架构·制造·半导体·产业链
excel2 小时前
Qiankun 子应用生命周期及使用场景解析
前端
weixin_446260852 小时前
Django - 让开发变得简单高效的Web框架
前端·数据库·django
ObjectX前端实验室3 小时前
【react18原理探究实践】异步可中断 & 时间分片
前端·react.js
SoaringHeart4 小时前
Flutter进阶:自定义一个 json 转 model 工具
前端·flutter·dart
努力打怪升级4 小时前
Rocky Linux 8 远程管理配置指南(宿主机 VNC + KVM 虚拟机 VNC)
前端·chrome
brzhang4 小时前
AI Agent 干不好活,不是它笨,告诉你一个残忍的现实,是你给他的工具太难用了
前端·后端·架构
brzhang4 小时前
一文说明白为什么现在 AI Agent 都把重点放在上下文工程(context engineering)上?
前端·后端·架构