Framer 一些交互相关的动画效果

前言

在Framer中，除了滑轮滚动交互动画之外，还有许多其他交互方式能够让你的设计生动活泼，提升用户体验。下面，对四种常见的交互动画——鼠标按下、鼠标悬浮、循环动画和鼠标拖拽，进行详细的探讨和练习，帮助你逐步掌握并运用到实际项目中。

1.鼠标按下（OnMouseDown）： 当用户在某个元素上按下鼠标时，就会触发设置好的动画效果。例如，你可以让按钮在按下时产生缩放或者颜色变化的效果，从而给予用户即时反馈。这不仅能够增强用户的操作感，还能提升界面的互动性。

2.鼠标悬浮（OnMouseOver 和 OnMouseOut）： 当用户将鼠标移动到某个元素上时，可以触发设置好的动画效果. 这种交互方式常用于菜单项、卡片或者按钮上，以视觉上的变化引导用户进行操作。

3. 循环动画（Loop Animation）： 循环动画是一种无限重复的动画效果，常用于加载指示器、装饰性元素或者需要吸引用户注意的界面部分。在Framer中，你可以轻松创建平滑且自然的循环动画，让静态的设计元素动起来，增加视觉吸引力。

4. 鼠标拖拽（Drag and Drop）： 鼠标拖拽功能允许用户通过鼠标移动元素。在Framer中，你可以定义元素的拖拽行为，例如设置拖拽的范围、拖拽时的视觉反馈以及拖拽结束后的动作。

为了更好地掌握这些交互动画，我将依次使用Framer制作不同交互的效果,进行讲解演示,方便大家更好的理解和掌握.

悬浮交互效果

1效果:

1. 悬停到图片上面,图片就慢慢放大.

1实现: (这里不过多讲解布局了,文章后面我会放上模板链接,大家可以去看下,如果不清楚,也可以私信问我)

• 选中元素
• 添加 Effect -> Hover
• 编辑Hover属性面板. 该里面的属性,将会是悬浮后的效果.

2效果:

1. 悬停到Button上面,Button进行变化.

2实现:

• 选中元素
• 添加 Effect -> Hover
• 编辑Hover属性面板. 该里面的属性,将会是悬浮后的效果.
• 设置Skew(斜)属性.

鼠标按下交互

鼠标按下不动的时候, 点我按钮 将会缩小. 右边logo图标,将会旋转.

实现:

1. 添加Effect里面的press(按下)
2. 设置按下的时的属性,其中Scale(缩放)为原来的0.9

旋转也和上面操作步骤一样,只需要添加Rotate(旋转)即可.

如果动画不满意,可以自定义过渡动画.

循环动画部分

定义好元素. 给元素添加效果(Effect), 然后选择循环(Loop), 在设置面板中,设置相应的属性即可, 然后就可以预览效果,再进行修改.

这里说一下Type类型:

1. Loop: 这个类型表示动画将会无限循环播放。Loop类型的动画适合用于需要持续吸引注意或者表示正在进行的动作的场景，比如加载指示器、实时更新的数据可视化等。
2. Mirror: 这个类型表示动画在完成一次正向播放后会反向播放，然后再正向播放，如此往复。这种类型的动画给人一种元素在“反弹”的印象，能够创造出动态且富有弹性的视觉效果。

鼠标拖拽交互

1. Freeform（自由形式）： Freeform拖拽允许元素被拖拽到任何位置。用户可以随意移动元素，没有任何限制。这种方式适用于需要高度自由度的拖拽操作，比如拖拽卡片到任意位置。
2. Snap Back（弹回）： Snap Back属性允许你定义当元素被拖拽松开后，是否返回到原始位置。如果启用这个属性，元素在被松开后会自动返回到开始拖拽的位置。这种方式适用于需要元素在操作结束后返回原位的场景，比如拖拽排序时，不保存排序的状态。
3. Transition（过渡）： Transition属性定义了元素在拖拽开始和结束时的动画效果。你可以设置动画的持续时间、延迟和缓动函数，让拖拽的过程更加平滑和自然。

一个点击色块切换盒子背景颜色的Demo

效果:

首先创建一个组件, 在组件面板里面,完善我们的页面.

紧接着,然后复制2份副本.并且将背景颜色进行修改.

添加交互(interaction).

最后将我们创建好的组件, 引入到页面即可. 然后就可以预览点击了.