ເນື້ອຫາ
ເຫດຜົນທີ່ຢູ່ເບື້ອງຫລັງການອອກແບບແບບຕົ້ນແບບບໍ່ແມ່ນເລື່ອງ ໃໝ່ - ມັນກໍ່ຄືກັນກັບຄວາມສົນໃຈໃນການອອກແບບໃນເບົາເຊີ. ເມື່ອທ່ານເຫັນການອອກແບບຕາມສະພາບຄວາມເປັນຈິງຂອງມັນ, ມັນກໍ່ແຕກຕ່າງກັນຫມົດ. ທ່ານຕັດສິນໃຈດີກວ່າເມື່ອທ່ານບໍ່ ຈຳ ເປັນຕ້ອງສົມມຸດຕິຖານກ່ຽວກັບວ່າອິນເຕີເຟດຈະເຮັດວຽກແລະຮູ້ສຶກແນວໃດ. ນີ້ອາດຈະຄ້າຍຄືກັບວຽກພິເສດ, ແຕ່ຄວາມເຂົ້າໃຈທີ່ທ່ານສາມາດໄດ້ຮັບໂດຍການເຫັນການອອກແບບຂອງທ່ານມີຄຸນຄ່າ.
Framer ແມ່ນເຄື່ອງມືແບບທົດລອງແບບລະຫັດ ໃໝ່. ທ່ານສາມາດສ້າງ mockups ໃນ Sketch (ຫຼື Photoshop) ຄືກັນກັບທີ່ທ່ານມັກ, ແລະ ນຳ ເຂົ້າພວກມັນເຂົ້າໃນ Framer. ຫຼັງຈາກນັ້ນ, ຂຽນກາບພຽງເລັກນ້ອຍແລະທ່ານສາມາດເຮັດ ສຳ ເລັດໄດ້ຫຼາຍຢ່າງ.
ຂ້ອຍ ກຳ ລັງຈະສອນພື້ນຖານຂອງການເຮັດແບບທົດລອງໃນ Framer, ໂດຍໃຊ້ຕົວຢ່າງຂອງໂປແກຼມ iOS app ທີ່ມີສອງມຸມເບິ່ງ: ມຸມເບິ່ງໂປຼໄຟລ໌ແລະມຸມມອງຂະຫຍາຍໃຫຍ່ຂື້ນຂອງຮູບພາບ avatar ຂອງຜູ້ໃຊ້. ພວກເຮົາຈະເປັນຕົວແບບວິທີການເບິ່ງພາບຖ່າຍທີ່ຂະຫຍາຍຂື້ນແລະຈະປິດແລະພວກເຮົາກໍ່ຈະມີຊີວິດຊີວາ. ເບິ່ງການສາທິດທາງອິນເຕີເນັດທີ່ນີ້ (ເພື່ອເບິ່ງລະຫັດແຫຼ່ງ, ພຽງແຕ່ກົດປຸ່ມໄອຄອນຢູ່ແຈເບື້ອງຊ້າຍດ້ານເທິງ). ທ່ານຍັງຕ້ອງການທົດລອງໃຊ້ຟຣີຂອງ Framer, ເຊິ່ງທ່ານສາມາດຫາໄດ້ທີ່ framerjs.com.
ນຳ ເຂົ້າຈາກ Sketch
ຂັ້ນຕອນ ທຳ ອິດແມ່ນການ ນຳ ເຂົ້າຊັ້ນຕ່າງໆຈາກ Sketch ເຂົ້າໄປໃນ Framer. ພຽງແຕ່ກົດປຸ່ມ Import ໃນ Framer ໃນຂະນະທີ່ການອອກແບບເປີດຢູ່ໃນ Sketch, ແລະເລືອກເອົາເອກະສານທີ່ຖືກຕ້ອງໃນກ່ອງໂຕ້ຕອບຕໍ່ໄປ. Framer ຈະ ນຳ ເຂົ້າຮູບພາບຈາກແຕ່ລະຊັ້ນໂດຍອັດຕະໂນມັດແລະເຮັດໃຫ້ພວກເຂົາສາມາດເຂົ້າເຖິງຜ່ານລະຫັດດັ່ງນີ້:
sketch = Framer.Importer.load "ນຳ ເຂົ້າ / ໂປຣໄຟລ໌"
ໃຊ້ຕົວແປນັ້ນເພື່ອເຂົ້າຫາຊັ້ນ ນຳ ເຂົ້າ. ຍົກຕົວຢ່າງ, ເພື່ອອ້າງເຖິງຊັ້ນທີ່ມີຊື່ວ່າ 'ເນື້ອຫາ' ໃນເອກະສານ Sketch, ທ່ານຈະພິມ sketch.content ໃນ Framer.
ສ້າງຊັ້ນ ໜ້າ ກາກແລະ avatar
ໜ້າ ທີ່ຫຼັກຂອງຮູບແບບນີ້ແມ່ນເພື່ອຂະຫຍາຍຮູບພາບ avatar ເມື່ອມັນຖືກແຕະແລະຫຼັງຈາກນັ້ນກໍ່ຈະປິດມັນເມື່ອມັນຖືກແຕະມັນອີກຄັ້ງ. ທຳ ອິດ, ພວກເຮົາຈະສ້າງສອງ ໜ້າ ກາກ - ໜ້າ ກາກທີ່ມີຮັງຫຼື ໜ້າ ກາກພາຍໃນ ໜ້າ ກາກອື່ນ. ພວກເຮົາຈະໃຊ້ ໜ້າ ກາກທັງສອງຢ່າງພ້ອມກັນເພື່ອສ້າງຜົນກະທົບທີ່ເປີດແລະປິດທີ່ສວຍງາມ. ຊັ້ນ headerMask ຈະເກັບຮູບ avatar ໄປເປັນຮູບສີ່ຫລ່ຽມເມື່ອມັນຂະຫຍາຍແລະຊັ້ນ ໜ້າ ກາກຈະເກັບມັນເປັນວົງກົມນ້ອຍໆເທິງມຸມເບິ່ງໂປຼໄຟລ໌.
ສ້າງຊັ້ນ headerMask ແບບນີ້:
headerMask = ຄວາມກວ້າງຂອງຊັ້ນ ໃໝ່: Screen.width, ຄວາມສູງ: 800 ພື້ນຫລັງສີ: "ໂປ່ງໃສ"
ລະຫັດສາຍ ທຳ ອິດສ້າງແລະຕັ້ງຊື່ຊັ້ນ ໃໝ່. ຫຼັງຈາກນັ້ນ, ໂດຍໃຊ້ ຄຳ ສັບການ ກຳ ນົດການລົງທືນຂອງ CoffeeScript, ພວກເຮົາ ກຳ ນົດຄຸນລັກສະນະຄວາມກວ້າງ, ຄວາມສູງແລະພື້ນຫລັງ. ພວກເຮົາຈະໃຊ້ພື້ນຫລັງໂປ່ງໃສເພື່ອໃຫ້ຊັ້ນຂໍ້ມູນຢູ່ເບື້ອງລຸ່ມສະແດງເມື່ອຮູບ avatar ຖືກຂະຫຍາຍອອກ.
ຕໍ່ໄປ, ສ້າງຊັ້ນ ໜ້າ ກາກ:
ຫນ້າກາກ = ຄວາມກວ້າງຂອງຊັ້ນ ໃໝ່: 1000, ຄວາມສູງ: 1000 ພື້ນຫລັງສີ: "ໂປ່ງໃສ", ຂອບເຂດຊາຍແດນ: 500 y: sketch.header.height - 100 superLayer: headerMask scale: 0.2, originY: 0
ພວກເຮົາສ້າງຊັ້ນ ໃໝ່ ແລະ ກຳ ນົດຄຸນສົມບັດໃນແບບດຽວກັນ. ຂອບເຂດຊາຍແດນຂະ ໜາດ ໃຫຍ່ເຮັດໃຫ້ຊັ້ນນີ້ເປັນວົງມົນ. ພວກເຮົາວາງຊັ້ນ ໜ້າ ກາກເພື່ອໃຫ້ມັນທັບຊ້ອນຊັ້ນຫົວ, ເຊິ່ງຖືກ ນຳ ເຂົ້າຈາກ Sketch. ພວກເຮົາຍັງຈະຫຼຸດລົງເຖິງ 20 ເປີເຊັນ, ຫຼື 0.2. ຕົ້ນ ກຳ ເນີດຂອງສູນ ກຳ ນົດຈຸດສະມໍຫລືລົງທະບຽນຂອງຮູບໃສ່ຂອບເທິງ.
ຊັບສິນທີ່ຍັງເຫຼືອ, superLayer, ກຳ ນົດຊັ້ນ headerMask ທີ່ພວກເຮົາສ້າງເປັນພໍ່ແມ່ຂອງຊັ້ນ ໃໝ່ ນີ້. ນີ້ແມ່ນວິທີການເຮັດ ໜ້າ ກາກເຮັດວຽກໃນ Framer. ພຽງແຕ່ ກຳ ນົດຄຸນສົມບັດຂອງ superLayer, ແລະຊັ້ນຜູ້ປົກຄອງຈະເຮັດ ໜ້າ ກາກໃຫ້ເດັກ.
ຕໍ່ໄປ, ພວກເຮົາຕ້ອງສ້າງກາຕາ avatar ແລະວາງມັນໄວ້ໃນ ໜ້າ ກາກ ໃໝ່ ເຫລົ່ານັ້ນ. ເພື່ອຂະຫຍາຍແລະເພີ່ມຂອບເຂດຂອບເຂດການປູກພືດ, ພວກເຮົາຈະສ້າງຊັ້ນນົດດ້ວຍຕົນເອງ. ສຳ ເນົາຮູບເຂົ້າໃນແຟ້ມ 'ຮູບພາບຕ່າງໆ' ຂອງໂຟນເດີຂອງໂຄງການ. ຈາກນັ້ນສ້າງ layer ໂດຍໃຊ້ຮູບພາບນັ້ນ:
avatar = ຮູບພາບຂັ້ນຕອນ ໃໝ່: "ຮູບພາບ / avatar.png" ຄວາມກວ້າງ: mask.width, ຄວາມສູງ: mask.height superLayer: mask, force2d: true
ສັງເກດເຫັນວ່າພວກເຮົາ ກຳ ນົດຊັ້ນຂອງ avatar ໃຫ້ເປັນຊັ້ນ ໜ້າ ກາກ. ດຽວນີ້ທັງສອງຖືກຮັງຢູ່ໃນ headerMask. ພວກເຮົາຍັງໄດ້ ກຳ ນົດຄວາມກວ້າງແລະຄວາມສູງເພື່ອໃຫ້ຮູບພາບເຕັມໄປດ້ວຍ ໜ້າ ກາກທັງ ໝົດ.
ສຸດທ້າຍ, ພວກເຮົາຈະສ້າງຕົວແປເພື່ອເກັບ ຕຳ ແໜ່ງ Y ຂອງ ໜ້າ ກາກທີ່ພວກເຮົາຈະໃຊ້ ສຳ ລັບພາບເຄື່ອນໄຫວ. ພວກເຮົາຈະຕັ້ງມັນຢູ່ທາງນອນ, ຍ້ອນວ່າມັນໃຫຍ່ກວ່າ ໜ້າ ຈໍ.
maskY = mask.y mask.centerX ().
ກຳ ນົດລັດ
ຂັ້ນຕອນ ທຳ ອິດໃນການສ້າງພາບເຄື່ອນໄຫວແມ່ນການ ກຳ ນົດສະຖານະການເລີ່ມຕົ້ນແລະທ້າຍ. ໃນ Framer, ລັດຕ່າງໆແມ່ນຄ້າຍຄື keyframes ທີ່ຖືກຂຽນອອກເປັນລະຫັດ. ລັດແມ່ນພຽງແຕ່ການລວບລວມຄຸນສົມບັດ. ທຸກໆຊັ້ນລ້ວນແຕ່ມີສະຖານະພາບໃນຕອນຕົ້ນ. ສຳ ລັບຮູບແບບຕົ້ນສະບັບນີ້, ຄ່າເລີ່ມຕົ້ນນັ້ນຈະເປັນຈຸດເລີ່ມຕົ້ນຂອງພາບເຄື່ອນໄຫວ, ດັ່ງນັ້ນພວກເຮົາ ຈຳ ເປັນຕ້ອງຕັ້ງລັດທີສອງ ສຳ ລັບແຕ່ລະຊັ້ນ.
syntax ສຳ ລັບລັດຕ່າງໆແມ່ນງ່າຍດາຍຫຼາຍ. ການອ້າງອິງຊັ້ນ, ໃຊ້ວິທີການ layer.states.add (), ແລະຫຼັງຈາກນັ້ນລາຍຊື່ຄຸນສົມບັດທີ່ຈະຖືກລວມເຂົ້າ.
sketch.content.states.add (hide: {opacity: 0}) headerMask.states.add (ຍ້າຍ: {y: 120}) mask.states.add (ເຕີບໂຕ: {ຂະ ໜາດ: 1.1, y: maskY - 420})
ລັດທີສອງ ສຳ ລັບຊັ້ນເນື້ອຫາ, ເຊິ່ງຖືກ ນຳ ເຂົ້າຈາກ Sketch ແລະມີສ່ວນປະກອບ ໜ້າ ຈໍໂປຼໄຟລ໌ອື່ນໆທັງ ໝົດ, ຄວນມີຄວາມໂປ່ງໃສ. ດ້ວຍວິທີນີ້, ເມື່ອການຂະຫຍາຍຕົວ avatar, ພວກເຮົາຈະມີພື້ນຫລັງສີ ດຳ ແລະໄອຄອນແລະສ່ວນປະກອບທີ່ ນຳ ເຂົ້າທີ່ຍັງເຫຼືອຈະສະແດງຜ່ານ.
ລະຫັດສາຍທີສອງສ້າງສະຖານະພາບ ສຳ ລັບ headerMask ເຊິ່ງຈະຍ້າຍມັນລົງໄປຍັງ ຕຳ ແໜ່ງ Y ຂອງ 120. ອັນນີ້ຈະຊ່ວຍໃຫ້ຊື່ແລະປຸ່ມປິດສະແດງຢູ່ເທິງສຸດຂອງ ໜ້າ ຈໍເມື່ອຮູບ avatar ຖືກຂະຫຍາຍອອກ. ມັນຍັງຈະເຮັດໃຫ້ຂອບເຂດຂອບເຂດການປູກພືດແບບເຄື່ອນໄຫວຂອງຮູບ avatar.
ສຸດທ້າຍ, ລັດ ໃໝ່ ສຳ ລັບຊັ້ນ ໜ້າ ກາກຈະເຮັດໃຫ້ມັນທັງຂະ ໜາດ ແລະຍ້າຍມັນຂຶ້ນ, ໂດຍໃຊ້ຕົວແປ maskY ທີ່ພວກເຮົາສ້າງຂື້ນມາກ່ອນ. ເນື່ອງຈາກວ່າຕົ້ນ ກຳ ເນີດY (ຫຼືຈຸດສະມໍ) ຂອງຊັ້ນ ໜ້າ ກາກແມ່ນຂອບດ້ານເທິງຂອງມັນ, ພວກເຮົາ ຈຳ ເປັນຕ້ອງຍ້າຍມັນຂື້ນ 420 ພິກະເຊນເພື່ອໃຫ້ສູນກາງຂອງພາບເຫັນໄດ້.
ສະພາບອາກາດລະຫວ່າງລັດ
ເພື່ອໃຫ້ມີການເຄື່ອນໄຫວລະຫວ່າງສະພາບເດີມແລະລັດ ໃໝ່ ທີ່ພວກເຮົາຫາກໍ່ສ້າງ, ພວກເຮົາຕ້ອງການລະຫັດ 4 ສາຍຕື່ມອີກ. ພວກເຮົາຈະຈັດການກົດປຸ່ມກົດຢູ່ໃນຮູບ avatar. ເມື່ອຜູ້ໃຊ້ແຕະມັນໃສ່ ໜ້າ ຈໍໂປຼໄຟລ໌, ພວກເຮົາຈະຫັນໄປສູ່ມຸມມອງທີ່ກວ້າງຂວາງຂື້ນໂດຍລັດຂີ່ລົດຖີບ. ເມື່ອມັນຖືກແຕະມັນ ໃໝ່, ພວກເຮົາຈະກັບໄປຍັງສະພາບເດີມດັ່ງນັ້ນມັນຈະກັບຄືນເປັນວົງກົມນ້ອຍໆ. ເສັ້ນລະຫັດດຽວກັນນີ້ຈັດການທັງສອງໂຕ້ຕອບ:
avatar.on ເຫດການ .Click, -> headerMask.states.next () mas.states.next () sketch.content.states.next ()
ເສັ້ນ ທຳ ອິດຂອງທ່ອນໄມ້ນີ້ ກຳ ນົດຜູ້ຈັດການກົດປຸ່ມເທິງຊັ້ນ avatar. ທຸກເວລາທີ່ມັນຖືກແຕະ, ບໍ່ວ່າມັນຈະຖືກຕັດຫຼືມັນຂະ ໜາດ ໃດກໍ່ຕາມ, ຄຳ ຖະແຫຼງທີ່ຕິດຕາມຈະ ດຳ ເນີນໄປ.
ຈາກນັ້ນພວກເຮົາພຽງແຕ່ອ້າງອີງໃສ່ແຕ່ລະຊັ້ນ, ແລະໃຊ້ວິທີການ layer.states.next () ເພື່ອສະຫຼັບລັດ. ເມື່ອທ່ານໃຊ້ layer.states.next (), Framer ຈະໃຊ້ການຕັ້ງຄ່າພາບເຄື່ອນໄຫວພາຍໃນຂອງມັນ. ນີ້ແມ່ນສິ່ງທີ່ສະດວກທີ່ສຸດ, ແຕ່ວ່າທ່ານສາມາດຫັດຖະ ກຳ ພາບເຄື່ອນໄຫວໄດ້ດີກວ່າເກົ່າໂດຍການໂຄ້ງເສັ້ນໂຄ້ງສັດ.
ເມື່ອ ນຳ ໃຊ້ລັດຕ່າງໆເຊັ່ນພວກເຮົາຢູ່ທີ່ນີ້, ທ່ານສາມາດປ່ຽນເສັ້ນໂຄ້ງເຄື່ອນໄຫວແຕ່ລະບ່ອນແຍກຕ່າງຫາກໄດ້ງ່າຍໂດຍການ ນຳ ໃຊ້ຊັບສິນ layer.states.animationOptions. ດ້ວຍການປັບຕົວພຽງແຕ່ສາມຄັ້ງ, ພາບເຄື່ອນໄຫວຮູ້ສຶກວ່າແຕກຕ່າງກັນຫມົດ:
sketch.content.states.animationOcepts = ໂຄ້ງ: "ຄວາມສະບາຍ", ເວລາ: 0.3 headerMask.states.animationOcepts = ໂຄ້ງ: "ພາກຮຽນ spring (150, 20, 0)" mask.states.animationOcepts = ໂຄ້ງ: "ພາກຮຽນ spring (300, 30, 0) "
ສຳ ລັບຊັ້ນເນື້ອຫາທີ່ ກຳ ລັງຈະ ໝົດ ລົງແລະພວກເຮົາຈະເລືອກເສັ້ນໂຄ້ງທີ່ງ່າຍດາຍ, ງ່າຍແລະຕັ້ງໄລຍະເວລາພາບເຄື່ອນໄຫວໃຫ້ເປັນ 0.3 ເພື່ອໃຫ້ມັນໄວຫຼາຍ.
ສຳ ລັບຊັ້ນຫົວແລະ ໜ້າ ກາກ, ໃຊ້ເສັ້ນໂຄ້ງພາກຮຽນ spring. ເພື່ອຈຸດປະສົງຂອງພວກເຮົາ, ທ່ານພຽງແຕ່ຕ້ອງການຮູ້ວ່າຄ່າຂອງເສັ້ນໂຄ້ງໃນພາກຮຽນ spring ປ່ຽນແປງຄວາມໄວແລະການຟຸມເຟືອຍຂອງພາບເຄື່ອນໄຫວ. ຄຸນຄ່າ ສຳ ລັບຊັ້ນ ໜ້າ ກາກຈະເຮັດໃຫ້ພາບເຄື່ອນໄຫວຂອງມັນໄວກ່ວາ headerMask ແລະເນື້ອຫາ. ສຳ ລັບລາຍລະອຽດເພີ່ມເຕີມກ່ຽວກັບການຕັ້ງຄ່າເສັ້ນໂຄ້ງຂອງພາກຮຽນ spring, ເບິ່ງເອກະສານຂອງ Framer ທີ່ framerjs.com/docs.
ທົດລອງໃຊ້ໃນອຸປະກອນມືຖືແທ້ໆ
ເບິ່ງການອອກແບບໃນອຸປະກອນທີ່ແທ້ຈິງແມ່ນມີປະສິດຕິຜົນຫຼາຍກ່ວາການໃຊ້ຕົວເຄື່ອງ, ແລະທ່ານຈະເຫັນຜົນປະໂຫຍດໃນການເຮັດວຽກຂອງທ່ານ. Framer ປະກອບມີຄຸນລັກສະນະບ່ອນແລກປ່ຽນຄວາມ, ເຊິ່ງແມ່ນເຄື່ອງແມ່ຂ່າຍທີ່ສ້າງຂຶ້ນເຊິ່ງສະເຫນີ URL ໃຫ້ຕົ້ນແບບຂອງທ່ານຜ່ານເຄືອຂ່າຍທ້ອງຖິ່ນຂອງທ່ານ. ພຽງແຕ່ເຂົ້າເບິ່ງ URL ໂດຍໃຊ້ອຸປະກອນຂອງທ່ານ.
ທ່ານໄດ້ຮຽນຮູ້ທຸກຢ່າງທີ່ທ່ານຕ້ອງການຮູ້ເພື່ອທົດລອງອອກແບບຂອງທ່ານເອງໃນ Framer. ເຈົ້າ ກຳ ລັງລໍຖ້າຫຍັງຢູ່?
ຄຳ ເວົ້າ: Jarrod Drysdale
Jarrod Drysdale ແມ່ນຜູ້ຂຽນ, ທີ່ປຶກສາດ້ານການອອກແບບ, ຜູ້ຜະລິດສິນຄ້າດີຈີຕອນ. ບົດຂຽນນີ້ຖືກຈັດພີມມາໃນສະບັບທີ 270 ຂອງວາລະສານສຸດທິ.
ມັກນີ້ບໍ? ອ່ານເຫຼົ່ານີ້!
- ສ້າງແບບຕົ້ນແບບທີ່ສາມາດກົດຂື້ນໄດ້, ທີ່ມີຊີວິດຢູ່ໃນ Sketch
- ວິທີການເລີ່ມຕົ້ນ blog
- ບັນນາທິການຮູບພາບທີ່ດີທີ່ສຸດ
