应用到Webflow

💡

Spline 在Webflow的本地集成目前是测试版功能。如果您有想法、功能请求或错误报告，请通过 help@spline.design（或在Spline底部反馈面板中）将反馈发送给我们。

当将交互式 3D 内容添加到您的网站时，您不需要撰写代码，只需要使用Webflow的集成，即Spline Embed（嵌入）即可完成。

您可以直接在 Webflow 中控制 Spline 场景的许多交互。这其中包括使用 Webflow 事件（例如：单击、悬停、鼠标位置、滚动）来操纵在Spline场景中对象的位置、旋转和缩放。

欲了解如何使用的更多信息，请按照本文档中的步骤和提示进行操作。

演示：如何将Spline场景导出并嵌入到 Webflow 中

在Spline中导出

链接示意：https://prod.spline.design/HqdfCmOueigtautT/scene.splinecode

→ 您可以随意使用上面的链接来测试

目前Webflow暂无官方汉化版，故使用英文原版来进行说明

在Webflow编辑器中，按照以下步骤添加Spline场景：

点击左侧工具栏上的”+“图标
点击元素（Element），来到媒体（Media）部分，选择Spline场景（Spline Scene）。
选中之后，将会由一个默认的Spline场景显示，你也可以在”URL“框中输入修改，粘贴你想要导入的Spline 场景的URL（请参阅上一步中从Spline导出）。
点击”显示所有设置“（Show All Settings)，即可查看所有的Webflow设置。

如欲了解如何在Webflow上设置Spline场景的样式和大小的更多信息，请查看Webflow中的以下文档：

Webflow 中的样式面板概述 Webflow 中的元素设置面板

⚠️

Webflow 中的Spline场景是 Beta 功能，本演示中仅展示了一个简单的示例，Webflow 的更多文档即将推出！

选择右侧边栏右上角的“⚡️ – 互动”。
创建一个新的触发器（元素触发器或页面触发器），在本练习演示中，选择”鼠标在视窗中移动“（Mouse move in viewport）以及”页面触发器“（Page trigger）旁边的“+”图标。
选择触发器。
添加动画（鼠标动画旁边的“+”图标）。
使用“⚙️ – 齿轮图标”（cogwheel icon）打开动画。
在“鼠标 X 操作”（Mouse X Action）中，单击“+”图标并在“集成”（Integrations）部分选择“Spline”→ 这将会解锁对Spline对象的访问。
在 0% 处选择“Spline”对象。
在侧边栏底部“对象”（object）旁边，从下拉列表中选择您想要操作的对象→“几何对象”（Geometry），例如在视频中的示例中的对象。
设置“几何对象”（Geometry）的初始位置、缩放和旋转，需要定义一个值才能生效（动画中会忽略默认值）
选择 100% 的Spline对象，您可以定义对象的位置、旋转和缩放的变换程度。
使用顶部工具栏中的“👁️ – 预览图标（preview icon）”预览体验。
完成！将鼠标移到网页上，就会展示为 Spline 对象设置的动画。

在 Webflow 中，以下方式可以预览Spline场景交互

💡

对于已发布的 Webflow 项目，只需重新加载包含 Spline Embed 的网站，即可看到最新的 Spline 更新。

如需要再Webflow编辑器中查看更新，请按照以下步骤操作：

选择Spline场景。
在右侧边栏中选择“元素设置”（Element Settings）。
在“Spline场景设置”（Spline Scene Setting）部分，单击“重新加载Spline场景”（Reload Spline Scene）。
完成，更新已上线！

应用到Framer

回到首页