ຂ້ອຍຈະສ້າງເສັ້ນໂຄ້ງ cubic-bezier easing ແບບກຳນົດເອງສຳລັບ CSS ໄດ້ແນວໃດ?

ລາກຈຸດຄວບຄຸມສອງຈຸດເທິງກຣາຟ, ພິມຄ່າ x1, y1, x2, y2 ທີ່ແນ່ນອນ, ຫຼື ເລືອກ ການຕັ້ງຄ່າລ່ວງໜ້າ. ຈາກນັ້ນເລືອກ CSS ພາຍໃຕ້ ຮູບແບບຜົນໄດ້ຮັບ ແລ້ວກົດ ສຳເນົາ ເພື່ອເອົາຄ່າ cubic-bezier() ໄປໃຊ້ກັບ transition-timing-function.

ຂ້ອຍຈະສ້າງເອັບເຟັກເດັ້ງ ຫຼື overshoot ດ້ວຍ cubic-bezier ໄດ້ແນວໃດ?

ລາກຈຸດຄວບຄຸມຂຶ້ນເທິງ ຫຼື ລົງລຸ່ມກ່ອງເພື່ອໃຫ້ຄ່າ Y ກາຍຊ່ວງ 0-1. ຄ່າ Y ສາມາດກາຍຊ່ວງນັ້ນໄດ້ ໃນຂະນະທີ່ຄ່າ X ຕ້ອງຢູ່ລະຫວ່າງ 0 ຫາ 1 ສະເໝີ. ການຕັ້ງຄ່າ back-out ແລະ anticipate ແມ່ນຈຸດເລີ່ມຕົ້ນທີ່ພ້ອມໃຊ້ສໍາລັບເອັບເຟັກ overshoot.

ຂ້ອຍສາມາດເອົາ easing ສໍາລັບ Tailwind, Framer Motion ຫຼື anime.js ໄດ້ຫຼືບໍ່?

ໄດ້. ແຖບ ຮູບແບບຜົນໄດ້ຮັບ ມີທັງ CSS, Tailwind, Framer Motion ແລະ anime.js. ທັງໝົດຈັດຮູບແບບຈາກຕົວເລກ 4 ຕົວຄືກັນ, ພຽງແຕ່ເລືອກແຖບທີ່ຕ້ອງການແລ້ວກົດ ສຳເນົາ ເພື່ອນໍາເອົາໂຄ້ດໄປໃສ່ຄລິບບອດ.

ຂ້ອຍຈະໂຫລດຄ່າ cubic-bezier ທີ່ມີຢູ່ແລ້ວມາແກ້ໄຂໄດ້ແນວໃດ?

ວາງຄ່າ ເຊັ່ນ cubic-bezier(.17, .67, .83, .67) ລົງໃນກ່ອງນຳເຂົ້າ ແລ້ວກົດ ໂຫລດ. ຖ້າບໍ່ສາມາດອ່ານຕົວເລກທັງ 4 ຕົວໄດ້ ຈະມີຂໍ້ຄວາມແຈ້ງເຕືອນຜິດພາດ. ເສັ້ນໂຄ້ງຍັງຖືກເກັບໄວ້ຫຼັງເຄື່ອງໝາຍ hash ໃນ URL ຂອງໜ້າເວັບ ເຮັດໃຫ້ສາມາດແບ່ງປັນໄດ້.

ເປັນຫຍັງພາບສະແດງຕົວຢ່າງຈຶ່ງຮູ້ສຶກຊ້າກວ່າການປ່ຽນສະຖານະ (transition) ຕົວຈິງຂອງຂ້ອຍ?

ເບິ່ງຕົວຢ່າງ motion ໃຊ້ການຕັ້ງຄ່າ ໄລຍະເວລາ ທີ່ທ່ານສາມາດປັບໄດ້, ແລະ ຄ່າເລີ່ມຕົ້ນຖືກຕັ້ງໃຫ້ຊ້າລົງເພື່ອໃຫ້ທ່ານສັງເກດເສັ້ນໂຄ້ງໄດ້ງ່າຍ. ທ່ານສາມາດຫຼຸດ ໄລຍະເວລາ ລົງ, ແລ້ວໃຊ້ປຸ່ມຫຼິ້ນຊ້ຳເພື່ອເບິ່ງການເຄື່ອນໄຫວຕາມຄວາມໄວຕົວຈິງທີ່ທ່ານຕ້ອງການນໍາໃຊ້.

