スパイスを使用してアニメーションを使用してWebアプリを🔥

背景

こんにちは、そのnaman.この動画はお気に入りから削除されています.

しかし、あなたはまた、あなたのアプリでこれらのようなアニメーションを適用する方法を疑問に思ったことがありますか?
はいなら、お気に入りの図書館の一つに紹介します.Lottie (作成)Airbnb ). Lottieはウェブに限られていませんAndroid , iOS , React-Native そして、より多く.🤩
たった今、我々はTreactでLottie実現を見ます(あるいは、あなたは反応を使うことができます).

ハッキング開始👨‍💻👩‍💻 :

Note: Before moving forward make sure you have Node.js installed in your system. I recommend installing Node.js via nvm(Node Version Manager)
1 - preactプロジェクトを作成する🛠:

npm i -g preact-cli               //only do this if you don't have preact cli
preact create default my-lottie-app
cd my-lottie-app
npm run dev

使えますcreate-react-app を使用する場合.
2 -インストール@lottiefiles/react-lottie-player NPMパッケージ📦

npm i lottiefiles/react-lottie-player --save

私たちは@lottiefiles/react-lottie-player の代わりにlottie-web by Airbnb それはきれいな方法を提供しています/APIの前に/TreactでLottieアニメーションを使用します.
さらに、より多くのラッパーが利用可能ですreact-lottie , lottie-react-web , lottie-react その他多数.
3 -導入lottiefiles.com 🚀

それはLottieファイルのハブです.デザイナーは、世界中でTechiesのためにこれらのいかしたアニメーションを構築する際に、多くの時間を費やします.私は、これらの創造的なデザインに置くハードワークに感謝します.
4 -実装🤟
👉 上記のウェブサイト上でお好みのLottieファイルを選択します.選択中this で.

👇 アプリ.js

import { Player } from "@lottiefiles/react-lottie-player";

export default function App() {
  return (
    <div class="container">
      <div class="app">
        Hola <span class="devs">Developers !</span>
      </div>
      <div>
        <Player
          autoplay
          loop
          src="https://assets1.lottiefiles.com/packages/lf20_3vbOcw.json"
          style={{ height: "400px", width: "400px" }}
        />
      </div>
    </div>
  );
}

👇 Code on Codesandbox.io ( Full Screen Preview )
👉 このコードを見つけるGithub Note: I cleaned up the unnecessary files, routing structure to keep the demo simple. You can always add your creativity and make it better.それで、それです.それは簡単です、そして、それはamaaazzingに見えます.だから私は❤️ それ.
今日はこれです.任意のタイプのフィードバックを提供してください.私はそれを感謝します.一方、Twitterで私を見つけることができます.
サインオフ.また近いうちに.