Ich habe kürzlich angefangen, auf meinem iPad mit der Procreate App und Apple Pencil zu zeichnen. Ich genieße die Flexibilität, auf diese Weise zu malen. Was mich normalerweise davon abhält, zu Hause zu malen, sind grundlegende Dinge wie Aufbau, Pinselreinigung, richtige Belüftung und andere Faktoren, die nicht wirklich mit dem Malen selbst zu tun haben. Procreate ahmt Mal- und Zeichenprozesse ziemlich gut nach, fügt aber digitale Funktionen wie Rückgängig/Wiederherstellen, Ebenen und Ebeneneffekte hinzu.
Hier ist ein Procreate-Gemälde, das ich gemacht habe und das ich dann exportiert und im Web animiert habe.
Siehe den Pen
Zebra Page - Web-Animation aus einer Procreate-Zeichnung von Sarah Drasner (@sdras)
auf CodePen.
Das kannst du auch! Hier behandeln wir zwei grundlegende Animationseffekte: den Parallax-Effekt, der beim Hover auftritt (mit der Möglichkeit, ihn für Menschen mit vestibulären Störungen abzuschalten), und den kleinen Zeicheneffekt beim Laden der Seite.
Parallaxe mit Zeichenebenen
Ich erwähnte, dass ein Grund, warum ich gerne auf dem iPad zeichne, die Möglichkeit ist, in Ebenen zu arbeiten. Beim Erstellen von Ebenen achte ich darauf, bestimmte „Themen“ auf derselben Ebene zu belassen, zum Beispiel sind die Zebrastreifen auf einer Ebene und die Punkte auf ihrer eigenen Ebene unter den Streifen.
Ich werde die Zeichnung über die Grenzen der Linie der darüber liegenden Ebene hinaus erweitern, hauptsächlich weil Sie ein wenig darum herum spähen können, während wir die Zeichnung im Parallax-Effekt bewegen. Wenn die Linien an irgendeiner Stelle scharf sind, wird das unnatürlich aussehen.
Sobald ich mit dem Erstellen meiner Ebenen fertig bin, kann ich die Dinge dank Procreates Exportoptionen als Photoshop (PSD)-Datei exportieren.
Die gleiche Zeichnung in Photoshop geöffnet.Dann werde ich ein paar davon zusammenfügen, sodass ich höchstens mit etwa 8 Ebenen arbeite. Ich benutze ein Photoshop-Plugin namens tinyPNG, um jede Ebene einzeln zu exportieren. Ich habe gehört, dass es bessere Komprimierungswerkzeuge gibt, aber ich war mit diesem ziemlich zufrieden.
Als nächstes gehe ich in meinen Code-Editor und erstelle ein Div, um alle verschiedenen Bilder zu beherbergen, die in den Ebenen enthalten sind. Ich gebe diesem Div eine relative Positionierung, während alle darin enthaltenen Bilder eine absolute Positionierung erhalten. Dies platziert die Bilder übereinander.
<div id="zebra-ill" role="presentation">
<img class="zebraimg" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/zebraexport6.png' />
<img class="zebraimg" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/zebraexport5.png' />
…
</div>#zebra-ill {
position: relative;
min-height: 650px;
max-width: 500px;
}
.zebraimg {
position: absolute;
top: 0;
left: 0;
perspective: 600px;
transform-style: preserve-3d;
transform: translateZ(0);
width: 100%;
}Die 100% Breite des Bildes wird alle Bilder auf die Größe des übergeordneten Divs beschränken. Ich tue dies, damit ich sie alle gleichzeitig mit denselben Einschränkungen steuere, was für responsive Bedingungen gut funktioniert. Die max-width und min-height des übergeordneten Elements ermöglichen es mir, die Art und Weise, wie sich das Div verkleinert und vergrößert, zu kontrollieren, insbesondere wenn es in ein CSS Grid-Layout eingefügt wird. Es muss flexibel sein, aber auch einige Einschränkungen haben, und CSS Grid ist dafür großartig.
Als Nächstes füge ich dem übergeordneten Div mit JavaScript einen mousemove Event-Listener hinzu. Das ermöglicht es mir, Informationen über die Koordinaten der Maus mit e.clientX und e.clientY zu erfassen.
const zebraIll = document.querySelector('#zebra-ill')
// Hover
zebraIll.addEventListener('mousemove', e => {
let x = e.clientX;
let y = e.clientY;
})Dann gehe ich durch jede der Zeichnungen und verwende diese Koordinaten, um die Bilder zu bewegen. Ich werde sogar Transform-Stile anwenden, die mit diesen Koordinaten verbunden sind.
const zebraIll = document.querySelector('#zebra-ill')
const zebraIllImg = document.querySelectorAll('.zebraimg')
const rate = 0.05
//hover
zebraIll.addEventListener('mousemove', e => {
let x = e.clientX;
let y = e.clientY;
zebraIllImg.forEach((el, index) => {
el.style.transform =
`rotateX(${x}deg) rotateY(${y}deg)`
})
})
Siehe den Pen
Zebra-Seite von Sarah Drasner (@sdras)
auf CodePen.
Woah, langsam, mein Freund! Das ist viel zu viel Bewegung, wir wollen etwas Subtileres. Also muss ich es stark verlangsamen, indem ich es mit einer niedrigen Rate multipliziere, z. B. 0,05. Ich möchte es auch pro Ebene ein wenig ändern, also werde ich den Ebenenindex verwenden, um die Bewegung zu beschleunigen oder zu verlangsamen.
const zebraIll = document.querySelector('#zebra-ill')
const zebraIllImg = document.querySelectorAll('.zebraimg')
const rate = 0.05
// Hover
zebraIll.addEventListener('mousemove', e => {
let x = e.clientX;
let y = e.clientY;
zebraIllImg.forEach((el, index) => {
let speed = index += 1
let xPos = speed + rate * x
let yPos = speed + rate * y
el.style.transform =
`rotateX(${xPos - 20}deg) rotateY(${yPos - 20}deg) translateZ(${index * 10}px)`
})
})Schließlich kann ich eine Checkbox erstellen, die den Benutzer fragt, ob er diesen Effekt ausschalten möchte.
<p>
<input type="checkbox" name="motiona11y" id="motiona11y" />
<label for="motiona11y">If you have a vestibular disorder, check this to turn off some of the effects</label>
</p>const zebraIll = document.querySelector('#zebra-ill')
const zebraIllImg = document.querySelectorAll('.zebraimg')
const rate = 0.05
const motioncheck = document.getElementById('motiona11y')
let isChecked = false
// Check to see if someone checked the vestibular disorder part
motioncheck.addEventListener('change', e => {
isChecked = e.target.checked;
})
// Hover
zebraIll.addEventListener('mousemove', e => {
if (isChecked) return
let x = e.clientX;
let y = e.clientY;
// ...
})Jetzt hat der Benutzer die Möglichkeit, die geschichtete Dimensionalität der Zeichnung beim Hover zu betrachten, kann den Effekt aber auch ausschalten, wenn er störend ist.
Zeicheneffekt
Die Möglichkeit, etwas so aussehen zu lassen, als ob es auf die Seite gezeichnet wurde, gibt es schon seit einiger Zeit und es gibt viele Artikel darüber, wie es gemacht wird. Ich behandele es auch in einem Kurs, den ich für Frontend Masters gemacht habe.
Das Prinzip ist wie folgt:
- Nimm einen SVG-Pfad und mache ihn mit
dashoffsetgestrichelt. - Mache den Strich so lang wie die gesamte Form.
- Animieren Sie den
dashoffset(den Abstand zwischen den Strichen).
Was Sie am Ende bekommen, ist eine Art „aufgemalter“ Effekt.
Aber bei dieser speziellen Zeichnung haben Sie vielleicht bemerkt, dass die Teile, die ich animiert habe, aussehen, als wären sie handgezeichnet, was ein bisschen einzigartiger ist. Sie sehen, obwohl dieser Effekt für mechanischere Zeichnungen gut funktioniert, unterstützt das Web noch nicht die Verwendung von sich verjüngenden Linien (Linien, die sich in der Dicke ändern, wie es für ein handgezeichneteres Gefühl typisch ist).
Für diesen Ansatz habe ich die Datei nach Illustrator gebracht, die Linien aus diesem Teil meiner Zeichnung nachgezeichnet und diese Linien verjüngt, indem ich zum Strich-Panel gegangen bin, wo ich „Weitere Optionen“ ausgewählt und die verjüngte Option aus dem Dropdown-Menü angeklickt habe.
Ich habe diese Linien dupliziert und darunter fettere, gleichmäßige Pfade erstellt. Dann habe ich diese fetten Linien genommen und sie auf die Seite animiert. Jetzt scheint meine Zeichnung durch die Form.
Hier ist, was ich getan habe:
- Ich habe mit dem Zeichenstift nachgezeichnet und einen sich verjüngenden Pinsel verwendet.
- Ich habe die Ebene dupliziert und die Linien uniform und dicker gemacht.
- Ich habe die erste Ebene genommen und einen zusammengesetzten Pfad erstellt.
- Ich habe die Pfadpunkte vereinfacht.
- Ich habe eine Schnittmaske erstellt.
Von dort aus kann ich alles mit drawSVG und GreenSock animieren. Obwohl Sie es nicht müssen, könnten Sie CSS für diese Art von Animation verwenden. Es gibt eine Menge Pfadpunkte, sodass es in diesem Fall sinnvoll ist, etwas Leistungsfähigeres zu verwenden. Ich habe einen anderen Beitrag geschrieben, der detailliert beschreibt, wie man mit der Erstellung dieser Arten von Animationen beginnt. Ich würde empfehlen, dort zu beginnen, wenn Sie neu darin sind.
Um drawSVG zu verwenden, müssen wir ein paar Dinge tun:
- Lade das Plugin-Skript.
- Registrieren Sie das Plugin am Anfang der JavaScript-Datei.
- Stellen Sie sicher, dass Pfade verwendet werden und dass diese Pfade Striche haben.
- Stellen Sie sicher, dass diese Pfade gezielt angesprochen werden und nicht die Gruppen, die sie enthalten. Die übergeordneten Elemente könnten stattdessen gezielt angesprochen werden.
Hier ist ein sehr einfaches Beispiel für drawSVG (mit freundlicher Genehmigung von GreenSock):
Siehe den Pen
DrawSVGPlugin Werte von GreenSock (@GreenSock)
auf CodePen.
Im Grafikeditor gibt es also eine Schnittmaske mit kunstvolleren Linien, die darunterliegende, fette, gleichmäßige Linien freilegen. Von hier aus greifen wir diese dickeren Pfade und verwenden das drawSVG-Plugin, um sie auf die Seite zu animieren.
//register the plugin
gsap.registerPlugin(DrawSVGPlugin);
const drawLines = () => {
gsap.set('.cls-15, #yellowunderline, .cls-13', {
visibility: 'visible'
})
const timeline = gsap.timeline({
defaults: {
delay: 1,
ease: 'circ',
duration: 2
}
})
.add('start')
.fromTo('.cls-15 path', {
drawSVG: '0%'
}, {
drawSVG: '100%',
immediateRender: true
}, 'start')
.fromTo('#yellowunderline path', {
drawSVG: '50% 50%'
}, {
drawSVG: '100%',
immediateRender: true
}, 'start+=1')
.fromTo('.cls-13', {
drawSVG: '50% 50%'
}, {
drawSVG: '100%',
immediateRender: true
}, 'start+=1')
}
window.onload = () => {
drawLines()
};Und da haben wir es! Eine initiale Illustration für unsere Website, die aus einer geschichteten Zeichnung in der Procreate iPad App erstellt wurde. Ich hoffe, dies hilft Ihnen dabei, Ihre Webprojekte mit wunderbaren handgezeichneten Illustrationen einzigartig zu gestalten. Wenn Sie etwas Cooles machen, lassen Sie es uns unten in den Kommentaren wissen!