ຟຣີແທ້ບໍ?

ແມ່ນແລ້ວ. ທຸກເຄື່ອງມືແມ່ນໃຊ້ຟຣີ, ບໍ່ຕ້ອງມີບັນຊີ ແລະ ບໍ່ຕ້ອງໃຊ້ບັດເຄຣດິດ. ການເຮັດວຽກທັງໝົດແມ່ນດຳເນີນຢູ່ໃນອຸປະກອນຂອງທ່ານແທນທີ່ຈະຢູ່ໃນເຊີບເວີຂອງພວກເຮົາ, ເຊິ່ງເຮັດໃຫ້ເຮົາສາມາດໃຫ້ບໍລິການໄດ້ຟຣີ.

ມັນເຮັດວຽກຢູ່ໃນມືຖືບໍ?

ໄດ້. ມັນເຮັດວຽກໃນບຣາວເຊີມືຖືລຸ້ນໃໝ່ເທິງ iOS ແລະ Android ໂດຍບໍ່ຕ້ອງຕິດຕັ້ງຫຍັງ.

📈

ຕົວສ້າງ CSS Cubic-Bezier Easing ຟຣີ

ອອກແບບ easing curve CSS ດ້ວຍການລາກ control point, ຕົວຢ່າງ motion live ແລະ ຄັດລອກ cubic-bezier() value. ລວມ preset overshoot/bounce.

ເຮັດວຽກໃນບຣາວເຊີບໍ່ຕ້ອງລົງທະບຽນ, ບໍ່ມີໜ້າຕ່າງປັອບອັບບໍ່ຈໍາເປັນຕ້ອງເຂົ້າສູ່ລະບົບຟຣີຕະຫຼອດໄປ

ເຮັດວຽກແບບອອບໄລນ໌ໄດ້ຫຼັງໂຫຼດແລ້ວ

ລາກ handle teal & rose ເພື່ອຈັດຮູບ curve

ຈຸດຄວບຄຸມ

x1y1x2y2

ເບິ່ງຕົວຢ່າງ motion

ໄລຍະເວລາ1,6 ວິ

ການປ່ຽນຄວາມກວ້າງ

ຄ່າ CSS

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

ຄ່າຕັ້ງຕົ້ນ

Handle rose ແລະ teal ສາມາດດຶງຂຶ້ນ ຫຼືລົງໃຕ້ກ່ອງ (Y ເກີນ 0-1) ເພື່ອສ້າງເອັຟເຟັກ 'overshoot'/bounce ເຊັ່ນ back-out ແລະ anticipate. X ຢູ່ໃນ 0-1 (ເວລາຍ້ອນຄືນບໍ່ໄດ້).

ການນຳໃຊ້ທົ່ວໄປ

CSS Transition Easing ທີ່ກໍາລັງປັບປຸງອອກແບບ easing ທີ່ມີລັກສະນະທໍາມະຊາດສຳລັບຜົນກະທົບ hover, ເມນູ, ແລະການຫັນປ່ຽນ UI.
Bounce & Overshoot Animationsສ້າງຮູບເງົາລະດູໃບໄມ້ປົກກະລັກ/bounce ໂດຍການດຣາ ຄວບຄຸມຈຸດນອກກ່ອງ.
Easing ສຳລັບ @keyframes Animationsເລືອກ animation-timing-function ທີ່ຖືກຕ້ອງສຳລັບ CSS keyframe animations.
Easing Values ສຳລັບ JS Animation Librariesເອົາ cubic-bezier values ສຳລັບ GSAP, Framer Motion, anime.js, ແລະອື່ນໆ.
ເອົາໃຈໃສ່ວິທີທີ່ Easing ເຮັດວຽກເບິ່ງຄວາມສໍາພັນລະຫວ່າງ bezier curve ແລະຮູບເງົາທີ່ມັນຜະລິດ.

