https://www.motionity.app/ |
Motionity 免费并开源不需要注册打开直接使用,支持添加带有缓动的关键帧、遮罩层、应用过滤器、文本动画、Lotties、音频和视频的插入,支持导出 WEBM video、GIF和图片(不支持Figma 直接导入) |
自带素材库里有视频、图片、音频、蒙版、滤镜、文字动画。甚至能上传 Lottie 动画再编辑。 |
|
https://appmotion.design/ |
APP Motion ,App 动效收录了 150 个案例 |
https://uxdesign.cc/transition-animations-a-practical-guide-5dba4d42f659 |
韩国设计师,总结了过渡动画的基本原则,包括平滑性、一致性等等。还提供了一些具体的过渡动画技巧,如渐变、缩放、淡入淡出和滑动。 |
https://svg.wtf/ |
svg 在线制作工具,可以直观的看到 svg 背后的代码结构,更方便学习理解。 |
https://rive.app/downloads |
Rive用于创建和设计高质量动画和交互式内容的应用。它允许设计师和开发人员在一个平台上进行实时设计和动画制作,支持创建复杂的动画效果,并可以将这些动画集成到各种平台和应用中。 不付费个人可无限项目 |
https://epiceasing.com/?curve=0.470%2C0.000%2C0.745%2C0.715&language=css |
可视化设置动画参数的小工具,并可以导出给 iOS 代码使用。 |
https://svg-tutorial.com/ |
SVG全面教程 |
https://motion.zajno.com/ |
Zajno 发布的一份动效设计原则在线手册 |
https://github.com/YOYZHANG/design-material?tab=readme-ov-file |
除了动画素材方面一些开源素材 还有很多设计资源的集成站 独立开发者必备 |
https://www.easing.dev/ |
做动画设计和开发必备的 easing 曲线合集,并给出了 Framer motion 的代码。 |
https://www.reactbits.dev/ |
非常精致的react动画库 |
https://magecdn.com/tools/svg-loaders |
开源免费SVG小动画 |
https://github.com/joanrod/star-vector |
开源模型,通过图像到SVG和文本到SVG的生成任务,结合图像理解和SVG代码生成,实现了更紧凑和语义丰富的SVG输出 |
https://examples.motion.dev/react |
不错的motion动画,付费 |