Cara mengubah lukisan prokreat ke dalam animasi web

Saya baru -baru ini mula melukis pada iPad saya menggunakan aplikasi ProCreate dengan Pensil Apple. Saya menikmati fleksibiliti melukis dengan cara ini. Apa yang biasanya menghalang saya dari lukisan di rumah adalah perkara asas, seperti persediaan, pembersihan berus, pengudaraan yang betul, dan faktor lain yang tidak benar -benar terikat dengan lukisan itu sendiri. ProCreate melakukan kerja yang cukup baik untuk mencontohi proses lukisan dan lukisan, tetapi menambah ciri -ciri digital seperti undo/redo, lapisan, dan kesan lapisan.

Berikut adalah lukisan yang saya buat yang saya buat bahawa saya akhirnya mengeksport dan menghidupkan di web.

Anda juga boleh melakukan ini! Terdapat dua kesan animasi asas yang akan kami sampaikan di sini: kesan paralaks yang berlaku pada hover (dengan keupayaan untuk mematikannya bagi mereka yang mengalami gangguan vestibular), dan kesan lukisan kecil apabila halaman dimuatkan.

Paralaks dengan lapisan lukisan

Saya menyebut bahawa sebahagian daripada sebab saya menikmati lukisan pada iPad adalah keupayaan untuk bekerja dalam lapisan. Apabila membuat lapisan, saya berhati -hati untuk menyimpan "tema" tertentu pada lapisan yang sama, contohnya, jalur zebra berada pada satu lapisan dan titik -titiknya berada di lapisan sendiri di bawah jalur.

Saya akan melanjutkan lukisan di luar sempadan di mana garis dari lapisan di atas hujung, terutamanya kerana anda akan dapat mengintipnya sedikit ketika kita menggerakkan lukisan di dalam kesan paralaks. Sekiranya garis tajam pada bila -bila masa, ini akan kelihatan tidak wajar.

Sebaik sahaja saya selesai membuat lapisan saya, saya boleh mengeksport perkara sebagai fail Photoshop (JPA), terima kasih kepada pilihan pengeksport ProCreate.

Kemudian saya akan bergabung bersama beberapa, supaya saya hanya bekerja dengan kira -kira 8 lapisan. Saya menggunakan plugin Photoshop yang dipanggil TinyPng untuk mengeksport setiap lapisan secara individu. Saya pernah mendengar ada alat mampatan yang lebih baik, tetapi saya sangat gembira dengan yang ini.

Seterusnya, saya akan masuk ke editor kod saya dan membuat div untuk menempatkan semua imej yang terkandung dalam lapisan. Saya memberikan kedudukan relatif div itu sementara semua imej di dalamnya mendapat kedudukan mutlak. Ini meletakkan imej yang ada di atas yang lain.

 <div role="Presentation">
  <img  src="'https:" alt="Cara mengubah lukisan prokreat ke dalam animasi web" >
  <img  src="'https:" alt="Cara mengubah lukisan prokreat ke dalam animasi web" >
 …
</div>

 #zebra-ill {
  Kedudukan: Relatif;
  Min-tinggi: 650px;
  Max-Width: 500px;
}

.zebraimg {
  Kedudukan: Mutlak;
  Atas: 0;
  Kiri: 0;
  Perspektif: 600px;
  gaya transform: Preserve-3D;
  Transform: TranslateZ (0);
  Lebar: 100%;
  }

Lebar 100% pada imej akan mengurung semua imej ke saiz div induk. Saya melakukan ini supaya saya mengawal mereka sekaligus dengan sekatan yang sama, yang berfungsi dengan baik untuk keadaan responsif. Max-lebar dan ketinggian min pada ibu bapa membolehkan saya mengurung cara yang div menyusut dan tumbuh, terutama ketika ia jatuh ke dalam susun atur grid CSS. Ia perlu fleksibel, tetapi mempunyai beberapa kekangan dan grid CSS yang bagus untuk itu.

