云音乐十年听歌报告H5中的动效落地实践

<!--  scroll容器，高度为滑动行程，必须大于屏幕高度才能滑动  -->
<div class="scrollFrame">
<!--  所有需要3D效果的元素的根元素，在这层设置perspective  -->
   <div class="scrollContent">
<!--  所有黑胶盘的父元素  -->
     <div class="discGroup">
<!--  每一组「黑胶」，通过transform:translateZ()拉开距离，这里将间距设置为500px  -->
       <div class="disc" style="transform:translateZ(0px)">
<!--  每一张「黑胶」上的内容，可以是文字、图片或者再包一些复杂结构进来  -->
<!--  这里加了一个旋转动画，由于rotate和translateZ都是通过transform来设置，如果旋转动画加在父元素disc上就会把间距抹平 -->
<!--  所以将旋转动画放在了子元素上，也就是「套娃」 -->
            <div class="rotateAni">
                <div class="text">内容1</div>
            </div>
       </div>
       <div class="disc" style="transform:translateZ(-500px)">
            <div class="rotateAni">
                <div class="text">内容2</div>
            </div>
       </div>
       <div class="disc" style="transform:translateZ(-1000px)">
            <div class="rotateAni">
                <div class="text">内容3</div>
            </div>
       </div>
       <div class="disc" style="transform:translateZ(-1500px)">
            <div class="rotateAni">
                <div class="text">内容4</div>
            </div>
       </div>
       <div class="disc" style="transform:translateZ(-2000px)">
            <div class="rotateAni">
                <div class="text">内容5</div>
            </div>
       </div>
     </div>
  </div>
</div>

body{
  padding:0;
  margin:0;
}
.scrollFrame{
  width:100vw;
/* 高度为滑动行程 */
  height:2500px;
}
.scrollContent{
  width:100vw;
  height:100vh;
/*  定位设置为fixed，否则会随滑动上移 */
  position:fixed;
/*  设置perspective */ 
  perspective:500px;
}
.discGroup{
  transform-style:preserve-3d;
}
.disc{
/*  居中 */  
  left:calc((100vw - 100px)/2);
  top:calc((100vh - 100px)/2);
  width:100px;
  height:100px;
  position:absolute;
  transform-style:preserve-3d;
  background:rgba(0,128,255,0.9);
  border-radius:50%;
  border:1px solid rgb(255,128,128);
}
.rotateAni{
  width:100%;
  height:100%;
  animation:rotateAniKey 10s infinite linear;
}
@keyframes rotateAniKey{
  0%{
    transform:rotate(0)
  }
  100%{
    transform:rotate(360deg)
  }
}
.text{
  color:white;
  font-size:20px;
  text-align: center;
  transform:translateY(35px);
}

// 获取discGroup元素
const discGroup = document.querySelector(".discGroup");
// 监听scroll事件，并计算discGroup的translateZ值
window.addEventListener("scroll",()=>{
    let scrollDistance = window.scrollY;
    discGroup.style.transform =`translateZ(${scrollDistance}px)`;
})

.scrollFrame{
  width:100vw;
  height:100vh;
}

const discGroup = document.querySelector(".discGroup");
const discCount = 5;//disc内容组数
const gapDist = 500;//每组disc内容距离
let deltaY = 0;//用以计算触摸滑动过程中Y方向变化了多少
let scrollYStart = 0;//触发touchstart时记录触点screenY值
let scrollYFixed = 0;//松手后记录当前位移距离，并被下次触摸时提供初始距离
let scrollYFixedStart = 0;//touchmove过程中实际位移的距离

const handleScrollStart = (e) => {
    // 触发touchstart时记录触点screenY值
    scrollYStart = e.touches[0].screenY;
    scrollYFixedStart = scrollYFixed;
};
const handleScrollMove = (e) => {
    // 手指滑动过程中计算距离初始点Y滑动的距离
    deltaY = scrollYStart - e.touches[0].screenY;
    // 计算实际滑动距离
    scrollYFixed = scrollYFixedStart + deltaY;
    discGroup.style = transform:translateZ(${scrollYFixed}px);
};
const handleScrollEnd = () => {
    scrollYFixed = scrollYFixedStart + deltaY;
};
document.addEventListener('touchstart', handleScrollStart, { passive: true });
document.addEventListener('touchmove', handleScrollMove, { passive: true });
document.addEventListener('touchend', handleScrollEnd, { passive: true });

