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动画,付费