با استفاده از Framer Motion + Reactjs برای ایجاد انیمیشن های صاف برای متن ترانه ها و وب سایت های آکورد

سلام ، توسعه دهندگان دیگر! 👋🏼 اگر شما یک علاقه مندان به موسیقی مثل من هستید و عاشق ساخت برنامه های وب هستید ، ممکن است در مورد ایجاد سایتی برای اشعار آهنگ و آکورد گیتار فکر کرده باشید. این نوع سایت ها با برخی از انیمیشن های صاف می توانند درخشان باشند تا تجربه کاربر را ارتقا بخشند. امروز ، من به شما نشان می دهم که چگونه می توانید از Framer Motion با Reactjs استفاده کنید تا ظاهر آکورد آهنگ را در یک صفحه وب تحریک کنید. بیایید آن آکورد ها را به گونه ای پاپ کنیم که برای نوازندگان احساس جذاب و شهودی شود!

ما یک مؤلفه ساده برای نمایش آکورد آهنگ Alye Parusa (یک آهنگ محبوب راک روسی) می سازیم ، و من یک منبعی را به اشتراک می گذارم که می توانید آکورد ها را برای آزمایش این کار بگیرید. بیایید شیرجه بزنیم!

چرا انیمیشن ها برای سایت های متن ترانه مهم هستند

هنگامی که کاربران با اشعار آهنگ یا آکورد از سایتی دیدن می کنند ، آنها اغلب به دنبال یک تجربه یکپارچه هستند – چیزی که خواندن و جذابیت بصری آن آسان است. انیمیشن ها می توانند:

• آکورد های برجسته را به عنوان ظاهر می کنند ، و این باعث می شود که کاربران بتوانند از آن پیروی کنند.
• ظاهری مدرن و جلا ایجاد کنید که کاربران را درگیر نگه می دارد.
• با هدایت توجه کاربر به بخش های کلیدی ، دسترسی را بهبود بخشید.

Framer Motion در اینجا مناسب است زیرا سبک وزن ، آسان برای ادغام با React است و انیمیشن های صاف و مبتنی بر فیزیک را ارائه می دهد.

راه اندازی پروژه

ابتدا بیایید یک پروژه React اساسی را تنظیم کنیم و حرکت Framer را نصب کنیم.

npx create-react-app song-chords-animation
cd song-chords-animation
npm install framer-motion

سرور توسعه را شروع کنید:

npm start

ایجاد مؤلفه آکورد

بیایید یک مؤلفه ایجاد کنیم که آکورد “Alye Parusa” را نشان می دهد. من یک منبع عالی برای آکورد در pesni.ru پیدا کردم ، که ما به عنوان نمونه خود از آن استفاده خواهیم کرد.

در اینجا ساختار اساسی مؤلفه ما آورده شده است:

import React from "react";
import { motion } from "framer-motion";
import "./Chords.css";

const Chords = () => {
  const chordsData = [
    { line: "Dm", description: "Play softly for the intro" },
    { line: "G", description: "Switch with a light strum" },
    { line: "C", description: "Hold for two beats" },
    { line: "Am", description: "Transition smoothly" },
  ];

  return (
    

      
      

        Let’s animate the chords for Alye Parusa! Check the full chord sheet{" "}
        
          here
        {" "}
        to follow along.
      
      {chordsData.map((chord, index) => (
        
          
{chord.line}
          
{chord.description}
        
      ))}
    
  );
};

export default Chords;

و در اینجا برخی از CS های اساسی برای سبک کردن مؤلفه (chords.css) آورده شده است:

.chords-container {
  max-width: 600px;
  margin: 50px auto;
  text-align: center;
}

.chord-card {
  background: #f5f5f5;
  padding: 20px;
  margin: 10px 0;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.chord-card h3 {
  margin: 0;
  font-size: 24px;
  color: #2c3e50;
}

.chord-card p {
  margin: 5px 0 0;
  color: #7f8c8d;
}

اینجا چه اتفاقی می افتد؟

• جادوی حرکت Framer: ما از Motion.Div برای تحریک هر کارت وتر استفاده می کنیم. حالت اولیه موقعیت شروع (Opacity 0 و کمی در زیر) را تعیین می کند ، در حالی که Animate حالت نهایی را تعریف می کند (کاملاً قابل مشاهده و در جای خود).
• انیمیشن مبهم: انتقال با تأخیر: فهرست * 0.3 هر کارت را به صورت توالی تضمین می کند و یک اثر آبشار ایجاد می کند.
• پیوند به آکورد: من پیوندی به صفحه آکورد Alye Parusa گنجانده ام تا کاربران بتوانند در صورت تمایل به بازی ، برگه وتر کامل را بگیرند.

اضافه کردن اثرات شناور

بیایید کارت ها را با اضافه کردن یک اثر شناور با حرکت فریمر تعاملی کنیم:

  
{chord.line}
  
{chord.description}

در whileHover Prop کارت را کمی مقیاس می کند و وقتی کاربر روی آن شناور می شود ، سایه ای اضافه می کند. این یک لمس ظریف است که باعث می شود UI احساس پویاتر شود.

لمس های نهایی

برای اینکه این امر حتی کاربر پسند تر باشد ، می توانید:

• یک دکمه برای جابجایی بین آکورد و اشعار اضافه کنید.
• در هنگام انیمیشن کارت (با استفاده از API صوتی وب) یک اثر صوتی یا یک کلیپ صوتی کوچک از وتر را وارد کنید.
• کارتها را بر اساس نوع وتر متفاوت سبک کنید (به عنوان مثال ، آکوردهای اصلی به رنگ آبی ، جزئی در بنفش).

چرا این مهم است

افزودن انیمیشن ها به سایت اشعار و آکورد می تواند تجربه کاربر را به میزان قابل توجهی بهبود بخشد. به عنوان مثال ، در سایت هایی مانند pesni.ru ، جایی که من آکورد های Alye Parusa را گرفتم ، کاربران اغلب می خواهند به سرعت از طریق بخش ها اسکن کنند. انیمیشن ها به هدایت تمرکز خود کمک می کنند و باعث می شوند سایت تعاملی تر شود.

مراحل بعدی

• مؤلفه را گسترش دهید: یک ویژگی را برای جابجایی بین آهنگ ها یا بخش های مختلف (به عنوان مثال ، آیه ، کر) اضافه کنید.
• طراحی پاسخگو: اطمینان حاصل کنید که انیمیشن ها در دستگاه های تلفن همراه عالی به نظر می رسند.
• کار خود را به اشتراک بگذارید: اگر با این کار چیز جالبی ایجاد کردید ، آن را در نظرات به اشتراک بگذارید – من دوست دارم آن را ببینم!

به من اطلاع دهید که آیا سؤال دارید یا می خواهید عمیق تر به حرکت قاب شیر دهید. برنامه نویسی مبارک ، و به آن آکورد ها ادامه دهید! 🎶