เคล็ดลับ
หากคุณชอบห้องสมุดนี้โปรดพิจารณาสนับสนุนผู้สร้าง
React Awesome เปิดเผยเป็นไลบรารีสำหรับแอพตอบสนองที่เขียนใน typeScript ที่เพิ่มการเปิดเผยภาพเคลื่อนไหวโดยใช้ Intersection Observer API เพื่อตรวจจับเมื่อองค์ประกอบปรากฏในวิวพอร์ต แอนิเมชั่นได้รับการจัดเตรียมภายในโดยอารมณ์และนำไปใช้เป็นภาพเคลื่อนไหว CSS เพื่อรับประโยชน์จากการเร่งความเร็วของฮาร์ดแวร์
เพื่อเพิ่มแพ็คเกจนี้เป็นการพึ่งพาแอปของคุณเพียงแค่เรียกใช้
npm install react-awesome-reveal @emotion/react --saveหรือถ้าคุณใช้เส้นด้าย:
yarn add react-awesome-reveal @emotion/reactหรือถ้าคุณใช้ PNPM (ตามที่ฉันแนะนำอย่างยิ่ง):
pnpm add react-awesome-reveal @emotion/react นำเข้าเอฟเฟกต์จาก React Awesome เปิดเผยไปยังส่วนประกอบ React ของคุณตัวอย่างเช่นเอฟเฟกต์ Fade :
import { Fade } from "react-awesome-reveal" ;จากนั้นเพียงแค่ห่อส่วนประกอบที่คุณต้องการเคลื่อนไหว:
< Fade >
< p > I will gently appear as I enter the viewport </ p >
</ Fade > เอฟเฟกต์ที่ได้รับการสนับสนุนในปัจจุบันคือ Bounce , Fade , Flip , Hinge , JackInTheBox , Roll , Rotate , Slide และ Zoom อ้างถึงเอกสารประกอบ antiMive.css สำหรับรายละเอียด
ตั้งแต่เวอร์ชัน 3 แอนิเมชั่นผู้แสวงหาความสนใจถูกห่อหุ้มด้วยองค์ประกอบ AttentionSeeker ซึ่งยอมรับ effect ที่เรียกว่าเอฟเฟกต์ที่ระบุภาพเคลื่อนไหวเพื่อแสดงผล (ค่าเริ่มต้นเป็น "bounce” ) เอฟเฟกต์ที่รองรับคือ: ”bounce" , "flash" , "heartBeat" "headShake” ", "jello” "pulse" , "rubberBand" , “shakeX" “shake” "shakeY” , "swing” , "tada" และ “wobble”
อีกครั้งอ้างถึงเอกสารประกอบ antiMive.css สำหรับรายละเอียด
คุณสามารถส่งอุปกรณ์ประกอบฉากต่อไปนี้ไปยังส่วนประกอบแอนิเมชั่นเพื่อปรับแต่งพฤติกรรม:
| ข้อต่อ | คำอธิบาย | ค่า | ค่าเริ่มต้น |
|---|---|---|---|
cascade | หากตั้งค่าเด็กแต่ละคนของแอนิเมชั่นเปิดเผยจะได้รับการกำหนดความล่าช้าโดยอัตโนมัติซึ่งคำนึงถึงรุ่นก่อน (เด็ก i เข้าสู่วิวพอร์ตหลังจาก i * delay * damping ) - มีประโยชน์สำหรับรายการภาพเคลื่อนไหว | true หรือ false | false |
damping | ปัจจัยที่มีผลต่อความล่าช้าที่แต่ละองค์ประกอบเคลื่อนไหวในอนิเมชั่นแบบเรียงซ้อนจะถูกกำหนด หาก damping = 1 ความล่าช้าจะเท่ากับระยะเวลาภาพเคลื่อนไหว หาก damping < 1 ความล่าช้าจะต่ำกว่าระยะเวลาการเคลื่อนไหว หาก damping > 1 ความล่าช้าจะมากกว่าระยะเวลาภาพเคลื่อนไหว | number | 0.5 (หมายความว่าความล่าช้าจะเป็นครึ่งหนึ่งของระยะเวลาการเคลื่อนไหว) |
direction | ต้นกำเนิดของภาพเคลื่อนไหว (หากมี) | โดยปกติ "down" , "left" , "right" หรือ "up" โดยมีข้อยกเว้นบางอย่างที่บันทึกไว้ในรหัส | undefined |
delay | เวลารอก่อนที่ภาพเคลื่อนไหวจะเริ่ม (เป็นมิลลิวินาที) | number | 0 |
duration | ระยะเวลาแอนิเมชั่น (มิลลิวินาที) | number | 1000 |
fraction | องค์ประกอบควรอยู่ในวิวพอร์ตก่อนที่ภาพเคลื่อนไหวจะถูกทริกเกอร์ | number ระหว่าง 0 ถึง 1 | 0 |
triggerOnce | ระบุว่าภาพเคลื่อนไหวควรทำงานเพียงครั้งเดียวหรือทุกครั้งที่องค์ประกอบเข้า/ออก/เข้าสู่วิวพอร์ตอีกครั้ง | true หรือ false | false |
className | ชื่อคลาสที่จะเพิ่มลงในองค์ประกอบคอนเทนเนอร์ | string | undefined |
style | สไตล์อินไลน์ที่จะเพิ่มลงในองค์ประกอบคอนเทนเนอร์ | React.CSSProperties | undefined |
childClassName | ชื่อคลาสที่จะเพิ่มลงในองค์ประกอบลูก | string | undefined |
childStyle | สไตล์อินไลน์เพื่อเพิ่มองค์ประกอบเด็ก | React.CSSProperties | undefined |
onVisibilityChange | การโทรกลับดำเนินการเมื่อองค์ประกอบเข้าหรือออกจากวิวพอร์ต หากมีมากกว่าหนึ่งองค์ประกอบที่มีภาพเคลื่อนไหวฟังก์ชั่นนี้จะเรียกในแต่ละองค์ประกอบ | (inView: boolean, entry: IntersectionObserverEntry) => void | undefined |
เพื่อเรียกภาพเคลื่อนไหวเพียงครั้งแรกที่องค์ประกอบเข้าสู่ Viewport:
< Slide triggerOnce >
< p > I will animate only the first time you see me </ p >
</ Slide > ในการรวมแอนิเมชั่นหลายตัวให้ตั้งค่า cascade Prop เป็น true :
< Fade cascade >
< p > I enter first... </ p >
< p > ...then comes my turn... </ p >
< p > ...and finally you see me! </ p >
</ Fade > เล่นกับ Prop damping เพื่อเปลี่ยนความล่าช้าที่เด็กแต่ละคนจะปรากฏขึ้นอย่างต่อเนื่อง:
< Fade cascade damping = { 0.1 } >
< p > I enter first... </ p >
< p > ...then comes my turn... </ p >
< p > ...and finally you see me! </ p >
</ Fade > เริ่มต้นจากเวอร์ชัน 3.2.0 คุณสามารถกำหนดภาพเคลื่อนไหวที่กำหนดเอง! เพียงแค่นำเข้าองค์ประกอบ Reveal (ซึ่งเป็นการส่งออกเริ่มต้นของไลบรารี - ให้ชื่อที่คุณต้องการ) และส่งผ่าน keyframes prop:
import React from "react" ;
import Reveal from "react-awesome-reveal" ;
import { keyframes } from "@emotion/react" ;
const customAnimation = keyframes `
from {
opacity: 0;
transform: translate3d(-200px, -100px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
` ;
function CustomAnimation ( { children } ) {
return < Reveal keyframes = { customAnimation } > { children } </ Reveal > ;
} หากไม่มีการผ่าน keyframes เพียร์แอนิเมชั่นที่แสดงผลเริ่มต้นจะเป็นทางเข้าซีดจางจากด้านซ้าย (เทียบเท่ากับ <Fade direction="left">...</Fade> )
นอกจากนี้คุณยังสามารถผ่านอุปกรณ์ประกอบฉากเหล่านี้เพื่อ Reveal :
cascadedampingdelaydurationfractiontriggerOnceclassName และ childClassNamestyle และ childStyleonVisibilityChangeผู้สังเกตการณ์ทางแยกเป็น API ที่ใช้ในการตรวจสอบว่าองค์ประกอบอยู่ในวิวพอร์ตหรือไม่ การสนับสนุนเบราว์เซอร์นั้นดีมาก - ด้วยการสนับสนุนการเพิ่ม Safari ใน 12.1 เบราว์เซอร์หลักทั้งหมดสนับสนุนผู้สังเกตการณ์สี่แยก
หากคุณต้องการรองรับเบราว์เซอร์เก่าให้เพิ่มโพลีฟิลด์สำหรับผู้สังเกตการณ์สี่แยก API
คุณสามารถเพิ่ม polyfill ได้โดยตรงหรือใช้บริการเช่น polyfill.io เพื่อเพิ่มเมื่อจำเป็น
yarn add intersection-observerจากนั้นนำเข้าในแอพของคุณ:
import "intersection-observer" ;หากคุณใช้ webpack (หรือคล้ายกัน) คุณสามารถใช้การนำเข้าแบบไดนามิกเพื่อโหลดโพลีฟิลได้เฉพาะในกรณีที่จำเป็น การใช้งานพื้นฐานอาจมีลักษณะเช่นนี้:
/**
* Do feature detection, to figure out which polyfills needs to be imported.
**/
async function loadPolyfills ( ) {
if ( typeof window . IntersectionObserver === "undefined" ) {
await import ( "intersection-observer" ) ;
}
} หากต้องการดูเอกสารประกอบสำหรับเวอร์ชันก่อนหน้านำทางผ่านแท็กที่ผ่านมาในที่เก็บโครงการของ GitHub และอ่าน readMe สำหรับเวอร์ชันเฉพาะนั้น
ซอร์สโค้ดโครงการได้รับอนุญาตภายใต้ใบอนุญาต MIT คุณมีอิสระที่จะแยกที่เก็บนี้แก้ไขรหัสแบ่งปันและใช้งานทั้งเพื่อวัตถุประสงค์ที่ไม่ใช่เชิงพาณิชย์และเชิงพาณิชย์
