Shape Morphing Εικονίδια στο κουμπί Κάντε κλικ - CSS-Κόλπα

Anonim

Η ιδέα εδώ είναι να χρησιμοποιήσετε ένα εικονίδιο SVG σε ένα κουμπί και να αλλάξετε αυτό το εικονίδιο για ένα άλλο όταν κάνετε κλικ στο κουμπί. Ένα κλικ στο κουμπί συχνά υποδηλώνει ότι έχει γίνει κάποια ενέργεια, επομένως η εναλλαγή εικονιδίων μπορεί να είναι μια ωραία πινελιά διεπαφής χρήστη για να δείξει την αλλαγή στο περιβάλλον και να επιβεβαιώσει ότι η ενέργεια έχει συμβεί.

Μια πιθανή περίπτωση χρήσης θα μπορούσε να είναι ένα κουμπί λήψης. Το εικονίδιο στο κουμπί μπορεί αρχικά να υποδηλώνει ότι το κουμπί θα ενεργοποιήσει μια λήψη, αλλά θα αλλάξει σε ένα σημάδι επιλογής όταν έχει γίνει κλικ στο κουμπί.

Δείτε το Pen MorphSVG στο κουμπί στο Click by Geoff Graham (@geoffgraham) στο CodePen.

Ας δημιουργήσουμε ένα απόσπασμα που ολοκληρώνει αυτό το μοτίβο, ώστε να μπορούμε να το χρησιμοποιήσουμε σε άλλα παρόμοια περιβάλλοντα.

Απαιτήσεις

Ενώ το αρχειοθετούμε αυτό ως απόσπασμα SVG, θα βασιστούμε στο TweenMax του GSAP, το οποίο είναι μια βιβλιοθήκη JavaScript ειδικά για την κίνηση SVG και το MorphSVG, το οποίο αποτελεί συστατικό του TweenMax.

Ναι, το SVG έχει πράγματι εγγενή υποστήριξη για κινούμενα σχέδια που μας επιτρέπουν να επιτύχουμε το ίδιο πράγμα. Ωστόσο, με την υποστήριξη του SMIL να μειώνεται σε μελλοντικές εκδόσεις των προγραμμάτων περιήγησης WebKit και Blink και απόλυτη έλλειψη υποστήριξης στο IE και το Edge, το GSAP γίνεται μια πολύ πιο ελκυστική εναλλακτική λύση.

Ας τα πυροβολήσουμε και να δημιουργήσουμε ένα μοτίβο!

Βήμα 1: Επιλέξτε τα σχήματα SVG

Θα ανταλλάξουμε ένα σχήμα για ένα άλλο. Τα σχήματα που χρησιμοποιήθηκαν για αυτό το απόσπασμα προέρχονταν από το IcoMoon, το οποίο έχει τόνους δωρεάν διανυσματικών εικονιδίων, αλλά μπορείτε να φτιάξετε και το δικό σας. Είτε έτσι είτε αλλιώς, ετοιμάστε τα σχήματά σας και ας τα προσθέσουμε στο HTML μέσα από ένα στοιχείο κουμπιού.

  Download

Βήμα 2: Στυλ του κουμπιού και του SVG

Μπορούμε να ρυθμίσουμε το CSS στη συνέχεια. Τα περισσότερα στυλ στο παράδειγμά μας είναι ειδικά για το demo. Εδώ είναι το ελάχιστο ό, τι είναι απαραίτητο για να λειτουργήσει αυτή η λειτουργικότητα.

Σημειώστε ότι το βασικό κομμάτι κρύβει το σχήμα στο οποίο μεταμορφώνουμε από προεπιλογή. Το κάνουμε αυτό επειδή χρειαζόμαστε και τα δύο σχήματα στο DOM για το MorphSVG για να ανταλλάξουμε το ένα για το άλλο, αλλά δεν μπορούμε να τα δείξουμε ταυτόχρονα. Αυτό σημαίνει ότι κρύβουμε το δεύτερο σχήμα και αφήνουμε το MorphSVG να κάνει τα θαύματα του για να το κάνει ορατό όταν χρειάζεται.

/* The main SVG */ .button-icons ( width: 1.25em; ) /* The individual icons */ .icon ( fill: #fff; ) /* We hide the checkmark by default */ #checkmark ( visibility: hidden; )

Βήμα 3: MV Morphin 'SVGs!

Εδώ παίζουν τα TweenMax και MorphSVG. Ο πλήρης κωδικός για το παράδειγμα παρέχεται παρακάτω, αλλά ακολουθεί αυτό το γενικό σενάριο:

  • Ορίστε μερικές μεταβλητές για να ξεκινήσετε, ώστε να μπορούμε να τις αναφερόμαστε σε ολόκληρο τον κώδικα χωρίς να χρειάζεται να τις γράφετε κάθε φορά:
    • icons: το πλήρες στοιχείο SVG
    • button: το κουμπί (ή σύνδεσμος) που περιέχει τα σχήματά μας
    • buttonText: το κείμενο μέσα στο κουμπί
    • buttonTL: Η εντολή MorphSVG για εναλλαγή του εικονιδίου λήψης για το εικονίδιο επιλογής
  • Γεια σου, JavaScript, παρακαλώ προσέξτε το κουμπί για να κάνετε κλικ και παίξτε το κινούμενο σχέδιο MorphSVG προς τα εμπρός και αντίστροφα σε εναλλακτικά κλικ.
  • Ω και, hey JavaScript, αλλάξτε επίσης το κείμενο του κουμπιού όταν κάνετε κλικ στο κουμπί.
  • Ευχαριστώ, JavaScript
// We're going to select some things and make them variables var select = function(s) ( return document.querySelector(s); ), icons = select('#icons'), button = select('.button'), buttonText = document.getElementById("button-text") // Morph the Download icon into the Checkmark icon var buttonTl = new TimelineMax((paused:true)); buttonTl.to('#download', 1, ( morphSVG:(shape:'#checkmark'), ease:Elastic.easeInOut )) // On button click, play the animation button.addEventListener('click', function() ( if (buttonTl.time() > 0) ( buttonTl.reverse(); ) else ( buttonTl.play(0); ) )) // On button click, swap out the button text button.addEventListener('click', function() ( if (button.classList.contains("saved")) ( button.classList.remove("saved"); buttonText.innerHTML = "Download"; ) else ( button.classList.add("saved"); buttonText.innerHTML = "Saved!"; ) ), false);

Διαδήλωση

Το παρακάτω είναι μια επίδειξη του κώδικα που έχουμε καλύψει:

Δείτε το Pen MorphSVG στο κουμπί στο Click by Geoff Graham (@geoffgraham) στο CodePen.

βιβλιογραφικές αναφορές

  • GreenSock MorphSVG: Τεκμηρίωση για τη χρήση της προσθήκης.
  • Πώς λειτουργεί το SVG Shape Morphing: Ο Chris δημοσίευσε την ίδια ιδέα χρησιμοποιώντας το SMIL και παρείχε μια ωραία βάση για αυτό το μοτίβο.
  • Happy / Sad Pen: Το demo του Chris Gannon που βοήθησε στην κατασκευή του animation για αυτό το μοτίβο.