{"id":476,"date":"2022-02-07T11:04:37","date_gmt":"2022-02-07T11:04:37","guid":{"rendered":"http:\/\/www.kurzohr.de\/kurzohr\/?p=476"},"modified":"2022-08-29T09:53:18","modified_gmt":"2022-08-29T09:53:18","slug":"ideen-zur-web-animation","status":"publish","type":"post","link":"https:\/\/www.kurzohr.de\/kurzohr\/hidden\/ideen-zur-web-animation\/","title":{"rendered":"Ideen zur Web Animation"},"content":{"rendered":"
\n
Adobe Animate:<\/div>\n

Also Webanimationen kann man ganz gut mit Adobe Animate erstellen. Das ganze funktioniert mit einer Html5 Canvas und Javascript. In Animate kann man tolle Sachen damit machen. Es ist sogar Responsive und l\u00e4sst sich gut in WordPress einbinden. Probleme gabs mit Schriften (vorallem mit deren Animation). Daf\u00fcr eignet sich Animate nicht sehr gut. Auch kann man keine Bones im HTML5 Modus in Animate verwenden. Das Ebenen Parenting funktioniert auch nicht. Die Ausgabegr\u00f6\u00dfe ist sehr gut gegen\u00fcber Gif.<\/p>\n

Fazit:<\/div>\n

Eignet sich ganz gut f\u00fcr Webanimation, wird aber heutzutage selten im www verwendet.<\/p>\n

Beispiel:<\/div>\n<\/div>\n
\n
\n
Das gute alte Gif:<\/div>\n

Wer kennt es nicht das gute alte Gif. Kann man gut in Photoshop, Animate oder After Effekts erstellen. Eignet sich wirklich nur f\u00fcr kleine Icons. Die Qualit\u00e4t ist nicht gut. Schriften kann man vergessen und die Ausgabegr\u00f6\u00dfe ist galaktisch. <\/p>\n

Fazit:<\/div>\n

Hat ausgedient<\/p>\n

Beispiel:<\/div>\n

Das gute alte Gif<\/a>\n<\/div>\n

\n
\n
Bodymovin und Lottie:<\/div>\n

Ja das war eine sch\u00f6ne Sache Svg damit zu erstellen. Das Bodymovin Plugin f\u00fcr After Effekts in Verbindung mit Lottie Scripts. Leider wird das von Adobe nicht mehr unterst\u00fctzt.<\/p>\n

Fazit:<\/div>\n

Tot\n<\/p><\/div>\n

\n
\n
CSS3 Animation:<\/div>\n

Auch eine sch\u00f6ne Sache. Es gibt viele Css Befehle mit denen man Animationen umsetzen kann. Man kann sogar Keyframes anlegen.
\nF\u00fcr Interessierte empfehle ich dieses Buch.<\/br>
\nCss Animations and Transitions by Alexis Goldstein<\/a><\/br><\/p>\n

Fazit:<\/div>\n

Die Reponsit\u00e4t ist anstregend auch mit Svgs. Aufwendig zu erstellen. Man braucht aber daf\u00fcr kein Javascript. Eignet sich f\u00fcr kleine Animationen.<\/p>\n

Beispiel:<\/div>\n

Under Construction\n<\/p><\/div>\n

\n
\n
Animation \u00fcber Background Position und Javascript Triggers<\/div>\n

Hier habe ich eine Methode entwickelt wie man total einfach eine sehr gute Webanimation estellen kann. Dieses Prinzip ist aus alten Gamemechaniken bekannt. Es l\u00e4sst sich aber gut in CSS in Verbindung mit Javascript umsetzen. Man erstellt in einer Bildsoftware ein Spritesheet mit den verschiedenen Animationszust\u00e4nden (Stats). Dieses Bild setzt man in einen Div Conatiner als CSS Background und l\u00e4sst mit Hilfe von Jquery das Bild versetzen. Mit Javascript kann man das Timing triggern. Das sch\u00f6ne daran ist, das es voll Responsive ist. Es eignet sich auch toll f\u00fcr WordPress oder pure Landing Pages. Es folgt noch ein kleines Tutorial wie man so etwas bauen kann. Under Construction<\/p>\n

Fazit:<\/div>\n

Eine coole Methode um sehr gute Web Animationen zu erstellen. Es ist auch nicht so aufwendig wie CSS3 Animationen.<\/p>\n

Beispiel:<\/div>\n

Under Construction\n<\/p><\/div>\n

\n","protected":false},"excerpt":{"rendered":"

Adobe Animate: Also Webanimationen kann man ganz gut mit Adobe Animate erstellen. Das ganze funktioniert mit einer Html5 Canvas und Javascript. In Animate kann man […]<\/a><\/p>\n<\/div>","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/www.kurzohr.de\/kurzohr\/wp-json\/wp\/v2\/posts\/476"}],"collection":[{"href":"https:\/\/www.kurzohr.de\/kurzohr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kurzohr.de\/kurzohr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kurzohr.de\/kurzohr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kurzohr.de\/kurzohr\/wp-json\/wp\/v2\/comments?post=476"}],"version-history":[{"count":31,"href":"https:\/\/www.kurzohr.de\/kurzohr\/wp-json\/wp\/v2\/posts\/476\/revisions"}],"predecessor-version":[{"id":1241,"href":"https:\/\/www.kurzohr.de\/kurzohr\/wp-json\/wp\/v2\/posts\/476\/revisions\/1241"}],"wp:attachment":[{"href":"https:\/\/www.kurzohr.de\/kurzohr\/wp-json\/wp\/v2\/media?parent=476"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kurzohr.de\/kurzohr\/wp-json\/wp\/v2\/categories?post=476"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kurzohr.de\/kurzohr\/wp-json\/wp\/v2\/tags?post=476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}