📱 Mockoops

介绍动图

在几秒钟内将无聊的屏幕录像转换为生动的动画模拟图，由React驱动。

⚡️ 由无服务器函数支持的超快渲染
📸 参数一经更改，预览立即更新
📏 响应式视频模板
🥳 附带一系列适用于不同场景的模板
😎 长期缓存以节省渲染时间
🌤 浅色/深色模式（手动+设备偏好）

Mockoops是什么？点击这里👇

🎬 模板

Pckd提供了一系列模板。在这里查看最终渲染效果：

现有模板 🌈

Mockoops开箱即用，提供了一系列模板！这些模板具有很强的响应性、可定制性，并针对各种动态图形视频需求进行了多样化设计。以下是其中一些模板：

📐 倾斜展示

这个模板非常适合长篇内容，使其更具吸引力（可能也不那么无聊）。这里有一个快速展示：

https://user-images.githubusercontent.com/48997634/177477832-8b9c6aff-5f57-4f78-b4fe-e2fbc920d913.mp4

⚡️ 快速预告

这个模板非常适合快速预告，开始时通过只显示输入视频的某些部分来营造期待感，然后慢慢揭示整个内容。

这是我用它来展示Pckd的效果：

https://user-images.githubusercontent.com/48997634/177477866-52c74675-cedb-4981-a301-fa97151caa16.mp4

💻 笔记本电脑缩放

这个模板适合喜欢低调风格的人。它可以在一个美丽的工作站背景上展示移动的MacBook屏幕上的视频。这也可以用于非屏幕录制的内容！

https://user-images.githubusercontent.com/48997634/177477863-aab11867-8fc0-4402-8c75-6bbca14de4f4.mp4

📚 文字揭示

这个模板适用于短小的公告或揭示。最适合当你只有一个应用程序界面，想要预告即将推出的状态时使用！

https://user-images.githubusercontent.com/48997634/177477874-b219ce0d-a26e-4901-afbe-23d35c309c2e.mp4

它甚至可以用于产品新版本发布等场景。这个模板的可能性是无穷无尽的。

🎭 旋转标题

这个模板非常适合在视频前展示一些文字的场景，而无需设置任何复杂的内容。

https://user-images.githubusercontent.com/48997634/177477870-a48ed8bb-0bec-4c4b-a483-73a95250e6e3.mp4

🏡 架构

这里有一个图表解释了所有组件是如何协同工作的：

<div align="center"> <img src="https://yellow-cdn.veclightyear.com/835a84d5/f0b3f10d-89aa-4b1f-a118-c768daf39b33.png" height="300" /> <p>这就是所有组件如何配合使用的方式</p> </div>

📐 技术栈

🔥 NextJS - 因为它是最好的前端JS框架之一
▶️ Remotion - 用于视频和渲染
🪣 Linode S3存储 - 用于快速将上传的视频文件存储在存储桶中
💅 Sass - 用于美化应用界面
🌱 MongoDB（与Linode配合） - 用于缓存具有相同输入参数的渲染
🔫 React Recoil - 用于全应用状态管理
🍞 React Hot Toast - 用于通知
🎉 React Confetti - 用于欢乐的动画
💦 React Dropzone - 用于处理高级拖放动画

💾 安装

前提条件

NodeJS 14+
NPM安装
具有读写权限的S3兼容存储桶（可选）
用于渲染的Serverless账户（可选）

只有设置好所有这些，视频才能渲染为mp4文件。但是，即使没有最后两项，你仍然可以在浏览器中预览视频。

安装步骤

使用Linode或任何其他云提供商设置对象存储桶。
将.env.example文件重命名为.env。
使用npm install安装包。
按照Remotion Lambda安装文档的安装说明进行操作，直到第6步。
从lambda控制台获取密钥ID和密钥后，将这些值和其他值编辑到.env文件中。
使用npx remotion lambda policies validate验证.env设置。只有在所有项目都显示对勾时才继续，否则从第4步重新开始。
在src/deploy/regions.ts文件中编辑你首选的地区。
使用命令npm run deploy部署函数。等待部署完成。