CapDrive
คู่มือการใช้งาน

RepeatedLayout

ทำซ้ำรูปแบบเป็นระยะๆ ในหน้าต่างการครอบตัด ซึ่งเหมาะสำหรับการเคลื่อนย้ายเครื่องชั่งและวงเวียนอย่างต่อเนื่อง period กำหนดช่วงเวลาการทำซ้ำ value และ anchor กำหนดว่าค่าปัจจุบันจะอยู่ในแนวใด

ตัวอย่าง

function main() {
  return (
    <RepeatedLayout axis="horizontal" period={120} value={76} anchor={0.5}>
      <Text width={120}>N</Text>
    </RepeatedLayout>
  );
}

การใช้งาน

  • children คือลายหนึ่งชุด period คือช่วงซ้ำ value ตรง anchor เมื่อเพิ่มค่าลายเลื่อนกลับทาง และเพิ่ม offset เป็นพอยต์ both ซ้ำสองแกน แยกด้วย {x,y} ได้ ตัดภาพในหน้าต่างเสมอ
  • x/y และ transform ทำงานหลังจัดพื้นที่ การเลื่อนลูกไม่ผลักตัวข้างเคียง ใช้ spacing หรือ Spacer เปลี่ยนช่องว่าง การหมุนและย่อขยายมีผลกับภาพทั้งหมด

คุณสมบัติ

children?ViewContent

เนื้อหาการวาดของมุมมองลูก

axis?"horizontal" | "vertical" | "both"

ซ้ำแบบ horizontal, vertical หรือ both; both เป็นตาราง

ตัวอย่าง"horizontal"
period?RepeatAxisValue

ระยะระหว่างสำเนาเป็นพอยต์ ใช้ x/y แยกแต่ละแกน

ตัวอย่าง360
value?RepeatAxisValue

พิกัดเนื้อหาที่วางตรง anchor ค่าเพิ่มทำให้สำเนาเลื่อนกลับทิศ ไม่ใช่ความเร็ว

ตัวอย่าง$data.current.heading?.direction ?? 0
anchor?RepeatAxisValue

ตำแหน่งในพื้นที่มองเห็น: 0 เริ่ม 0.5 กลาง 1 จบ

ตัวอย่าง0.5
offset?RepeatAxisValue

ระยะเลื่อนเพิ่มเป็นพอยต์หลังจัด value ตรง anchor

ตัวอย่าง0
alignment?"topLeading" | "top" | "topTrailing" | "leading" | "center" | "trailing" | "bottomLeading" | "bottom" | "bottomTrailing"

จัดองค์ประกอบซ้อนในเก้าตำแหน่งขอบและกลาง

ตัวอย่าง"topLeading"
คุณสมบัติทั่วไป
width?number | "auto" | "fill"

ความกว้างเป็นพอยต์ ปรับขนาดอัตโนมัติ หรือเติมเต็มพื้นที่แม่

ตัวอย่าง100
height?number | "auto" | "fill"

ความสูงเป็นพอยต์ ปรับขนาดอัตโนมัติ หรือเติมเต็มพื้นที่แม่

ตัวอย่าง80
padding?number

ระยะขอบภายในเนื้อหา หน่วยพอยต์

ตัวอย่าง0
x?number

เลื่อนภาพเป็นพอยต์: x ไปขวา y ลงล่าง ไม่เปลี่ยนพื้นที่ในเลย์เอาต์

ตัวอย่าง0
y?number

เลื่อนภาพเป็นพอยต์: x ไปขวา y ลงล่าง ไม่เปลี่ยนพื้นที่ในเลย์เอาต์

ตัวอย่าง0
transform?ViewTransform

แปลงทั้ง View โดยไม่เปลี่ยนเลย์เอาต์ ระยะเลื่อนเป็นพอยต์ หมุน/เอียงเป็นองศา สเกล 1 ไม่เปลี่ยน จุดยึด 0–1

