In mei­ner Wei­ter­bil­dung zum Web­ent­wick­ler bei Cim­da­ta haben wir in jeder vier­ten Woche eine Pro­jekt­wo­che, in der wir das Erlern­te in einem Pro­jekt (meis­tens) unse­rer Wahl umset­zen. So eine vier­te Woche ist bei mir die nächs­te Woche und ich habe mich mit einem ande­ren Kurs­teil­neh­mer zusam­men getan um das ambi­tio­nier­tes­te Coding-Pro­jekt mei­nes bis­he­ri­gen Lebens zu ver­wirk­li­chen!

No tags for this post.

Die Idee

Die Idee zu „Cra­zyS­VG“ kam mir als ich mit dem dem Plugin „Flash2Svg“ für Ado­be Ani­ma­te expe­ri­men­tiert habe. Damit hat man die Mög­lich­keit mit Ani­ma­te erstell­te Gra­fi­ken und Ani­ma­tio­nen, sowie auch Audio ins SVG-For­mat zu expor­tie­ren, was für mich v.a. des­we­gen inter­es­sant ist, da ich hob­by­mä­ßig Comics zeich­ne und mich ganz gut mit Ado­be Illus­tra­tor und Ani­ma­te aus­ken­ne. Natür­lich wer­den vie­le Ani­ma­te-Funk­tio­nen nicht von Flash2Svg unter­stützt, so ist man z.B. beim Twee­ning (so heißt das Berech­nen einer Ani­ma­ti­on von einem Bild zu einem ande­ren) auf „Clas­sic Twee­ning“ beschränkt, womit nur linea­res Twee­ning mög­lich ist, d.h. dass man z.B. kein sanf­tes Beschleu­ni­gen oder Abbrem­sen einer Ani­ma­ti­on umset­zen kann. Ein wei­te­res Bei­spiel sind Die Blend-Modes, was man z.B. aus Pho­to­shop kennt (z.B. „Mul­ti­pli­zie­ren“, „Auf­hel­len“ und „Abdun­keln“), wo nicht alles von Flash2Svg unter­stützt wird; ich habe auch fest­ge­stellt, dass die gro­ßen Vek­tor-Bear­bei­tungs-Anwen­dun­gen wie Illus­tra­tor oder Ink­scape eben­falls kei­nen ver­nünf­ti­gen SVG-Export diver­ser Eigen­schaf­ten bewerk­stel­li­gen kön­nen – z.B. wer­den eini­ge Blend-Modes (dar­un­ter z.B. „Lumi­no­si­ty“) von bei­den Anwen­dun­gen nicht rich­tig ins SVG-For­mat expor­tiert, was ich jedoch rela­tiv ein­fach durch das Anfü­gen eines ent­spre­chen­den CSS-Wer­tes im SVG-DOM hin­be­kom­men habe: style="mix-blend-mode: luminosity;" Und ich den­ke dass das erst die Spit­ze des Eis­bergs ist, wenn man sich die fol­gen­den SVG-Biblio­the­ken anschaut: svgjs.com, snapsvg.io. Tat­säch­lich den­ke ich, dass das eine Markt­lü­cke ist – damit mei­ne ich nicht, dass das Ziel eine voll­wer­ti­ge Vek­tor-Bear­bei­tungs-Soft­ware ist, denn da machen Illus­tra­tor und Co. schon einen sehr guten Job, es geht mir „nur“ um die Funk­tio­nen, die dank der o.g. SVG-Biblio­the­ken rela­tiv ein­fach zu bewerk­stel­li­gen sind, die es aber nicht in den gro­ßen Anwen­dun­gen gibt.

Zeitmanagement / Ziele

Grob gesagt haben wir vor die Arbeit so auf­zu­tei­len, dass sich der eine auf die Pro­gram­mie­rung des User-Inter­faces kon­zen­triert und der ande­re sich mit der Imple­men­tie­rung der SVG-Funk­tio­nen beschäf­tigt. Min­dest­ziel ist eine Soft­ware, mit der man imstan­de ist ein­zel­nen Ele­men­ten einer SVG-Gra­fik kom­for­ta­bel diver­se CSS-Eigen­schaf­ten zu ver­ge­ben; maxi­ma­les Ziel ist es SVG-Ani­ma­tio­nen und -Effek­te hin­zu­fü­gen zu kön­nen.

Technik

HTML, CSS, Java­Script (u.a. mit den Biblio­the­ken svgjs.com, snapsvg.io, jQue­ry, jQue­ryUI, evtl. auch React).

Eine harte Woche

Die­ses Pro­jekt wird mir und mei­nem Team­ma­te sehr viel abver­lan­gen, doch wir wer­den auf die Tas­ten hau­en und Ein­satz zei­gen. – Kaf­fee, Drum & Bass (oder ande­re Gen­res) und gutes Essen wer­den uns die Macht ver­lei­hen das Ding zu ver­wirk­li­chen! Ich wer­de hier in regel­mä­ßi­gen Abstän­den Bericht erstat­ten, mit Code-Aus­zü­gen und -Erläu­te­run­gen. :]

Pin It on Pinterest