我用 Codex 调用这个动效Skill，不用手写复杂代码，一句话生成高级创意动画！

莹柳设计
0 评论 155 浏览 0 收藏 6 分钟
哈喽大家好，我是萤柳！
最近刷到一个Skill，作者Livo把一些基础的动画效果做成了一个Skill。
一句话就可以输出这些动画效果，不用长篇prmmpt就能直接输出代码。
如果你不想要输出代码，想直接输出动画效果也是可以的。
用Codex或者豆包啥Agent都可以。
这些基础动效最终可以结合自己的想象力和审美，又能做出特别的效果。
比如可以看看下图这些作者做出来的最终效果。
话不多说，手把手教大家怎么使用！

一、如何下载

怎么下载？
非常简单，一句话搞定。
让Codex直接安装使用，或者其他Agent都可以，当然Codex的效果肯定比豆包的好。

二、基础动效

1、有真实物理效果的珠帘

/p5-animation 蓝色的雨帘，密集一点，做成动画效果

看看效果。

2、自然生长的树枝和花

/p5-animation 5条自然生长的花枝，做成动画效果

看看效果。

3、自由飞舞的飞燕

/p5-animation 30只黑色飞燕，做成动画效果

看看效果。
如果你想要代码，不想直接出动画效果，你就直接去掉【做成动画效果】这几个字发给Codex就可以了。
如下图，直接出的代码。

三、创意动效

通过上面的基础动效，就可以做自己一些创意动效了，比如我做了两个小示例。

1、鹿角开花

比如我用gpt生成了一张这样的图。
我把前面自然生长的花枝动效，放在这张图的鹿上面。
一个浅浅的动态效果就出来了，如下图。

2、头饰珠帘

比如一些头饰，前面会有一些珠帘的效果，头饰跟珠帘结合一下。
用gpt生成了一张这样的图。
然后输入下面的提示词，可以根据提示词自行调整。
它就会给你生成自然生长的类似效果了。
这次分享的这些动效，不仅可以用在图片或视频中，也非常适合应用到网页设计里。
通过动效与用户操作结合，原本静态的视觉元素就能变得更加灵活、有趣，也能让网页呈现出更强的个性。
当然，在使用这些动效时也要注意，不要为了追求效果而影响页面的加载速度、信息阅读和操作体验。
希望今天分享的这些案例，能够给大家在网页动效设计和视觉表达上带来一些新的思路。
可以结合自己的网页项目动手尝试一下，说不定就能做出让人眼前一亮的效果。
今天的分享就到这里，希望对你有帮助！

本文由作者【莹柳】，微信公众号：【莹柳设计】，原创/授权 发布于平台，未经许可，禁止转载。

更多精彩内容，请关注人人都是产品经理微信公众号或下载App
莹柳设计
7年UI设计师，专注AI设计绘画领域，分
3篇作品 1757总阅读量
企业架构16——市场营销体系搭建（下）
08-1210578 浏览
企业架构16——市场营销体系搭建（下）
美团外卖进军香港，UI竟然改头换面了！
06-159397 浏览
美团外卖进军香港，UI竟然改头换面了！
电商平台广告战：摇一摇广告激起苹果反击
11-152920 浏览
电商平台广告战：摇一摇广告激起苹果反击
生活中哪些体验很好，但容易被忽略的小设计
10-078123 浏览
生活中哪些体验很好，但容易被忽略的小设计
电商土老板超实用的消费者心理学，提升转化率100%！
10-265967 浏览
电商土老板超实用的消费者心理学，提升转化率100%！
评论
评论请登录
  1. 目前还没评论，等你发挥！