กำลังปรับใช้หลายจอภาพเคลื่อนไหวในหนึ่งส่วนประกอบการใช้ Framer การเคลื่อนไหว variants

0

คำถาม

ฉันเป็นคนใหม่โดย Framer นการเคลื่อนไหวอะไรที่ฉันกำลังพยายามทำคือ imitating ขับเคลื่อนไหวโดยการย้ายภาพในขณะที่มันกำลังหมุน
ฉันไม่รู้ว่าต้องทำให้มันทำงาน
ฉันพยายามอะไรแบบนี้แต่มันไม่ทำงาน

    const imageRuning :Variants = {
                                   hidden:{
                                          x:"-100vw",
                                          opacity:0
                                         },
                                  visible:{
                                          x:0,
                                          opacity:1,
                                          transitionDuration:"3s"

                                           },
                                   rotation:{
                                            rotate:[180,0],
                                            transition:{
                                                  repeat:Infinity,
                                                  type:"tween",
                                                  ease:"linear"
                                                  }
                                             }
                                       }
  
            const  HomePage =()=> {

                   return (

                        <div className={style.animationContainer}>
                             <motion.img 
                                  className={style.animatedImage}
                                  variants={imageRuning}
                                  initial="hidden"
                                  animate={["visible","rotation"]}
                                  width={100} height={100} src="/static/me.jpg" >
                             </motion.img>
                        </div>
              )

ช่วยได้โปรด

animation css framer-motion javascript
2021-11-22 07:16:50
1

คำตอบที่ดีที่สุด

0

มันดูเหมือนว่าคุณกำลังพยายามที่จะเคลื่อนไหวสองคนคุณสมบัติของ(x แล้ว rotate)ต่างกันการเปลี่ยนค่าของ.

คุณสามารถแค่เคลื่อนไหวที่จะหนึ่งผังย่อยที่เป็นเวลาดังนั้นถ้าคุณต้องการให้พวกเขาต้องเกิดขึ้นในเวลาเดียวกัน,คุณจะต้องรวมพวกนั้นเข้ามาในนัดเดียวผังย่อย. โชคดีที่คุณสามารถพิเศษสำหรับกำหนดการเปลี่ยนค่าสำหรับพ animating ทรัพย์สินโดยเรียกรายการมันภายใน transition วัตถุ.

เหมือนนี้:

visible: {
  x: 0,
  opacity: 1,
  rotate: 180, // rotate and x animate in the same variant
  transition: {
    duration: 3, // default transition duration (applies to x and opacity)
    rotate: {
      // unique transition for rotate property only
      repeat: Infinity,
      type: "tween",
      ease: "linear"
    }
  }
}

วิธีที่คุณมีมันตั้งขึ้น,สิ่งที่จะทำต่อไปหมุนรอแม้แต่หลังจากที่เอ็กซ์เคลื่อนไหวเสร็จ(repeat: Infinity). นั่นคือสิ่งที่คุณต้องการ? คุณสามารถมองเข้าไปใน การกระตุ้นการทำงานควบคุม ถ้าคุณต้องการมากกว่าการควบคุม

2021-11-22 23:13:31

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Česk
..................................................................................................................
Português
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่