问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

apple.com 首页跑马灯效果实现原理是怎样？

头像
Tiger_
    1833

    特点：
    1，无论点击多快，都保持了跑马灯的动画效果。
    2，无论点击多块，都能够保持圆形旋转效果不间断。
    3，无论点击多快，都能够保持了移动距离的准确性。

    疑惑：
    1，据我观察，代码应该是动态的根据点击的频率改变了动画执行的帧率。
    2，我自己写圆形旋转跑马灯效果是要添加多余的元素标签的，如下代码中的第一个li和最后一个li元素，但是apple的代码中并没有这样多余的元素，那么是如何实现这种效果的呢？从最后一张到第一张的无缝切换。
    3，动画效果的整体性，据我观察无论你之前点击滑动多少次，点击有多块，它最后一次执行的动画效果都是正常的点击一次的效果。

    求大神解惑。。。
    不知道这算不算伸手党...(哭笑不得.jpg)
    观摩地址：www.apple.com

    <div class='box'>
    <ul class='list'>
        <li class='item'> <img src='images/img4.jpg'/> </li>
        <li class='item'> <img src='images/img1.jpg'/> </li>
        <li class='item'> <img src='images/img2.jpg'/> </li>
        <li class='item'> <img src='images/img3.jpg'/> </li>
        <li class='item'> <img src='images/img4.jpg'/> </li>
        <li class='item'> <img src='images/img1.jpg'/> </li>
    </ul>
</div>
    javascriptcsshtml
    阅读 3.3k
    1 个回答
    得票最新
    头像
    bf
      8k62172

      给个简单的 demo，懒得实现循环了（也就是说从最右到最左的切换是从右向左而不是 apple 那样从左往右）

      https://bumfo.github.io/transition.html

      <!DOCTYPE html>
<title>Transition</title>

<style>
html {
    font: 16px sans-serif;
}
article {
    width: 500px;
    overflow: hidden;
}
div {
    width: 2500px;
    transform: translate3d(0px, 0px, 0px);
    transition: transform ease 1s;
}
section {
    width: 500px;
    height: 100px;
    float: left;
    padding: 15px;
    border: 1px solid #ddd;
    box-sizing: border-box;
}
</style>

<article>
<div id="div">
    <section>1</section>
    <section>2</section>
    <section>3</section>
    <section>4</section>
    <section>5</section>
</div>
</article>

<button onclick="prev()">prev</button>
<button onclick="next()">next</button>

<script>
let total = 5;
let width = 500;

let index = 0;

let divDom = document.querySelector('#div');

function tranformScroll() {
    let x = -index * width;
    divDom.style.transform = 'translate3d(' + x + 'px, 0px, 0px)';
}

function normalizeIndex() {
    index = (total + index % total) % total;
}

function prev() {
    --index;
    normalizeIndex();
    tranformScroll();
}

function next() {
    ++index;
    normalizeIndex();
    tranformScroll();
}


</script>

      谢邀

      这还不简单

      传统的思路是点一次切换一次，一旦加入过渡，就会出现题主所想的一系列问题

      新的思路是 ViewModel 和 View 分开

      点一次，ViewModel 中的当前页面切换一次。

      过渡是从旧页面直接切换到当前页面，而不是一个一个切换

      自然就可以满足那几个条件

      以上

      补充一下，那个循环切换的效果并不完美，会出现闪烁，说明浏览器进行了缓慢的 layout

      可以推测是每次页面滚到头，都会把最左侧的一系列页面挪到右边

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题