前言

為了更好的了解原神角色，我模仿官網(wǎng)做了一個(gè)角色切換效果，在做的過(guò)程當(dāng)中也總結(jié)了一些技術(shù)點(diǎn)。

為了讓大家更好的體驗(yàn)，我兼容了 PC 端和移動(dòng)端，建議在 PC 端查看效果更佳。接下來(lái)就為大家簡(jiǎn)單的分享一下！

話(huà)不多說(shuō)，原神啟動(dòng)?。?/p>

效果

先看一下官網(wǎng)的效果： ys.mihoyo.com/main/charac…

我寫(xiě)的真實(shí)效果：chenyajun.fun/#/ysRoleSwi…

技術(shù)點(diǎn)

一、底部角色橫向滾動(dòng)效果

1、原理

      <div class="role-outer" :style="{ width: isPC ? '830px' : '320px' }">
        <template>
          <div class="left-arrow" :style="{ backgroundImage: `url(${leftSwitchArrow})` }" @click="lastPage"></div>
          <div class="right-arrow" :style="{ backgroundImage: `url(${rightSwitchArrow})` }" @click="nextPage"></div>
        </template>

        <div class="role-contener">
           //內(nèi)部容器
          <div
            class="role-inner"
            :class="{ activeTranstion: isCloseTranstion }"
            :style="{ left: isPC ? moveDistancePC : moveDistanceMobile }"
            ref="element"
          >
            //角色
            <template>
              <div
                v-for="(item, index) in yuRoleMes"
                class="role-item-pc"
                :style="{
                  backgroundPosition: $index === index ? '0 -132px' : '',
                  backgroundImage: `url(${bottomRoleBac})`,
                }"
                :key="index"
                @click="handleRoleSwitchPC(index)"
              >
                <img class="item-avater" :src="item.roleAvatar" />
                <p class="item-name" :style="{ color: $index === index ? '#000' : '#fff' }">{{ item.roleName }}</p>
              </div>
            </template>
          </div>
        </div>
      </div>
   </div>

// 上一頁(yè)
function lastPage() {
  if ($index.value === 0) {
    $index.value = yuRoleMes.value.length - 1
    return
  }
  $index.value--
}
// 下一頁(yè)
function nextPage() {
  // 到最后一頁(yè)
  if ($index.value === yuRoleMes.value.length - 1) {
    $index.value = 0
    return
  }
  $index.value++
}
// 點(diǎn)擊角色操作
function handleRoleSwitchPC(index) {
  isCloseTranstion.value = false
  $index.value = index
}

  if ($index.value === 0) {
    $index.value = yuRoleMes.value.length - 1
    return
  }

  // 到最后一頁(yè)
  if ($index.value === yuRoleMes.value.length - 1) {
    $index.value = 0
    return
  }

// 每次點(diǎn)擊移動(dòng)距離
const moveDistance = computed(() => {

    const firstThree = $index.value < 3
    if (firstThree) {
      return 0
    }

    const lastThree = $index.value > yuRoleMes.value.length - 4
    if (!lastThree) {
      return ($index.value - 2) * -144
    }

    return (yuRoleMes.value.length - 6) * -144
})

//對(duì)容器進(jìn)行位移賦值
const moveDistancePC = computed(() => {
  return moveDistance.value + 'px'
})

    const firstThree = $index.value < 3
    if (firstThree) {
      return 0
    }

    const lastThree = $index.value > yuRoleMes.value.length - 4
    if (!lastThree) {
      return ($index.value - 2) * -145
    }

 return (yuRoleMes.value.length - 6) * -145

    <!-- 背景-兩張切換 -->
    <div class="background-wrapper">
      <!-- 第一張背景 -->
      <div
        class="role-background role-bg1"
        :style="{
          backgroundImage: outerTwoBackground[0],
        }"
      ></div>
      <!-- 第二張背景 -->
      <div
        class="role-background role-bg2"
        :style="{
          backgroundImage: outerTwoBackground[1],
        }"
      ></div>
    </div>

// 第一張永遠(yuǎn)存在進(jìn)行擴(kuò)張
.role-bg1 {
  animation: breath 80s infinite linear;
  opacity: 1;
}
// 第二張也在擴(kuò)張，只不過(guò)每次從顯示到隱藏需要15秒
.role-bg2 {
  animation: bg-change 15s infinite linear, breath 80s infinite linear;
  opacity: 0;
}
// 用于第二張的顯示隱藏
@keyframes bg-change {
  48% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  98% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
// 用于向外擴(kuò)張效果
@keyframes breath {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

        .show-background-pc {
          right: 0;
          opacity: 1;
          transition: all 0.3s;
        }
        .show-background-mobile {
          right: 445px;
          opacity: 1;
          transition: all 0.3s;
        }

  moveDistanceX.value = endX.value - startX.value
  // 如果是點(diǎn)擊滑動(dòng)
  if (moveDistanceX.value === 0) {
    isClickMobile(e)
    return
  }

const isCloseTranstion = ref(false) //控制是否顯示動(dòng)畫(huà)效果
const startX = ref(0) //記錄開(kāi)始位置
const endX = ref(0) //記錄結(jié)束位置
const moveDistanceX = ref(0) //按下抬起滑動(dòng)距離
const recordLastMove = ref(0) //記錄上次滑動(dòng)的距離，用于下次累加
const moveDistanceM = ref(0) //最終移動(dòng)的距離

  // 如果照片小于五張不進(jìn)行位移移動(dòng)
  if (yuRoleMes.value.length < 5) {
    moveDistanceM.value = 0
    recordLastMove.value = 0
    return
  }

  // 最后一欄的位置
  const rightMaxValue = (yuRoleMes.value.length - 5) * -64  
//在最后一欄繼續(xù)往左邊滑動(dòng)
  if (moveDistanceM.value < rightMaxValue) {
    moveDistanceM.value = rightMaxValue
    recordLastMove.value = rightMaxValue
    return
  }

  // 其他情況
  moveDistanceM.value = recordLastMove.value + Math.round(moveDistanceX.value / 64) * 64
  recordLastMove.value = Math.round(moveDistanceM.value / 64) * 64