JavaScript Animation

[Gunix]

Καλημέρα σε όλους σας.

 

Θα ήθελα την βοήθεια σας παρακαλώ.

Φτιάχνω ένα website με bootstrap που θα περιέχει το περιεχόμενο της ένα καράβι που θα κάνει ένα animation όπως θα δείτε στην εικόνα.

Επειδή είμαι αρχάριος πως μπορώ να κάνω ένα τέτοιο?

Επίσης να σας αναφέρω ότι μελετάω το w3schools.

[tzotzosgr]

Καλημέρα,

 

ας τα πάρουμε τα πράγματα από την αρχή!

πρώτα απ όλα δεν θες js για να κανείς animation... αλλά css, ccs3 η svg

χωρίς παρεξήγηση, εσύ θα φτιάξεις site χωρίς να γνωρίζεις τα βασικά?

δες εδώ http://codepen.io/SaraSoueidan/pen/501308e154923359ed1cdbfa29eadcc0

αλλά για μένα κανε μια εικόνα κινούμενη με το photoshop 

[Gunix]

HTML, ΗΤΜL5, CSS, CSS3 γνωρίζω τα βασικά αλλά συνεχίζω να μελετάω για την μάθω καλύτερα. Το SVG όχι δεν γνωρίζω.

Επίσης, γιατί να μην το κάνω με JavaScript? Στην JS μαθαίνω τα βασικά μέσα από το w3schools. Ρωτάω γιατί θέλω να την μάθω καλύτερα.

 

Ευχαριστώ.

[dominotrix]

Με την CSS3 επηρεαζεις την εμφανιση καποιων στοιχειων. Μπορεις να τους δωσεις ενα animation. Αν θελεις ομως ιδιαιτεροτητες (πχ το animation αυτο να "παιζει" μονο οταν εμφανιστει το συγκεκριμενο στοιχειο στην οθονη μετα απο scrolling) τοτε οντως χρειαζεσαι JS.

 

Προφανως και το ιδιο το animation αν θελεις το φτιαχνεις και με JS αν θελεις, απλα με CSS ειναι πιο ευκολο και πιο lightweight. Γενικα στο development υπαρχουν για οτιδηποτε θελεις να κανεις πολλοι τροποι να το πετυχεις. Το θεμα ειναι να ξερεις οχι μονο αυτους τους τροπους, αλλα τον πιο efficient απο αυτους.

 

Τωρα οσο για το προβλημα σου, θα ηθελα να μαθω τα εξης:

 

το καραβακι θα ειναι σε ενα σημειο και απλα θα εχει την κινηση σα να ειναι σε θαλασσα, ή οντως θα μετακινειται απο αριστερα προς δεξια;

 

Αν μπορεις να φτιαξεις ολα τα frames θα μπορουσες να χρησιμοποιησεις animation steps()

http://blog.teamtreehouse.com/css-sprite-sheet-animations-steps

 

Ενω ειναι πολυ ευκολο να βαλεις τον κωδικα ετσι ωστε το καραβακι να κουνιεται στο γιαλο, ειναι αρκετα δυσκολο να βρεις τις καταλληλες τιμες ετσι ωστε η κινηση αυτη να ειναι smooth και ρεαλιστικη. Εδω χρειαζεσαι physics τα οποια ειναι στανταρ τιμες για καποιες ρεαλιστικες κινησεις οπως ενας ανθρωπος που περπαταει, η το φτερουγισμα ενος πουλιου. Προσωπικα δεν εχω ασχοληθει, απλα αυτη ειναι η θεωρια.

 

Αν θελεις, μπορεις να ψαξεις στο codepen.io 

Ειδικα αφου εισαι και σχετικα αρχαριος το συγκεκριμενο θα σε βοηθησει να μαθεις νεα πραγματα και να δεις το source code για να καταλαβεις πως λειτουργουν.

[Gunix]

το καραβακι θα ειναι σε ενα σημειο και απλα θα εχει την κινηση σα να ειναι σε θαλασσα, ή οντως θα μετακινειται απο αριστερα προς δεξια;

 

Ναι θα ξεκινάει από αριστερά προς τα δεξιά.

 

Μπορείς να μου προτείνεις ή κάποιος μερικά tutorial για JavaScript Animation?

[pokemonhunter]

 

Καλημέρα,

 

αλλά για μένα κανε μια εικόνα κινούμενη με το photoshop 

 

+1.

Με ενα gifακι εισαι παραπανω απο GG