iOS Swift实现启动页图标滑动时侧边滑出剩余logo的动画

效果演示 #

核心思路 #

将logo的图标部分和剩余部分做联动动画，通过控制容器位移、剩余部分宽度/裁剪范围同步变化，实现图标左移的同时右侧内容平滑展开的效果。

代码实现 #

方案1：拆分两张图实现（可控性更高） #

HTML结构

<!-- logo外层容器，负责整体左移动画 -->
<div class="splash-logo">
  <!-- 左侧图标部分 -->
  <div class="logo-icon"></div>
  <!-- 右侧需要滑出的剩余logo部分 -->
  <div class="logo-content"></div>
</div>

CSS代码

.splash-logo {
  position: fixed;
  /* 初始位置居中 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  /* 左移动画，时长可自行调整 */
  animation: logoMove 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.logo-icon {
  width: 60px; /* 替换为你的图标实际宽度 */
  height: 60px; /* 替换为你的图标实际高度 */
  background: url("你的图标资源地址") center / contain no-repeat;
  flex-shrink: 0; /* 避免图标被挤压变形 */
}

.logo-content {
  width: 0;
  height: 60px; /* 和图标高度保持一致 */
  overflow: hidden;
  background: url("你的logo剩余部分资源地址") left center / auto 100% no-repeat;
  /* 滑出动画，和左移动画时长、缓动完全同步 */
  animation: contentSlide 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* 左移动画，最终停留位置可自行调整 */
@keyframes logoMove {
  to {
    left: 32px;
    transform: translateY(-50%);
  }
}

/* 滑出动画，最终宽度替换为你的logo剩余部分实际宽度 */
@keyframes contentSlide {
  to {
    width: 200px;
    margin-left: 12px; /* 图标和剩余部分的间距，按需调整 */
  }
}

方案2：单张完整logo实现（无需切图） #

如果不想拆分logo为两张图，可直接用clip-path裁剪属性实现：

<div class="splash-logo-full"></div>

.splash-logo-full {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 272px; /* 替换为完整logo的总宽度 */
  height: 60px; /* 替换为完整logo的高度 */
  background: url("你的完整logo资源地址") center / contain no-repeat;
  /* 初始只裁剪显示左侧图标部分，右侧裁剪宽度=总宽度-图标宽度 */
  clip-path: inset(0 212px 0 0);
  animation: logoFullAnim 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes logoFullAnim {
  to {
    left: 32px;
    transform: translateY(-50%);
    clip-path: inset(0 0 0 0); /* 最终裁剪范围放开，显示完整logo */
  }
}

注意事项 #

• 两个动画的时长、缓动函数必须保持一致，才能保证位移和滑出的衔接效果和示例完全匹配
• 所有尺寸、最终位置、动画时长都可以根据你的实际需求调整

内容的提问来源于stack exchange，提问作者jbeu425