ตัวอย่าง{rotation: 0}
background?Paint

สีหรือไล่สีพื้นหลัง clear คือโปร่งใส

ตัวอย่าง"clear"
opacity?number

ความทึบทั้ง View: 0 โปร่งใส 1 ทึบ

ตัวอย่าง1
cornerRadius?number

รัศมีมุมโค้งเป็นพอยต์

ตัวอย่าง0
clip?"rectangle" | "ellipse"

รูปทรงตัด rectangle หรือ ellipse; Material ใช้ false เพื่อปิดได้

ตัวอย่าง"rectangle"
mask?View | null

View มาสก์อัลฟา จัดกึ่งกลางโดยไม่ส่งผลต่อเลย์เอาต์; null ปิดการใช้มาสก์

ตัวอย่าง<Circle width="fill" height="fill" background="white"/>
zIndex?number

ลำดับวาดระหว่างองค์ประกอบระดับเดียวกัน ค่ายิ่งมากยิ่งอยู่หน้า

ตัวอย่าง0
blur?number

รัศมีเบลอเป็นพอยต์ 0 คือปิด

ตัวอย่าง4
innerShadow?DrawingEffect

สี ความทึบ รัศมีเบลอ และระยะ x/y ของเอฟเฟกต์ ระยะเป็นพอยต์

ตัวอย่าง{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

สี ความทึบ รัศมีเบลอ และระยะ x/y ของเอฟเฟกต์ ระยะเป็นพอยต์

ตัวอย่าง{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

สีเงาภายนอก

ตัวอย่างHDR("black")
shadowOpacity?number

ความทึบเงา 0–1; 0 ซ่อนเงา

ตัวอย่าง0
shadowRadius?number

รัศมีเบลอเงาภายนอกเป็นพอยต์

ตัวอย่าง4
shadowX?number

เลื่อนเงาเป็นพอยต์: x ไปขวา y ลงล่าง

ตัวอย่าง0
shadowY?number

เลื่อนเงาเป็นพอยต์: x ไปขวา y ลงล่าง

ตัวอย่าง2
animations?Animation[]

แอนิเมชันเมื่อคุณสมบัติเปลี่ยน duration/delay เป็นวินาที from/to เป็นปลายทาง repeat/autoreverse ควบคุมการซ้ำ wrap เป็นคาบ

ตัวอย่าง[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

ตัวระบุที่คงที่ระหว่างองค์ประกอบระดับเดียวกัน

ตัวอย่างใช้งาน

function main() {
  return (
    <RepeatedLayout
      width={240}
      height={140}
      axis="both"
      period={{ x: 80, y: 50 }}
      value={{ x: 40, y: 25 }}
      anchor={{ x: 0.5, y: 0.5 }}
      alignment="center"
    >
      <Symbol name="plus" fontSize={20} color={$env.accent} />
    </RepeatedLayout>
  );
}

ภาพเคลื่อนไหว

ภาพเคลื่อนไหว

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYperiodvalueanchoroffsettransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYperiod.xperiod.yvalue.xvalue.yanchor.xanchor.yoffset.xoffset.y

เมื่อไม่ระบุ

ตารางคือพฤติกรรมเมื่อไม่ระบุที่ตรวจจากโค้ด ตัวอย่างไม่ใช่ค่าเริ่มต้น หากต้องการผลแน่นอนให้ระบุค่า ขนาดและสีตามบริบทไม่ใช่ค่าคงที่

คุณสมบัติเมื่อไม่ระบุ
axis"horizontal"
period360
value0
anchor0.5
offset0
alignment"topLeading"

HStack

ภาพเคลื่อนไหว

Symbol

ก่อนหน้า

RadialLayout

ขั้นตอนถัดไป

ในหน้านี้

ตัวอย่างการใช้งานคุณสมบัติตัวอย่างใช้งานภาพเคลื่อนไหวเมื่อไม่ระบุAPI ที่เกี่ยวข้อง