V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
kelzake
V2EX  ›  程序员

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

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

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

    特别花哨的动画(涉及颜色、形状之类的),直接给 GIF 吧。。
    dengshen
        25
    dengshen  
       Jan 6, 2021 via iPhone
    @lneoi 有画面了
    Gris
        26
    Gris  
       Jan 6, 2021 via Android
    pr+ae
    Gris
        27
    Gris  
       Jan 6, 2021 via Android
    @Gris rp 不是 pr
    otakustay
        28
    otakustay  
       Jan 6, 2021
    “这里要个动画”,然后 FE 自己挑喜欢的
    veike
        29
    veike  
       Jan 6, 2021 via Android
    @lneoi 😂😂😂😂
    a62527776a
        30
    a62527776a  
       Jan 6, 2021
    UI 自己 AE 导出 lottie
    lwlizhe
        31
    lwlizhe  
       Jan 6, 2021
    while(UI 觉得不好){
    打回重做( UI 说的改动部分);
    }
    movelf
        32
    movelf  
       Jan 6, 2021
    @lneoi 哈哈哈哈,最后拍一下肩,有画面了
    monimonipo
        33
    monimonipo  
       Jan 6, 2021
    没钱口述 加钱给你用 AE 做
    deco
        34
    deco  
       Jan 7, 2021
    @TwoDogSon 优秀。
    nbzdwss
        35
    nbzdwss  
       Jan 7, 2021
    有时会找同效果的动画案例 一般动效一定是在哪看到过的....
    JerryCha
        36
    JerryCha  
       Jan 7, 2021
    PowerPoint
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1291 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 98ms · UTC 17:15 · PVG 01:15 · LAX 10:15 · JFK 13:15
    ♥ Do have faith in what you're doing.