V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
kelzake
V2EX  ›  程序员

问一下前端大佬,你们公司的产品或者 UI,在出原型或者设计稿的时候,是怎么体现动画的?

  •  
  •   kelzake · 329 天前 · 3434 次点击
    这是一个创建于 329 天前的主题,其中的信息可能已经有所发展或是发生改变。
    比如很多 CSS3, SVG 或者 canvas 的动画
    我要实现这颗流星在这里 biu 一下划到右边转个圈再绕回来
    他们是怎么准确地要前端实现这种动画,包含轨迹,速度,角度
    我目前还没遇到这种需求,只是好奇
    36 条回复    2021-01-07 13:20:37 +08:00
    Lin0936
        1
    Lin0936   329 天前   ❤️ 2
    muyunyun
        2
    muyunyun   329 天前
    ae + lottie
    waiaan
        3
    waiaan   329 天前
    口述
    oxromantic
        4
    oxromantic   329 天前   ❤️ 2
    口述+手势
    TwoDogSon
        5
    TwoDogSon   329 天前   ❤️ 12
    另一个 app 的录屏
    GopherTT
        6
    GopherTT   329 天前   ❤️ 1
    口述 + AE
    Doracis
        7
    Doracis   329 天前
    我们连 UI 都没有,全靠前端自己拿张破纸先画画页面,画好了大家一看,修修改改然后敲代码 (野路子,不要学。。)
    diliburong
        8
    diliburong   329 天前
    figma
    设计会在设计稿上把动画做好
    lneoi
        9
    lneoi   329 天前   ❤️ 24
    一颗流星,从这儿,就这样一下子,biu biu biu,从这里到这里,然后嗖的一下调头,绕回来,要绕回来,到这儿,对对这儿,然后再来一次,(拍肩)你懂的吧?
    Chhxin
        10
    Chhxin   329 天前
    这里是个从天而降的动画
    WishMeLz
        11
    WishMeLz   329 天前
    评论区太真实了,哈哈哈哈 口述+手势+另外一个 APP 的录屏。一口饭给我呛到了。笑死我了
    daysv
        12
    daysv   329 天前
    上述的各种都经历过。
    感受比较好的就是设计师 ae 出动画,配合 lottie 或者手写实现。
    xrr2016
        13
    xrr2016   329 天前
    @lneoi 键盘给你,你来写🐶
    Vegetable
        14
    Vegetable   329 天前
    设计师还掌握 AE 出原型的技能是我没想到的
    hockor
        15
    hockor   329 天前
    我们有专业动效师,会给你做个视频出来。。。
    andyskaura
        16
    andyskaura   329 天前
    @TwoDogSon 太 tm 真实了 我怀疑你就是策划!
    wunonglin
        17
    wunonglin   329 天前
    输出视频,然后通过进度控制显示
    leeeeec
        18
    leeeeec   329 天前
    这种 AE+ Lottie,导出 json 文件,直接用
    wobuhuicode
        19
    wobuhuicode   329 天前
    呢个,这个按钮需要加个动画,首先你要让它抖动起来,就是左右那种,幅度不是很大,但是要动起来,然后呢,从这边这个点开始放大,尽量让放大的速度和抖动的速度一样,这样用户看起来比较舒服。放大完之后呢,你要有一道光从这边滑过去,滑了过去之后,又要一道光继续刚才的动作,对对对,就是你说的循环。
    xiaolongyuan
        20
    xiaolongyuan   329 天前
    @wobuhuicode 我怀疑你在放视频
    keller
        21
    keller   329 天前
    简单的口述 或者给参考效果,复杂的 AE 出视频
    lancelock
        22
    lancelock   329 天前
    sketch xd 就可以做简单的动画吧
    jiangshanmeta
        23
    jiangshanmeta   329 天前
    有个动画就行了

    反正也不怎么写样式了
    miniwade514
        24
    miniwade514   329 天前
    厉害的设计师可以直接用 Sketch 做出各种转场效果,乍一看以为已经开发完了。

    特别花哨的动画(涉及颜色、形状之类的),直接给 GIF 吧。。
    dengshen
        25
    dengshen   329 天前 via iPhone
    @lneoi 有画面了
    Gris
        26
    Gris   329 天前 via Android
    pr+ae
    Gris
        27
    Gris   329 天前 via Android
    @Gris rp 不是 pr
    otakustay
        28
    otakustay   328 天前
    “这里要个动画”,然后 FE 自己挑喜欢的
    veike
        29
    veike   328 天前 via Android
    @lneoi 😂😂😂😂
    a62527776a
        30
    a62527776a   328 天前
    UI 自己 AE 导出 lottie
    lwlizhe
        31
    lwlizhe   328 天前
    while(UI 觉得不好){
    打回重做( UI 说的改动部分);
    }
    zhouxelf
        32
    zhouxelf   328 天前
    @lneoi 哈哈哈哈,最后拍一下肩,有画面了
    monimonipo
        33
    monimonipo   328 天前
    没钱口述 加钱给你用 AE 做
    deco
        34
    deco   328 天前
    @TwoDogSon 优秀。
    nbzdwss
        35
    nbzdwss   328 天前
    有时会找同效果的动画案例 一般动效一定是在哪看到过的....
    JerryCha
        36
    JerryCha   328 天前
    PowerPoint
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3294 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 10:08 · PVG 18:08 · LAX 02:08 · JFK 05:08
    ♥ Do have faith in what you're doing.