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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 1739 天前的主题，其中的信息可能已经有所发展或是发生改变。

比如很多 CSS3, SVG 或者 canvas 的动画
我要实现这颗流星在这里 biu 一下划到右边转个圈再绕回来
他们是怎么准确地要前端实现这种动画，包含轨迹，速度，角度
我目前还没遇到这种需求，只是好奇

动画

CSS3

svg

canvas

36 条回复 2021-01-07 13:20:37 +08:00

Lin0936

2021-01-06 13:43:15 +08:00

www.protopie.io

muyunyun

2021-01-06 13:45:31 +08:00

ae + lottie

waiaan

2021-01-06 13:50:11 +08:00

口述

oxromantic

2021-01-06 13:53:56 +08:00

口述+手势

TwoDogSon

2021-01-06 14:01:47 +08:00

另一个 app 的录屏

GopherTT

2021-01-06 14:02:01 +08:00

口述 + AE

Doracis

2021-01-06 14:05:53 +08:00

我们连 UI 都没有，全靠前端自己拿张破纸先画画页面，画好了大家一看，修修改改然后敲代码（野路子，不要学。。）

diliburong

2021-01-06 14:06:53 +08:00

figma
设计会在设计稿上把动画做好

lneoi

2021-01-06 14:08:16 +08:00

一颗流星，从这儿，就这样一下子，biu biu biu，从这里到这里，然后嗖的一下调头，绕回来，要绕回来，到这儿，对对这儿，然后再来一次，（拍肩）你懂的吧？

Chhxin

2021-01-06 14:08:32 +08:00

这里是个从天而降的动画

WishMeLz

2021-01-06 14:11:17 +08:00

评论区太真实了，哈哈哈哈口述+手势+另外一个 APP 的录屏。一口饭给我呛到了。笑死我了

daysv

2021-01-06 14:22:56 +08:00

上述的各种都经历过。
感受比较好的就是设计师 ae 出动画，配合 lottie 或者手写实现。

xrr2016

2021-01-06 14:26:40 +08:00

@lneoi 键盘给你，你来写

Vegetable

2021-01-06 14:29:05 +08:00

设计师还掌握 AE 出原型的技能是我没想到的

hockor

2021-01-06 14:29:24 +08:00

我们有专业动效师，会给你做个视频出来。。。

andyskaura

2021-01-06 14:59:42 +08:00

@TwoDogSon 太 tm 真实了我怀疑你就是策划！

shakaraka

PRO

2021-01-06 15:04:11 +08:00

输出视频，然后通过进度控制显示

leeeeec

2021-01-06 15:13:33 +08:00

这种 AE+ Lottie，导出 json 文件，直接用

wobuhuicode

2021-01-06 15:15:03 +08:00

呢个，这个按钮需要加个动画，首先你要让它抖动起来，就是左右那种，幅度不是很大，但是要动起来，然后呢，从这边这个点开始放大，尽量让放大的速度和抖动的速度一样，这样用户看起来比较舒服。放大完之后呢，你要有一道光从这边滑过去，滑了过去之后，又要一道光继续刚才的动作，对对对，就是你说的循环。

xiaolongyuan

2021-01-06 16:06:09 +08:00

@wobuhuicode 我怀疑你在放视频

keller

2021-01-06 16:13:21 +08:00

简单的口述或者给参考效果，复杂的 AE 出视频

lancelock

2021-01-06 16:16:57 +08:00

sketch xd 就可以做简单的动画吧

jiangshanmeta

2021-01-06 17:34:51 +08:00

有个动画就行了

反正也不怎么写样式了

miniwade514

2021-01-06 17:44:10 +08:00

厉害的设计师可以直接用 Sketch 做出各种转场效果，乍一看以为已经开发完了。

特别花哨的动画（涉及颜色、形状之类的），直接给 GIF 吧。。

dengshen

2021-01-06 17:57:45 +08:00 via iPhone

@lneoi 有画面了

Gris

2021-01-06 17:59:58 +08:00 via Android

pr+ae

Gris

2021-01-06 18:00:39 +08:00 via Android

@Gris rp 不是 pr

otakustay

2021-01-06 18:39:15 +08:00

“这里要个动画”，然后 FE 自己挑喜欢的

veike

2021-01-06 19:12:44 +08:00 via Android

@lneoi

a62527776a

2021-01-06 19:52:35 +08:00

UI 自己 AE 导出 lottie

lwlizhe

2021-01-06 20:13:43 +08:00

while(UI 觉得不好){
打回重做（ UI 说的改动部分）；
}

zhouxelf

2021-01-06 20:16:53 +08:00

@lneoi 哈哈哈哈，最后拍一下肩，有画面了

monimonipo

2021-01-06 21:04:08 +08:00

没钱口述加钱给你用 AE 做

deco

2021-01-07 09:12:04 +08:00

@TwoDogSon 优秀。

nbzdwss

2021-01-07 12:37:21 +08:00

有时会找同效果的动画案例一般动效一定是在哪看到过的....

JerryCha

2021-01-07 13:20:37 +08:00

PowerPoint