苹果新款耳机这个页面好炫，有巨巨知道是怎么做的么~

[withzhaoyu]

https://www.apple.com/cn/airpods-pro/

[delectate]

windows10，换了 4 个浏览器（ firefox、ie、edge、chrome ）也没看出来哪里吊炸天了。
对比 如红米 k20p，我没看出来区别： https://www.mi.com/redmik20pro

是不是楼主比较 out，没见过世面？还是我显示器出问题了？
（如果是果粉信仰加成，当我没说过任何）

[delectate]

收回前言……被打脸了，是我网络问题。

[withzhaoyu]

@delectate 抱歉。我也不是果粉。苹果安卓都用。只是比较好奇里面的动效怎么做的。不要误解奥 XD ,

[delectate]

再次收回前言，不是网络问题，和高度有关，如果是按 f12，或者没有全屏，就是普通的页面；
fhd 或者 4k 全屏，才能看出来效果。我读一下页面代码吧。

[withzhaoyu]

@delectate ~~~ hh，问题不大~

[huoshanhui]

比如说最开始的耳机效果是 148 张图片组成的效果。

[withzhaoyu]

@delectate 感谢巨巨 XD。

[ChefIsAwesome]

相当于放个视频，鼠标滚轮控制进度条。如果不是为了盲人啥的，肯定直接就放视频了。这还切几百个图，N 段话。可能有特定的软件能生成这种。

[delectate]

https://s2.ax1x.com/2019/10/29/KRWjgg.png

比较急着去跑步，没太多时间看代码了……
看了一下请求的信息，估计是一帧帧下载并缓存，根据滚轮位置，渲染某一图片。
这样请求多，服务器压力也大（看上图）。

[withzhaoyu]

@huoshanhui 几百张图？我还以为是 css3 旋转之类的动效。这也太暴力了吧

[chenjunyue520]

canvas + 多个背景图， 这个页面切的呀。设计师和前端是真牛逼

[withzhaoyu]

@withzhaoyu
@chenjunyue520 看了下还真是，将近 300 张图太吓人了。。

[xenme]

滚动控制进度，pc 和 iPhone 上卡成狗了。用鼠标快一点才好一点

[CloudnuY]

这次是 jpg 序列，滚动切换图

以前苹果用过 mp4，滚动改变播放时间轴

[withzhaoyu]

@xenme
@huoshanhui
一个页面 1576 个资源请求 _(:з」∠)_。。。。。。真是太暴力了。。。

[fancy111]

设计不错啊，监听滚轮，还可以回放。
楼上要不你设计个更炫酷的？

[SpiritQAQ]

昨天晚上睡觉之前看到被秀了一脸愣是看了开发者工具半个多小时...这设计牛逼

[withzhaoyu]

@SpiritQAQ 我今天也是别人发链接推荐我买，然后我一打开页面就惊了，打开 f12 开始看

[redam]

F12 看请求，全是图片，通过 canvas 来监听滚轮来一帧帧展现图片（ canvas 我不熟 hhhh ）

[withzhaoyu]

@redam nice，nice

[sjn9588]

看了下只能说声牛逼。。这切图，定位，怎么都这么精准。。

[sjn9588]

话说另外有大佬能解答，这种图片加载方式是怎么样实现的吗？没滚动居然都能加载。

[luckyrayyy]

打开之后好几十秒图片加载就没停....一共加载了上千张图片

[ODD10]

@withzhaoyu #15
你随便一个购物网站，滚几下，看看请求少不少。你得看首屏多少请求

[5yyy]

效果很牛逼

[dremy]

才知道 ios13 增加了 AirPods 的音频共享功能，简直不能太棒

[egen]

简单暴力，还没有兼容性问题

[dremy]

就想知道那个 vr 是怎么做的，可以流畅地跑在 iphone 的 safari 里，炫酷

[iKun66]

这图切的牛批，服务器也挺强的。

[withzhaoyu]

@dremy 我记得苹果好像推了个新的 VR 文件格式，是不是跟那个有关 （猜的

[lixiaobai913]

@delectate 哈哈哈，这反转好搞笑