• 请不要在回答技术问题时复制粘贴 AI 生成的内容
kelzake
V2EX  ›  程序员

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

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

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

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