Seterusnya, saya menambah pendengar acara Mousemove di Div induk dengan JavaScript. Itu membolehkan saya menangkap beberapa maklumat mengenai koordinat tetikus menggunakan E.Clientx dan E.Clienty.

 Const Zebrailill = Document.QuerySelector ('#zebra-ill')

// hover
zebrail.addeventListener ('mousemove', e => {
  Biarkan x = e.clientX;
  biarkan y = e.clienty;
})

Kemudian, saya akan melalui setiap lukisan dan menggunakan koordinat tersebut untuk menggerakkan imej. Saya juga akan memohon gaya Transform yang disambungkan kepada koordinat tersebut.

 Const Zebrailill = Document.QuerySelector ('#zebra-ill')
const zebrailImg = document.QuerySelectorAll ('. zebraimg')
kadar const = 0.05

// hover
zebrail.addeventListener ('mousemove', e => {
  Biarkan x = e.clientX;
  biarkan y = e.clienty;
  
  zebraillimg.foreach ((el, index) => {
    el.style.transform = 
      `rotatex ($ {x} deg) rotatey ($ {y} deg)`
  })
}) 

Woah, perlahan di sana rakan kongsi! Itu terlalu banyak pergerakan, kami mahukan sesuatu yang lebih halus. Oleh itu, saya perlu melambatkannya dengan mengalikannya dengan kadar yang rendah, seperti 0.05. Saya juga ingin mengubahnya hanya sedikit setiap lapisan, jadi saya akan menggunakan indeks lapisan untuk mempercepatkan atau melambatkan pergerakan.

 Const Zebrailill = Document.QuerySelector ('#zebra-ill')
const zebrailImg = document.QuerySelectorAll ('. zebraimg')
kadar const = 0.05

// hover
zebrail.addeventListener ('mousemove', e => {
  Biarkan x = e.clientX;
  biarkan y = e.clienty;
  
  zebraillimg.foreach ((el, index) => {
    Biarkan kelajuan = indeks = 1
    Biarkan xpos = kadar kelajuan * x
    Biarkan YPOS = Kadar Kelajuan * Y
    
    el.style.transform = 
      `rotatex ($ {xpos - 20} deg) Rotatey ($ {ypos - 20} deg) translateZ ($ {index * 10} px)`
  })
})

Akhirnya, saya boleh membuat kotak semak yang meminta pengguna jika mahu mematikan kesan ini.

 <p>
  <input type="checkbox" name="Motion11y">
  <label untuk="Motion11y"> Jika anda mempunyai gangguan vestibular, periksa ini untuk mematikan beberapa kesan </label>
</p>

 Const Zebrailill = Document.QuerySelector ('#zebra-ill')
const zebrailImg = document.QuerySelectorAll ('. zebraimg')
kadar const = 0.05
const MotionCheck = Document.GetElementById ('Motion11y')
Biarkan Ischecked = Palsu

// periksa untuk melihat apakah seseorang memeriksa bahagian gangguan vestibular
MotionCheck.AddeventListener ('perubahan', e => {
  ischecked = e.target.checked;
})

// hover
zebrail.addeventListener ('mousemove', e => {
  jika (ischecked) kembali
  Biarkan x = e.clientX;
  biarkan y = e.clienty;
  
  // ...
})

Sekarang pengguna mempunyai keupayaan untuk melihat dimensi berlapis lukisan pada hover, tetapi juga boleh mematikan kesannya jika ia mengganggu.

Kesan lukisan

Keupayaan untuk membuat sesuatu kelihatan seperti ia telah ditarik ke halaman telah wujud untuk seketika dan terdapat banyak artikel tentang bagaimana ia dilakukan. Saya menutupnya juga dalam kursus yang saya buat untuk Masters Frontend.

Premis itu seperti ini:

• Ambil laluan SVG dan buatnya putus -putus dengan Dashoffset.
• Buat sengkang sepanjang bentuk panjang.
• Animasi dashoffset (ruang antara sengkang).

Apa yang anda dapat pada akhirnya adalah sejenis kesan "ditarik".

