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

2019-10-29 16:47:19 +08:00
 withzhaoyu

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

3382 次点击
所在节点    问与答
31 条回复
delectate
2019-10-29 16:58:57 +08:00
windows10,换了 4 个浏览器( firefox、ie、edge、chrome )也没看出来哪里吊炸天了。
对比 如红米 k20p,我没看出来区别: https://www.mi.com/redmik20pro

是不是楼主比较 out,没见过世面?还是我显示器出问题了?
(如果是果粉信仰加成,当我没说过任何)
delectate
2019-10-29 17:00:37 +08:00
收回前言……被打脸了,是我网络问题。
withzhaoyu
2019-10-29 17:01:38 +08:00
@delectate 抱歉。我也不是果粉。苹果安卓都用。只是比较好奇里面的动效怎么做的。不要误解奥 XD ,
delectate
2019-10-29 17:03:18 +08:00
再次收回前言,不是网络问题,和高度有关,如果是按 f12,或者没有全屏,就是普通的页面;
fhd 或者 4k 全屏,才能看出来效果。我读一下页面代码吧。
withzhaoyu
2019-10-29 17:03:56 +08:00
@delectate ~~~ hh,问题不大~
huoshanhui
2019-10-29 17:04:12 +08:00
比如说最开始的耳机效果是 148 张图片组成的效果。
withzhaoyu
2019-10-29 17:05:25 +08:00
@delectate 感谢巨巨 XD。
ChefIsAwesome
2019-10-29 17:06:28 +08:00
相当于放个视频,鼠标滚轮控制进度条。如果不是为了盲人啥的,肯定直接就放视频了。这还切几百个图,N 段话。可能有特定的软件能生成这种。
delectate
2019-10-29 17:07:39 +08:00
https://s2.ax1x.com/2019/10/29/KRWjgg.png

比较急着去跑步,没太多时间看代码了……
看了一下请求的信息,估计是一帧帧下载并缓存,根据滚轮位置,渲染某一图片。
这样请求多,服务器压力也大(看上图)。
withzhaoyu
2019-10-29 17:08:31 +08:00
@huoshanhui 几百张图?我还以为是 css3 旋转之类的动效。这也太暴力了吧
chenjunyue520
2019-10-29 17:09:17 +08:00
canvas + 多个背景图, 这个页面切的呀。设计师和前端是真牛逼
withzhaoyu
2019-10-29 17:11:31 +08:00
@withzhaoyu
@chenjunyue520 看了下还真是,将近 300 张图太吓人了。。
xenme
2019-10-29 17:12:16 +08:00
滚动控制进度,pc 和 iPhone 上卡成狗了。用鼠标快一点才好一点
CloudnuY
2019-10-29 17:12:44 +08:00
这次是 jpg 序列,滚动切换图

以前苹果用过 mp4,滚动改变播放时间轴
withzhaoyu
2019-10-29 17:13:34 +08:00
@xenme
@huoshanhui
一个页面 1576 个资源请求 _(:з」∠)_。。。。。。真是太暴力了。。。
fancy111
2019-10-29 17:14:03 +08:00
设计不错啊,监听滚轮,还可以回放。
楼上要不你设计个更炫酷的?
SpiritQAQ
2019-10-29 17:18:06 +08:00
昨天晚上睡觉之前看到被秀了一脸愣是看了开发者工具半个多小时...这设计牛逼
withzhaoyu
2019-10-29 17:19:40 +08:00
@SpiritQAQ 我今天也是别人发链接推荐我买,然后我一打开页面就惊了,打开 f12 开始看
redam
2019-10-29 17:21:12 +08:00
F12 看请求,全是图片,通过 canvas 来监听滚轮来一帧帧展现图片( canvas 我不熟 hhhh )
withzhaoyu
2019-10-29 17:25:30 +08:00
@redam nice,nice

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/614135

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX