北京兰亭妙微 UI 设计公司，成立 16 年来，始终保持着对国内外优秀设计作品的学习与研究。我们持续追踪全球前沿的 UI/UX 设计趋势，从中提炼可落地的设计方法论，分享给同样热爱设计的你。
1. 给素材进行预处理（加一个素材没有的颜色作为背景），这里进行预处理是为后期在AE中进行抠像处理做准备
2.把首尾帧的参考图给 AI，生成适配的动态提示词。因为要做 “从无到有” 的动效，推荐用首尾帧生成，在提示词里写清楚首尾帧的画面和运动过程即可
这是AI给到我的提示词
1. 选择「首尾帧生成」模式，首帧上传纯蓝色图片，尾帧上传花朵碰到一起，花瓣爆开的图片。
首帧：
尾帧：
2. 查看生成的视频
现在生成的视频，在碰撞后有很多杂线飞出，整体太乱了，我们修改提示词，让他不要有杂线飞出。
我们直接描述问题发给AI，让AI给我们修改提示词。
这是AI给到我的提示词：
3. 把新的提示词给到AI，让AI重新生成视频。
4. 现在生成的动画是没有杂线飞出了，但是节奏不对，两朵花碰到一起后，延迟了一会花瓣才爆发出来，我希望他是两朵花碰到一起后花瓣就直接爆发出来，那我们就继续描述问题，让AI给我们修改提示词。
https://image.uisdc.com/wp-content/uploads/2026/07/cf7774965441bbe94e0bbe8dd1bf35ba.webp
1. 素材导入AE，通过颜色范围，快速获取透明底视频（这里可以使用颜色范围一键吸取背景色是因为我们在最开始进行了预处理，添加了一个素材没有的颜色做背景）
2. 把透明背景的素材放到界面里面看一下效果：
https://image.uisdc.com/wp-content/uploads/2026/07/d4294b34e241951ec3215266d234cb91.webp
3. 现在看起来边缘有点生硬，我们给他加一个边缘虚化的效果，让边缘柔和一点。这里我们添加一个蒙版，调整蒙版的蒙版羽化就可以啦，这是调整好的效果：
https://image.uisdc.com/wp-content/uploads/2026/07/fb6a63beef359221e470b3592bf16158.webp
最后，来看下这个动效在其他页面的效果：
https://image.uisdc.com/wp-content/uploads/2026/07/d6078bbcf165cd0b62ce884c03ac1488.webp
转载自优设网
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
