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

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

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

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

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

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