ມັນເຮັດວຽກແນວໃດ

ຕົວແກ້ໄຂຖືກສ້າງທັງໝົດຢູ່ໃນບຣາວເຊີໂດຍໃຊ້ React state ແລະ SVG — ບໍ່ມີໄລບຣາຣີຈັດການເລກຄະນິດເສັ້ນໂຄ້ງ. ຈຸດຄວບຄຸມທີ່ລາກໄດ້ສອງຈຸດກຳນົດເສັ້ນທາງ SVG cubic Bezier, ແລະ ເອັນຈິນແອນິເມຊັນ CSS ຂອງບຣາວເຊີເອງເຮັດວຽກຕົວຢ່າງການເຄື່ອນໄຫວໂດຍການແຊກຄ່າ cubic-bezier() ທີ່ໄດ້ໂດຍກົງເຂົ້າໃນກົດ @keyframes.

1
ລາກ ຫຼືພິມຈຸດຄວບຄຸມ
ມືຈັບສອງອັນ (P1 ສີ teal, P2 ສີ rose) ຢູ່ເທິງ canvas SVG. ການລາກໃຊ້ Pointer Events API ພ້ອມ setPointerCapture ດັ່ງນັ້ນມືຈັບຕິດຕາມນິ້ວ ຫຼືເຄີເຊີຂອງທ່ານແມ່ນແຕ່ນອກຂອບເຂດ SVG. ທ່ານຍັງຍ້າຍມືຈັບດ້ວຍປຸ່ມລູກສອນ ຫຼືພິມຄ່າແນ່ນອນເຂົ້າຂໍ້ມູນເຂົ້າຕົວເລກ x1/y1/x2/y2.
2
SVG ແຕ້ມເສັ້ນໂຄ້ງໃນເວລາຈິງ
ເສັ້ນໂຄ້ງແມ່ນອົງປະກອບ SVG <path> ດຽວທີ່ຄຳສັ່ງ C (cubic Bezier) ຂອງມັນຖືກຄິດໄລ່ຄືນຈາກພິກັດຈຸດຄວບຄຸມສີ່ອັນທຸກຄັ້ງທີ່ state ອັບເດດ. ບໍ່ມີ canvas, ບໍ່ມີໄລບຣາຣີພາຍນອກ — ຕົວສະແດງຜົນ SVG ຂອງບຣາວເຊີແຕ້ມເສັ້ນທາງໂດຍກົງ.
3
ເອັນຈິນ CSS ຂອງບຣາວເຊີສະແດງຕົວຢ່າງ easing
ແອນິເມຊັນສົດສາມອັນ (ຈຸດເລື່ອນ, ການປ່ຽນຄວາມກວ້າງ, ແລະ ຂະໜາດ) ເຮັດວຽກ CSS @keyframes ພ້ອມຄ່າ cubic-bezier() ແຊກແບບ inline. ເອັນຈິນແອນິເມຊັນຂອງບຣາວເຊີເອງແປຄວາມໝາຍເສັ້ນໂຄ້ງ, ດັ່ງນັ້ນສິ່ງທີ່ທ່ານເຫັນແມ່ນສິ່ງທີ່ CSS ການຜະລິດຂອງທ່ານຈະຜະລິດພໍດີ.
4
ສຳເນົາຕົວຢ່າງໂຄ້ດໃນໄວຍາກອນເຟຣມເວີກຂອງທ່ານ
ແທັບຈັດຮູບແບບໂຕເລກສີ່ອັນດຽວກັນເປັນ CSS transition-timing-function, ຄລາສ Tailwind arbitrary-value, ອາເຣ easing Framer Motion, ຫຼືສະຕຣິງ easing anime.js. ຕົວຢ່າງໂຄ້ດຖືກຂຽນໄປຄລິບບອດດ້ວຍ navigator.clipboard. ເສັ້ນໂຄ້ງຍັງຖືກເຂົ້າລະຫັດໃນ URL hash (#b=x1,y1,x2,y2) ດັ່ງນັ້ນທ່ານແບ່ງປັນ ຫຼືບຸກມາກມັນໄດ້.