问一下前端大佬，你们公司的产品或者 UI，在出原型或者设计稿的时候，是怎么体现动画的？
kelzake · 2021-01-06 13:41:08 +08:00 · 4409 次点击这是一个创建于 1404 天前的主题，其中的信息可能已经有所发展或是发生改变。
比如很多 CSS3, SVG 或者 canvas 的动画
我要实现这颗流星在这里 biu 一下划到右边转个圈再绕回来
他们是怎么准确地要前端实现这种动画，包含轨迹，速度，角度
我目前还没遇到这种需求，只是好奇
我要实现这颗流星在这里 biu 一下划到右边转个圈再绕回来
他们是怎么准确地要前端实现这种动画，包含轨迹，速度，角度
我目前还没遇到这种需求，只是好奇
 |
1
Lin0936 2021-01-06 13:43:15 +08:00  3
|
 |
2
muyunyun 2021-01-06 13:45:31 +08:00
ae + lottie
|
 |
3
waiaan 2021-01-06 13:50:11 +08:00
口述
|
 |
4
oxromantic 2021-01-06 13:53:56 +08:00 2
口述+手势
|
 |
5
TwoDogSon 2021-01-06 14:01:47 +08:00 12
另一个 app 的录屏
|
 |
6
GopherTT 2021-01-06 14:02:01 +08:00 1
口述 + AE
|
 |
7
Doracis 2021-01-06 14:05:53 +08:00
我们连 UI 都没有，全靠前端自己拿张破纸先画画页面，画好了大家一看，修修改改然后敲代码 （野路子，不要学。。）
|
 |
8
diliburong 2021-01-06 14:06:53 +08:00
figma
设计会在设计稿上把动画做好 |
 |
9
lneoi 2021-01-06 14:08:16 +08:00 24
一颗流星，从这儿，就这样一下子，biu biu biu，从这里到这里，然后嗖的一下调头，绕回来，要绕回来，到这儿，对对这儿，然后再来一次，（拍肩）你懂的吧？
|
 |
10
Chhxin 2021-01-06 14:08:32 +08:00
这里是个从天而降的动画
|
 |
11
WishMeLz 2021-01-06 14:11:17 +08:00
评论区太真实了，哈哈哈哈 口述+手势+另外一个 APP 的录屏。一口饭给我呛到了。笑死我了
|
 |
12
daysv 2021-01-06 14:22:56 +08:00
上述的各种都经历过。
感受比较好的就是设计师 ae 出动画，配合 lottie 或者手写实现。 |
 |
14
Vegetable 2021-01-06 14:29:05 +08:00
设计师还掌握 AE 出原型的技能是我没想到的
|
 |
15
hockor 2021-01-06 14:29:24 +08:00
我们有专业动效师，会给你做个视频出来。。。
|
 |
16
andyskaura 2021-01-06 14:59:42 +08:00
@TwoDogSon 太 tm 真实了 我怀疑你就是策划！
|
 |
17
wunonglin 2021-01-06 15:04:11 +08:00
输出视频，然后通过进度控制显示
|
 |
18
leeeeec 2021-01-06 15:13:33 +08:00
这种 AE+ Lottie，导出 json 文件，直接用
|
 |
19
wobuhuicode 2021-01-06 15:15:03 +08:00
呢个，这个按钮需要加个动画，首先你要让它抖动起来，就是左右那种，幅度不是很大，但是要动起来，然后呢，从这边这个点开始放大，尽量让放大的速度和抖动的速度一样，这样用户看起来比较舒服。放大完之后呢，你要有一道光从这边滑过去，滑了过去之后，又要一道光继续刚才的动作，对对对，就是你说的循环。
|
 |
20
xiaolongyuan 2021-01-06 16:06:09 +08:00
@wobuhuicode 我怀疑你在放视频
|
 |
21
keller 2021-01-06 16:13:21 +08:00
简单的口述 或者给参考效果，复杂的 AE 出视频
|
 |
22
lancelock 2021-01-06 16:16:57 +08:00
sketch xd 就可以做简单的动画吧
|
 |
23
jiangshanmeta 2021-01-06 17:34:51 +08:00
有个动画就行了
反正也不怎么写样式了 |
 |
24
miniwade514 2021-01-06 17:44:10 +08:00
厉害的设计师可以直接用 Sketch 做出各种转场效果，乍一看以为已经开发完了。
特别花哨的动画（涉及颜色、形状之类的），直接给 GIF 吧。。 |
 |
26
Gris 2021-01-06 17:59:58 +08:00 via Android
pr+ae
|
 |
28
otakustay 2021-01-06 18:39:15 +08:00
“这里要个动画”，然后 FE 自己挑喜欢的
|
 |
30
a62527776a 2021-01-06 19:52:35 +08:00
UI 自己 AE 导出 lottie
|
 |
31
lwlizhe 2021-01-06 20:13:43 +08:00
while(UI 觉得不好){
打回重做（ UI 说的改动部分）； } |
 |
33
monimonipo 2021-01-06 21:04:08 +08:00
没钱口述 加钱给你用 AE 做
|
 |
35
nbzdwss 2021-01-07 12:37:21 +08:00
有时会找同效果的动画案例 一般动效一定是在哪看到过的....
|
 |
36
JerryCha 2021-01-07 13:20:37 +08:00
PowerPoint
|
Select Language