Tetapi dalam lukisan ini, anda mungkin menyedari bahawa bahagian-bahagian yang saya animasi kelihatan seperti mereka ditarik tangan, yang sedikit lebih unik. Anda lihat, walaupun kesan itu akan berfungsi dengan baik untuk lebih banyak lukisan mekanikal, web belum lagi menyokong penggunaan garis tirus (garis yang berbeza-beza dalam ketebalan, seperti yang tipikal dari rasa yang lebih tangan).

Untuk pendekatan ini, saya membawa fail ke dalam Illustrator, mengesan garis dari bahagian lukisan saya, dan membuat garis -garis tersebut meruncing dengan pergi ke panel strok, di mana saya memilih "lebih banyak pilihan" dan mengklik pilihan tirus dari dropdown.

Saya menduplikasi garis -garis itu, dan mencipta laluan seragam yang lebih gemuk di bawahnya. Saya kemudian mengambil garis -garis lemak dan menghidupkannya ke halaman. Sekarang lukisan saya menunjukkan melalui bentuk:

Inilah yang saya buat:

• Saya dikesan dengan alat pen dan menggunakan berus tirus.
• Saya menduplikasi lapisan dan menukar garis menjadi seragam dan lebih tebal.
• Saya mengambil lapisan pertama dan mencipta laluan kompaun.
• Saya memudahkan titik jalan.
• Saya mencipta topeng kliping.

Dari sana, saya dapat menghidupkan segala -galanya dengan Drawsvg dan Greensock. Walaupun anda tidak perlu, anda boleh menggunakan CSS untuk animasi seperti ini. Terdapat satu ton titik jalan jadi dalam kes ini, jadi masuk akal untuk menggunakan sesuatu yang lebih berkuasa. Saya menulis satu lagi jawatan yang masuk ke dalam bagaimana untuk memulakan membuat animasi seperti ini. Saya akan mengesyorkan anda memulakannya jika anda segar.

Untuk menggunakan Drawsvg, kita perlu melakukan beberapa perkara:

• Muatkan skrip plugin.
• Daftar plugin di bahagian atas fail JavaScript.
• Pastikan laluan sedang digunakan, dan terdapat pukulan di laluan tersebut.
• Pastikan laluan tersebut disasarkan dan bukannya kumpulan yang menempatkan mereka. Unsur -unsur induk boleh disasarkan.

Berikut adalah contoh yang sangat asas dari DrawSVG (ihsan Greensock):

Oleh itu, dalam editor grafik, terdapat topeng kliping dengan garis yang lebih berseni, yang mendedahkan garis seragam lemak di bawahnya. Dari sini, kami akan merebut laluan yang lebih tebal dan menggunakan plugin DrawSVG untuk menghidupkannya ke halaman.

 // Daftar plugin
gsap.registerplugin (drawsvgplugin);

const drawlines = () => {
  gsap.set ('cls-15, #yellowunderline, .cls-13', {
    Keterlihatan: 'kelihatan'
  })
  
  const timeline = gsap.timeline ({ 
    Lalai: {
      Kelewatan: 1,
      Kemudahan: 'Circ',
      Tempoh: 2
    }		  
  })
  .Add ('Start')
  .fromto ('. CLS-15 Path', {
    Drawsvg: '0%'
  }, {
    Drawsvg: '100%',
    Secara mendalam: Benar
  }, 'Mula')
  .FromTo ('#Yellowunderline Path', {
    Drawsvg: '50% 50% '
  }, {
    Drawsvg: '100%',
    Secara mendalam: Benar
  }, 'mula = 1')
  .fromto ('. Cls-13', {
    Drawsvg: '50% 50% '
  }, {
    Drawsvg: '100%',
    Secara mendalam: Benar
  }, 'mula = 1')
}

window.onload = () => {
  lukisan ()
};

Dan di sana kita memilikinya! Ilustrasi awal untuk laman web kami yang dibuat dari lukisan berlapis dalam aplikasi iPad ProCreate. Saya harap ini membuat anda akan membuat projek web anda unik dengan ilustrasi tangan yang indah. Jika anda membuat apa -apa yang sejuk, beritahu kami dalam komen di bawah!

Atas ialah kandungan terperinci Cara mengubah lukisan prokreat ke dalam animasi web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!