根据光标的位置建立旋转机制。
在本教程中:
- 树立正确的观点
- 创建触发元素
- 为旋转运动制作动画
- 设置默认状态
- 添加特殊效果以进行强调
树立正确的观点
- 确保动画的目标元素的祖先元素被选中
- 在 样式面板 在下面 过渡和变换,修改 儿童视角 至 1000 像素
创建触发元素
- 选择要用作触发器的特定元素(如卡片)
- 在里面 交互面板,点击 选定元素 并选择 鼠标在元素上移动 从下拉菜单中
为旋转运动制作动画
- 访问 交互面板 > 鼠标移动时 > 行动 > 启动鼠标动画
- 点击旁边的加号 鼠标动画
- 命名(例如,悬停旋转)
- 点击时间线下方的加号 鼠标X操作 在 0% 并选择 旋转
- 在里面 旋转 部分,将 y 轴调整为 -5 度
- 选择 卡片元素 在 100% 和 旋转 场,将其 y 轴改为 5 度
- 添加 旋转 采取的行动 鼠标 Y 动作
- 0% 于 旋转,将 x 轴设置为 5 度
- 在 100% 旋转,将 x 轴设置为 -5 度
- 完成动画调整以完善 平滑
设置默认状态
- 在里面 交互面板 在下面 鼠标移动时,定义鼠标X位置为50%
- 将鼠标 Y 位置设置为 50%
添加特殊效果以进行强调
- 放置新的 分区块 到画布上相应的元素(卡片)
- 创建一个 班级 并指定一个名称(例如 Card-highlight)
- 设置其尺寸(例如 400 像素)并将位置设置为绝对
- 从左上角开始定位
- 选择合适的 背景颜色 (例如白色)
- 修改 半径 在下面 边界 至 50%
- 调整 不透明度 至 10% 下 效果
- 应用 模糊 过滤并改变 半径 至 50 像素
- 在里面 交互面板, 挑选 悬停旋转
- 在里面 小鼠X时间线 在 0%,包括一个 移动 动画并将其 x 轴设置为 100%
- 在里面 小鼠X时间线 在 100%,纳入一个 移动 x 轴设置为 -50% 的动画
- 为了 鼠标 Y 时间线 在 0%,整合一个 移动 动画并将其 y 轴调整为 50%
- 在100% 鼠标 Y 时间线,应用 移动 动画并将其 y 轴修改为 -50%
在预览模式下查看您的进度。
Ewan Mak 的最新帖子 (查看全部)
- 包括或删除工作区位置和成员 - 2024 年 4 月 15 日
- 定心盒摘要 - 2024 年 4 月 15 日
- 存储网站以供将来参考 - 2024 年 4 月 15 日