V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
withzhaoyu
V2EX  ›  问与答

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

  •  1
     
  •   withzhaoyu · 2019-10-29 16:47:19 +08:00 · 3362 次点击
    这是一个创建于 1834 天前的主题,其中的信息可能已经有所发展或是发生改变。
    31 条回复    2023-06-12 17:57:48 +08:00
    delectate
        1
    delectate  
       2019-10-29 16:58:57 +08:00
    windows10,换了 4 个浏览器( firefox、ie、edge、chrome )也没看出来哪里吊炸天了。
    对比 如红米 k20p,我没看出来区别: https://www.mi.com/redmik20pro

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

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

    以前苹果用过 mp4,滚动改变播放时间轴
    withzhaoyu
        15
    withzhaoyu  
    OP
       2019-10-29 17:13:34 +08:00
    @xenme
    @huoshanhui
    一个页面 1576 个资源请求 _(:з」∠)_。。。。。。真是太暴力了。。。
    fancy111
        16
    fancy111  
       2019-10-29 17:14:03 +08:00
    设计不错啊,监听滚轮,还可以回放。
    楼上要不你设计个更炫酷的?
    SpiritQAQ
        17
    SpiritQAQ  
       2019-10-29 17:18:06 +08:00
    昨天晚上睡觉之前看到被秀了一脸愣是看了开发者工具半个多小时...这设计牛逼
    withzhaoyu
        18
    withzhaoyu  
    OP
       2019-10-29 17:19:40 +08:00
    @SpiritQAQ 我今天也是别人发链接推荐我买,然后我一打开页面就惊了,打开 f12 开始看
    redam
        19
    redam  
       2019-10-29 17:21:12 +08:00
    F12 看请求,全是图片,通过 canvas 来监听滚轮来一帧帧展现图片( canvas 我不熟 hhhh )
    withzhaoyu
        20
    withzhaoyu  
    OP
       2019-10-29 17:25:30 +08:00
    @redam nice,nice
    sjn9588
        21
    sjn9588  
       2019-10-29 18:28:39 +08:00
    看了下只能说声牛逼。。这切图,定位,怎么都这么精准。。
    sjn9588
        22
    sjn9588  
       2019-10-29 18:33:37 +08:00
    话说另外有大佬能解答,这种图片加载方式是怎么样实现的吗?没滚动居然都能加载。
    luckyrayyy
        23
    luckyrayyy  
       2019-10-29 18:34:14 +08:00
    打开之后好几十秒图片加载就没停....一共加载了上千张图片
    uTOmOuk3L6sb4MSI
        24
    uTOmOuk3L6sb4MSI  
       2019-10-29 18:36:34 +08:00 via iPhone
    @withzhaoyu #15
    你随便一个购物网站,滚几下,看看请求少不少。你得看首屏多少请求
    5yyy
        25
    5yyy  
       2019-10-29 18:36:58 +08:00
    效果很牛逼
    dremy
        26
    dremy  
       2019-10-29 18:44:29 +08:00 via iPhone
    才知道 ios13 增加了 AirPods 的音频共享功能,简直不能太棒
    egen
        27
    egen  
       2019-10-29 18:58:19 +08:00
    简单暴力,还没有兼容性问题
    dremy
        28
    dremy  
       2019-10-29 19:02:05 +08:00 via iPhone
    就想知道那个 vr 是怎么做的,可以流畅地跑在 iphone 的 safari 里,炫酷
    iKun66
        29
    iKun66  
       2019-10-30 11:00:14 +08:00
    这图切的牛批,服务器也挺强的。
    withzhaoyu
        30
    withzhaoyu  
    OP
       2019-10-30 17:27:12 +08:00
    @dremy 我记得苹果好像推了个新的 VR 文件格式,是不是跟那个有关 (猜的
    lixiaobai913
        31
    lixiaobai913  
       2023-06-12 17:57:48 +08:00
    @delectate 哈哈哈,这反转好搞笑
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1012 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 21:13 · PVG 05:13 · LAX 13:13 · JFK 16:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.