curPos = Math.floor(scrollYFixed / gapDist) + 1;

discGroup.style = `transition:transform 0.4s cubic-bezier(0,0,0.3,1);
                   transform:translateZ(${endScrollToPos}px)`;

scrollYBack = deltaY < 0;

const discGroup = document.querySelector(".discGroup");

const discCount = 5;//disc内容组数
const gapDist = 500;//每组disc内容距离

let deltaY = 0;//用以计算触摸滑动过程中Y方向变化了多少
let scrollYStart = 0;//触发touchstart时记录触点screenY值
let scrollYFixed = 0;//松手后记录当前位移距离，并被下次触摸时提供初始距离
let scrollYFixedStart = 0;//touchmove过程中实际位移的距离
let scrollYBack = false;//是否往回滑动
let curPos = 1;

const handleScrollStart = (e) => {
    // 触发touchstart时记录触点screenY值
    scrollYStart = e.touches[0].screenY;
    scrollYFixedStart = scrollYFixed;
};
const handleScrollMove = (e) => {
    // 手指滑动过程中计算距离初始点Y滑动的距离
    deltaY = scrollYStart - e.touches[0].screenY;
    // 判断是滑向下一页（手指上划）还是上一页（手指下划）
    scrollYBack = deltaY < 0;
    scrollYFixed = scrollYFixedStart + deltaY;
    discGroup.style = `transform:translateZ(${scrollYFixed}px)`;
    //计算当前内容索引（第几张disc）
    curPos = Math.floor(scrollYFixed / gapDist) + 1;

};
const handleScrollEnd = () => {
    // 手指离开屏幕，开始播放动画「吸附」到对应disc
    let endScrollToPos = 0;
    // 判断滑动方向
    if (scrollYBack) {
        endScrollToPos = scrollYFixed < (curPos) * gapDist ? (curPos - 1) * gapDist : curPos * gapDist;
    } else {
        endScrollToPos = scrollYFixed > (curPos) * gapDist ? (curPos + 1) * gapDist : curPos * gapDist;
    }

    if ((scrollYFixed >= 0) && (scrollYFixed < (discCount - 1) * gapDist)) {
        // 若滑动距离在第一张和最后一张disc范围内，根据滑动方向滑到对应位置
        discGroup.style = `transition:transform 0.4s cubic-bezier(0,0,0.3,1);
                           transform:translateZ(${endScrollToPos}px)`;

       scrollYFixed = endScrollToPos;
    } else if (scrollYFixed < 0) {

        // 当松手时滑动距离小于0，松手后滑到第一张disc
        discGroup.style = `transition:transform 0.4s cubic-bezier(0,0,0.3,1);
                            transform:translateZ(0px)`;
        scrollYFixed = 0;

        setTimeout(() => {
            alert("已是第一页")
        }, 300);

    } else {
        // 当处在最后一张disc位置并滑动
        if (scrollYBack) {
            // 若是往回滑，回到倒数第二张
            discGroup.style = `transition:transform 0.4s cubic-bezier(0,0,0.3,1);
                                transform:translateZ(${(discCount - 2) * gapDist}px)`;
            scrollYFixed = (discCount - 2) * gapDist;
        } else {
            // 若是继续向前，就滑到下一页
            discGroup.style = `transition:transform 0.4s cubic-bezier(0,0,0.3,1);
                                transform:translateZ(${(discCount - 1) * gapDist}px)`;
            scrollYFixed = (discCount - 1) * gapDist;

            setTimeout(() => {
                alert("前往下一页")
            }, 300);
            
        }
    }
};


document.addEventListener('touchstart', handleScrollStart, { passive: true });
document.addEventListener('touchmove', handleScrollMove, { passive: true });
document.addEventListener('touchend', handleScrollEnd, { passive: true });