Lottie και web animation
Ελαφριά vector animations για ιστοσελίδες και εφαρμογές, παραδίδονται ως αρχεία Lottie που μένουν ευκρινή και φορτώνουν γρήγορα.
Βασικά χαρακτηριστικά
- Σχεδιασμοί animation σε After Effects
- Εξαγωγές Lottie JSON και dotLottie
- Βίντεο προεπισκόπησης για έγκριση
- Σημειώσεις υλοποίησης για developers
- Τίποτα δεν χρεώνεται εδώΛαμβάνετε πρώτα γραπτή προσφορά. Χωρίς πληρωμή, χωρίς δέσμευση.
- Πωλείται και παρέχεται από την GRADAXΈνα συμβόλαιο και μία ομάδα, όποιος κι αν κάνει τη δουλειά.
- Τα δεδομένα σας μένουν στην ΕΕΤίποτα δεν μεταφέρεται εκτός της ένωσης για επεξεργασία.
Σχετικά με αυτή την υπηρεσία
Τα Lottie animations είναι vector αρχεία που παίζουν σε ιστοσελίδες και εφαρμογές με ένα κλάσμα του μεγέθους ενός βίντεο ή GIF. Σχεδιάζουμε και ζωντανεύουμε εικονίδια, loaders, onboarding sequences και hero illustrations, τα εξάγουμε ως Lottie ή dotLottie και ελέγχουμε ότι παίζουν σωστά στον player που χρησιμοποιούν οι developers σας.
Μικρά αρχεία, καθαρά σε κάθε μέγεθος
Το animation σε μια ιστοσελίδα κάποτε σήμαινε GIF ή βίντεο. Τα GIF είναι μεγάλα, περιορισμένα σε χρώμα και θολά σε οθόνες υψηλής ανάλυσης. Τα βίντεο είναι βαριά, χρειάζονται player και δεν μπορούν να ανταποκριθούν στον χρήστη. Τα αρχεία Lottie περιγράφουν το animation ως διανυσματικά σχήματα και κίνηση, οπότε ένα δεκάδευτερο εικονογραφημένο animation μπορεί να ζυγίζει ένα κλάσμα του αντίστοιχου βίντεο και να παραμένει καθαρό σε κάθε οθόνη.
Μπορούν επίσης να ελεγχθούν μέσω κώδικα. Ένα εικονίδιο μπορεί να ζωντανεύει στο hover, ένας loader μπορεί να επαναλαμβάνεται μέχρι να φτάσουν τα δεδομένα, μια εικονογράφηση μπορεί να παίζει καθώς ο χρήστης κάνει scroll. Αυτό κάνει το Lottie κατάλληλο για λεπτομέρειες διεπαφής όπου ένα βίντεο θα ήταν πολύ βαρύ και πολύ παθητικό.
Σχεδιάζοντας μέσα σε αυτά που μπορεί να παίξει το Lottie
Το Lottie εξάγεται από το After Effects, αλλά δεν υποστηρίζει όλα όσα μπορεί να κάνει το After Effects. Πολλά εφέ, blurs, glows, 3D layers και ορισμένα blending modes είτε δεν εξάγονται είτε εξάγονται με τρόπους που επιβραδύνουν πολύ την αναπαραγωγή στα κινητά. Ένα animation σχεδιασμένο χωρίς αυτούς τους περιορισμούς κατά νου συχνά πρέπει να ξαναχτιστεί.
Σχεδιάζουμε για τη μορφή από το πρώτο καρέ, χρησιμοποιώντας shape layers, απλά masks και υποστηριζόμενες λειτουργίες. Πριν από την παράδοση, κάθε αρχείο δοκιμάζεται στον player που χρησιμοποιούν οι developers σας: lottie-web, τις βιβλιοθήκες iOS ή Android, ή dotLottie. Τα σύνθετα animations ελέγχονται επίσης για αναπαραγωγή σε μεσαίο κινητό, αφού ένα ομαλό animation σε laptop μπορεί να κολλάει σε φθηνότερη συσκευή.
Προδιαγραφές
- Κατηγορία
- Βίντεο & Κίνηση
- Τιμή
- 290 € έως 1.050 €
- Μεγέθη
- Μικρός (Σετ εικονιδίων), Μεσαίος (Animations λειτουργιών), Μεγάλος (Σύστημα motion)
- Χρόνος παράδοσης
- 3 ημέρες έως 4 εβδομάδες
- Χρέωση
- Εφάπαξ
- Τι κερδίζετε
- 4 στοιχεία, όλα μέσα στην τιμή
- Τι χρειαζόμαστε από εσάς
- Πού θα παίζουν τα animations: ιστοσελίδα, iOS, Android ή και τα τρία, Υπάρχουσες εικονογραφήσεις ή εικονίδια, ή brief για νέα, Χρώματα brand και τυχόν οδηγίες motion
- Το αγοράζουν συνήθως
- SaaS, Εφαρμογές για κινητά, Fintech, E-commerce
- Πωλείται και παρέχεται από
- GRADAX, ένα συμβόλαιο και μία ομάδα
- Πού υποβάλλονται σε επεξεργασία τα δεδομένα σας
- Ευρωπαϊκή Ένωση
Τι κερδίζετε
Όλα τα παρακάτω είναι μέσα στην τιμή. Τίποτα εδώ δεν είναι αναβάθμιση.
- Σχεδιασμοί animation σε After Effects
- Εξαγωγές Lottie JSON και dotLottie
- Βίντεο προεπισκόπησης για έγκριση
- Σημειώσεις υλοποίησης για developers
Τι αλλάζει
- Animations που μένουν ευκρινή σε κάθε μέγεθος και πυκνότητα οθόνης
- Μεγέθη αρχείων αρκετά μικρά ώστε να μην επιβραδύνουν τη φόρτωση της σελίδας
- Αναπαραγωγή δοκιμασμένη στον web, iOS ή Android player που χρησιμοποιεί η ομάδα σας
- Διαδραστικές καταστάσεις όπως hover, click ή scroll, ρυθμισμένες όπου χρειάζεται
Συγκρίνετε τα μεγέθη
Η τυπική τιμή για κάθε μέγεθος. Τα επιπλέον κοστολογούνται δίπλα, όχι κρυμμένα πίσω από μια κλήση.
| Περιλαμβάνεται | Σετ εικονιδίων290 €3 έως 5 εργάσιμες ημέρες | Animations λειτουργιών500 €1 έως 2 εβδομάδες | Σύστημα motion1.050 €2 έως 4 εβδομάδες |
|---|---|---|---|
| Έως πέντε animations εικονιδίων ή ένας loader | Περιλαμβάνεται | Περιλαμβάνεται | Περιλαμβάνεται |
| Αρχεία Lottie και dotLottie | Περιλαμβάνεται | Περιλαμβάνεται | Περιλαμβάνεται |
| Δύο γύροι αναθεωρήσεων | Περιλαμβάνεται | Περιλαμβάνεται | Περιλαμβάνεται |
| Δοκιμή αναπαραγωγής | Περιλαμβάνεται | Περιλαμβάνεται | Περιλαμβάνεται |
| Όλα όσα περιλαμβάνει το Σετ εικονιδίων | Δεν περιλαμβάνεται | Περιλαμβάνεται | Περιλαμβάνεται |
| Έως τρία εικονογραφημένα animations, το καθένα έως δέκα δευτερόλεπτα | Δεν περιλαμβάνεται | Περιλαμβάνεται | Περιλαμβάνεται |
| Καταστάσεις hover ή click | Δεν περιλαμβάνεται | Περιλαμβάνεται | Περιλαμβάνεται |
| Σημειώσεις υλοποίησης | Δεν περιλαμβάνεται | Περιλαμβάνεται | Περιλαμβάνεται |
| Όλα όσα περιλαμβάνει το Animations λειτουργιών | Δεν περιλαμβάνεται | Δεν περιλαμβάνεται | Περιλαμβάνεται |
| Onboarding sequence έως πέντε οθονών | Δεν περιλαμβάνεται | Δεν περιλαμβάνεται | Περιλαμβάνεται |
| Animation συνδεδεμένο με scroll ή διαδραστικό | Δεν περιλαμβάνεται | Δεν περιλαμβάνεται | Περιλαμβάνεται |
| Οδηγίες motion: timing, easing και αρχές | Δεν περιλαμβάνεται | Δεν περιλαμβάνεται | Περιλαμβάνεται |
| Προσθήκη στην προσφορά |
Προσθέστε ό,τι χρειάζεστε
Choose the size
Προσθέστε ό,τι χρειάζεστε
Το σύνολό σας€500
Η τυπική τιμή, συν ό,τι προσθέσετε. Επιβεβαιώνεται γραπτώς πριν ξεκινήσει οτιδήποτε· δεν χρεώνεται τίποτα μέχρι να το αποδεχτείτε.
Πώς λειτουργεί
Πακέτο
Ο σκοπός, η διάρκεια και το trigger κάθε animation συμφωνούνται.
Animate
Κατασκευή σε After Effects χρησιμοποιώντας μόνο λειτουργίες που υποστηρίζει το Lottie.
Βελτιστοποίηση
Σχήματα και keyframes απλοποιημένα για μικρά αρχεία.
Δοκιμή
Δοκιμή στον target player σας σε πραγματικές συσκευές πριν την παράδοση.
Ερωτήσεις
Γιατί Lottie αντί για βίντεο ή GIF;
Τα αρχεία Lottie είναι συνήθως πολύ μικρότερα, κλιμακώνονται χωρίς θόλωμα, έχουν διαφανές φόντο και ελέγχονται από κώδικα, όπως αναπαραγωγή στο hover ή ακολουθώντας το scroll.
Μπορεί κάθε animation να γίνει Lottie;
Όχι. Το Lottie υποστηρίζει καλά vector σχήματα, αλλά ορισμένα εφέ After Effects, blurs και 3D δεν εξάγονται. Σχεδιάζουμε μέσα σε αυτά τα όρια από την αρχή.
Τα προσθέτετε στην ιστοσελίδα μας;
Παρέχουμε αρχεία και σημειώσεις για τον developer σας. Η υλοποίηση μπορεί να προστεθεί αν δεν έχετε developer.
Σχετικές αναζητήσεις
Σχετική εργασία
ΕφάπαξΣχεδιασμός εικονιδίωνΈνα προσαρμοσμένο σετ εικονιδίων σχεδιασμένο σε ένα πλέγμα, ώστε κάθε εικονίδιο να δείχνει ότι ανήκει στα υπόλοιπα.from 290 €
ΕφάπαξΣχεδιασμός εφαρμογών για κινητάΟθόνες εφαρμογών iOS και Android σχεδιασμένες στο Figma, με ροές, καταστάσεις και βιβλιοθήκη components έτοιμη για ανάπτυξη.from 420 €
ΕφάπαξAnimation λογοτύπουΤο λογότυπό σας animated σε λίγα δευτερόλεπτα κίνησης που ταιριάζουν στο brand, για βίντεο, web και social.from 290 €
ΕφάπαξChroma key και rotoscopingGreen screen με καθαρό key και θέματα κομμένα καρέ-καρέ, με άκρα σε μαλλιά και κίνηση που αντέχουν.from 290 €
ΕφάπαξΣύνθεση VFXΑντικαταστάσεις οθονών, αφαίρεση αντικειμένων, αλλαγές ουρανού και προσθήκη στοιχείων, με τόσο ομαλή ενσωμάτωση που κανείς δεν βλέπει την ένωση.from 290 €
ΕφάπαξΒίντεο screencastΠεριηγήσεις λογισμικού που καταγράφονται, μοντάρονται και μεγεθύνονται ώστε οι θεατές να ακολουθούν κάθε κλικ.from 290 €
Δεν σας καλύπτει κανένα πακέτο;
Ορισμένες εργασίες έχουν δική τους μορφή. Τις εξετάζουμε πρώτα και τις προσφέρουμε γραπτώς, και η κλήση εξέτασης δεν κοστίζει τίποτα.