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

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

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

    反正也不怎么写样式了
    miniwade514
        24
    miniwade514  
       2021-01-06 17:44:10 +08:00
    厉害的设计师可以直接用 Sketch 做出各种转场效果,乍一看以为已经开发完了。

    特别花哨的动画(涉及颜色、形状之类的),直接给 GIF 吧。。
    dengshen
        25
    dengshen  
       2021-01-06 17:57:45 +08:00 via iPhone
    @lneoi 有画面了
    Gris
        26
    Gris  
       2021-01-06 17:59:58 +08:00 via Android
    pr+ae
    Gris
        27
    Gris  
       2021-01-06 18:00:39 +08:00 via Android
    @Gris rp 不是 pr
    otakustay
        28
    otakustay  
       2021-01-06 18:39:15 +08:00
    “这里要个动画”,然后 FE 自己挑喜欢的
    veike
        29
    veike  
       2021-01-06 19:12:44 +08:00 via Android
    @lneoi 😂😂😂😂
    a62527776a
        30
    a62527776a  
       2021-01-06 19:52:35 +08:00
    UI 自己 AE 导出 lottie
    lwlizhe
        31
    lwlizhe  
       2021-01-06 20:13:43 +08:00
    while(UI 觉得不好){
    打回重做( UI 说的改动部分);
    }
    zhouxelf
        32
    zhouxelf  
       2021-01-06 20:16:53 +08:00
    @lneoi 哈哈哈哈,最后拍一下肩,有画面了
    monimonipo
        33
    monimonipo  
       2021-01-06 21:04:08 +08:00
    没钱口述 加钱给你用 AE 做
    deco
        34
    deco  
       2021-01-07 09:12:04 +08:00
    @TwoDogSon 优秀。
    nbzdwss
        35
    nbzdwss  
       2021-01-07 12:37:21 +08:00
    有时会找同效果的动画案例 一般动效一定是在哪看到过的....
    JerryCha
        36
    JerryCha  
       2021-01-07 13:20:37 +08:00
    PowerPoint
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2713 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 12:24 · PVG 20:24 · LAX 04:24 · JFK 07:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.