Animeer UI/UX in Haiku: 'n Chat met Zack Brown

Ons het gaan sit om te gesels met Zack Brown, uitvoerende hoof en visioenêr agter Haiku Animator.

Ons wil graag hierdie artikel begin met 'n gedig:

UX en UINot So Fun to AnimateMaar, nou is daar Haiku- School of Motion

Doen hierdie graad 3 Engelse grappies iets vir jou?

Daar is baie buzz rondom bewegingsontwerp en hoe dit in die wêreld van UI/ pas UX ontwerp. Aan die voorpunt van UI/UX-navorsing is Zack Brown, HUB van Haiku en die visioenêr agter Haiku Animator.

Die wêreld is dors om ekspressiewe animasies by hul gebruikerservarings te voeg, maar die huidige werkvloei vir animasie in UI en UX het baie om te wens. Nou, met die hulp van Haiku Animator kan jy ontwerp, animeer, publiseer en insluit in 'n enkele goed ingestelde program.

Dit is ook nie net 'n ewekansige opstart nie, Haiku het deur die legendariese Y Combinator-program gegaan. . Y Combinator is berug daarvoor dat hy gehelp het om sommige van die mees innoverende handelsmerke wat ons vandag ken, soos Dropbox en Airbnb te begin. So, dit is veilig om te sê, Haiku lyk of hulle besig is met iets.

In die podcast het ons met Zack gaan sit om oor die wêreld van UI/UX-animasie te gesels. Langs die pad sal jy hoor van Zack se agtergrond in die advertensiewêreld, hoe hy Haiku begin het, en hoe dit is om 'n vinnig groeiende opstartonderneming te bedryf.

Haiku bied ook aan ons podcast-luisteraars 'n afslag op Animator. Hierdie afslag gaan beskikbaar wees totBrown:

En speletjies gratis op die web is beslis in stryd met speletjies vir betaling deur die toepassingwinkel en sy hekwagter. En daar is ook 'n klomp tegniese redes. Die kodebasis op hierdie stadium was 15 jaar oud, dit het deur allerhande verskillende leiers gegaan en deur die verkryging het sommige mense nie rondgebly nie. Niemand het regtig die kodebasis geken nie.

Zack Brown:

Dit gekombineer met Adobe se DNA en wat ek effektief wanbestuur van Flash sou noem, was hierdie perfekte storm wat tot sy dood gelei het.

Joey Korenman:

Wow.

Zack Brown:

Ja.

Joey Korenman:

Ek bedoel, dit is regtig hartseer en ek weet nie. Daar is vreemde parallelle wat jy kan trek uit daardie storie en ander dinge wat soortgelyk is, maatskappye wat verkry word en dan stadig, stadig doodgestik word. Daar was vroeër 'n baie, baie kragtige, wonderlike samestelling-toepassing genaamd Shake, dit was soort van die voorloper van Nuke, wat nou die standaard visuele effekte-instrument is.

Joey Korenman:

En Appel het Shake gekoop en toe, dit het net soort van op die wingerdstok gesterf en daar was ook baie woede rondom dit, so dit is nie 'n ongewoon ding nie. Goed, so my volgende vraag, wat ek dink ons ​​het nou al genoeg daaroor gedans, is jou maatskappy, Haiku, bou 'n instrument genaamd Animator en ons gaan diep daarin duik, maar net om almal 'n oorsig te gee , wat is Animator? Enwat is die probleem wat dit probeer oplos?

Zack Brown:

Sekerlik. So, ek dink After Effects is 'n goeie verwysingspunt. After Effects is die eerste keer 26 jaar gelede in 1993 vrygestel, so dit is ou skool en dit is 'n bewegingsgrafika-instrument spesifiek vir film en TV en dit was nog altyd. Stel jou vir 'n oomblik voor as After Effects van die grond af gebou is, maar met die doel van bewegingsontwerp vir sagteware en gebruikerskoppelvlakke in plaas van filmvervaardiging.

Zack Brown:

En daar is 'n paar sleutelverskille tussen daardie media, dinge soos interaktiwiteit, integrasie met kodebasisse, dinge soos weergawebeheer. Daardie bekommernisse bestaan ​​nie heeltemal in die film- en TV-wêreld nie.

Joey Korenman:

Reg.

Zack Brown:

So, ons het al baie gebruikers gehad wat ons vergelyk het met die analogie waarmee Skets is Photo Shop as Haiku Animator is na After Effects. Dit is naamlik nuwer, dit is doelgebou vir UI-animasie, dit is skoner en meer toeganklik ook, veral vir mense wat vir die eerste keer in bewegingsontwerp begin.

Joey Korenman:

Perfek. Ja, ek dink dit is die perfekte beskrywing en ek het daarmee rondgespeel en dit is baie pret om te gebruik en enigiemand wat After Effects gebruik, sal dadelik verstaan ​​hoe dit werk. Daar is 'n hele ander kant aan Animator wat nie regtig in After Effects bestaan ​​nie en ek wil daaroor praat, maar ek wil hoor hoe jy hierdie toepassing eintlik gebou het, wantEk dink ek en jy het ten minste 'n jaar gelede ontmoet en op daardie tydstip was die toepassing in beta en jy het baie funksies daarby gevoeg en dit ontwikkel.

Joey Korenman:

En ek is altyd nuuskierig oor hoe jy te werk gaan om so iets te doen, om so 'n ingewikkelde stuk sagteware te bou. So, miskien kan jy net praat oor hoe jy te werk gegaan het om die aanvanklike weergawes van die toepassing te ontwikkel. Was dit jy wat dit gekodeer het? Het jy 'n span gehad, hoe het dit gewerk?

Zack Brown:

Weereens, die hele storie gaan terug na daardie agentskap en oorbrug daardie gaping tussen ontwerp en kode en om daardie probleem te verstaan. Dit is eintlik die begin van die Haiku-verhaal. Ek dink my persoonlike loopbaan het om hierdie probleem gedraai op 'n paar verskillende plekke, verskillende werke. En langs die pad het ek my medestigter ontmoet. Ons het saam by 'n vorige maatskappy gewerk en hy het die probleem ook gesien en so, ons het uiteengesit, het ons in Junie 2016 geïnkorporeer.

Zack Brown:

Die eerste ses maande was nogal eksperimenteel, net hy was in Philadelphia, ek was in SF, so eintlik net video-oproepe, stemklets, Slack, en weergawebeheer en heen en weer en iets uit te vind. En dit was meer as 'n jaar totdat ons enigiets gehad het wat enigsins nuttig was vir enigiemand. Omdat dit soort van begin het in 'n wetenskap laboratorium omgewing. Soos o, wat as ons dit gedoen het, wat as ons dit gedoen het? Dit is soort van die begin, net baie eksperimentering, brute krag,eksplorasie, en toe het ons ons eerste belegging teen die einde van 2016 aangebring.

Zack Brown:

En dit is toe dat ons goed begin voel het, ek dink ons ​​moet hierdie ding geld verdien, kom ons bou 'n werklike nut daarin, kom ons vind 'n gebruiksgeval waaroor mense omgee en uiteindelik sal betaal en dit is hoe dit ontwikkel het.

Joey Korenman:

Kos en een van die dinge waaroor ek regtig nuuskierig is, is die feit dat jy in die Y Combinator-program aanvaar is. En ek weet nie of almal wat luister, bewus gaan wees van wat dit is nie. Almal in die tegnologiewêreld weet van Y Combinator, maar in die bewegingsontwerpwêreld is ek seker daar is mense wat dit nie doen nie.

Joey Korenman:

So, kan jy verduidelik wat Y Combinator is en dan, hoekom het jy gekies om vir daardie program aansoek te doen?

Zack Brown:

So, YC, Y Combinator, YC, is 'n opstartversneller. Wat hulle doen, is om onderhoude te voer met startups en stigters wat hulle belowend vind en dan, diegene wat hulle aanvaar, skakel hulle met hulpbronne en versorging, in wese om waagkapitaal in te samel en die beginspel te speel. En hulle belê self 'n bietjie geld, maar jy vat nie YC vir die kontant nie, want hulle is nogal duur. Hulle neem 'n groot deel van ekwiteit.

Zack Brown:

Daar is deesdae baie verskillende opstartversnellers, maar YC is een van die oorspronklikes, die OG's as jy wil.

JoeyKorenman:

Reg.

Zack Brown:

En ek het 'n lys hier, 'n paar ander portefeuljemaatskappye sluit in Air Bnb, Stripe, Cruise, Dropbox, Coin Base, Instacart , Reddit, Twitch TV en die lys gaan aan. Dit is asof al hierdie IPO's nou plaasvind. YC kla glad nie.

Joey Korenman:

Hulle het 'n goeie oog vir talent.

Zack Brown:

Hulle doen. Hulle het ook 'n handelsmerk en so, baie mense het aansoek gedoen en bekend, hul aanvaardingskoers is laer as Harvard s'n, soos vier keer laer. So, om deur YC te gaan gee jou 'n soortgelyke stempel van geloofsbriewe, soos o YC sê hulle is oukei, so natuurlik is hulle oukei.

Zack Brown:

Dit is net so die moeite werd as geloofsbriewe is en ten minste in Silicon Valley, dis hoe dit werk, dink ek.

Joey Korenman:

Ja, dit is eintlik baie, regtig cool. En ek wil ook van die ervaring hoor, maar ek wil 'n bietjie meer delf, want dit is iets waaroor ek gedink het en ek met ander entrepreneurs gepraat het en School of Motion het tans geen beleggers nie. Dit is heeltemal stewels, maar ek het daaraan gedink.

Joey Korenman:

Ek het met beleggers gepraat en jy weeg die voor- en nadele daarvan, so ek is soort van nuuskierig wat die weegskaal vir jou laat kantel het om dit die moeite werd te maak om aandele weg te gee om kapitaal in te samel in plaas daarvan om dit te begin.

Zack Brown:

Deel daarvan is terug nadie wetenskaplaboratorium eksperimentele vroeë dae waar ons probeer het om iets revolusionêr uit te vind en op die punt toe ons by YC aanvaar is, het ons nie 'n pad na winsgewendheid gehad nie. Ons het nog nie geld verdien nie. Ons het nie geld verdien tot 'n jaar nadat ons in YC aanvaar is nie, so daar was eenvoudig nie 'n pad na bootstrapping nie, nie met daardie huidige trajek nie.

Joey Korenman:

Reg.

Zack Brown:

Ons het 'n bietjie vriende en familie en stigterkapitaal ingesamel, so ons het as 't ware reeds 'n paar VC ingesamel, ons was besig om hierdie lyn te kry, wil ons verander net ons pad en fokus daarop om iets skraps daar buite te kry wat geld maak of 'n bietjie meer insamel en van die begin af vir iets meer grandioos of ambisieus gaan? Wat musiek in VC se ore is.

Zack Brown:

Ja, toe ons in YC gekom het, het ons omtrent vyf maande se aanloopbaan gehad, wat dalk genoeg is om 'n saadrondte in die Vallei te laat groei, maar dit is 'n moeilik verkoop as jy wetenskap-billike tegnologie het en nog geen kapitaal nie. So, ons het YC daarvoor gekies onder 'n aantal ander redes en persoonlik was ek baie gelukkig met die ervaring.

Joey Korenman:

Ja, ek sal graag van die ervaring wil hoor, want dit is soort van die goed van legendes. YC is die bekendste opstartversneller ter wêreld en Paul Graham is 'n genie en Paul Graham, vir almal wat luister wat nie daardie naam ken nie, een van die stigters vanYC onder andere en het 'n wonderlike blog met baie wysheid daarop.

Joey Korenman:

Maar ja, so wat doen daardie program nou eintlik vir 'n maatskappy soos joune?

Zack Brown:

Ek moet eers sê dat YC, toe ons deurgegaan het, ons aan die einde van 2017 ingekom het, aan die begin van 2018 ingegaan het, dit is baie anders as wat dit terug was 2005 toe hulle begin het. Toe hulle begin het, is dit regtig soos die legendariese kohorte is toe hulle begin het, die Twitch TV's en Reddits en Air Bnb's en deesdae is dit dit maar opgeskaal.

Zack Brown:

YC beskou hulself ook as 'n begin, en daarom is hul doel om te skaal. En toe ons deurgegaan het, was daar iewers tussen 100 en 200 maatskappye in die bondel teenoor soos 10 of iets in die eerste bondel. Heel anders, heel ander ervaring. Dit gesê, ek het na 'n groot universiteit gegaan en een van die dinge wat ek op universiteit geleer het, soort van die moeilike manier aanvanklik, was dat daar 'n klomp hulpbronne beskikbaar is, maar as jy terugleun in plaas van daarop, as jy leun terug, jy kry nie daardie hulpbronne nie.

Zack Brown:

En iemand anders sal dit kry en jy sal net soort van kus deur. As jy egter uitreik en die hulpbronne gryp ...

Zack Brown:

As jy egter proaktief by 'n groot universiteit en by jou groot Y Combinator uitreik en die hulpbronne aangryp , dan kry jy baie daaruit.En ek dink ek is nou 30 jaar oud. Ek wil iets met my lewe doen, en ek was gelukkig om daardie kennis te hê, dink ek, dat dit beter is om te leun en daardie hulpbronne aan te gryp. En as gevolg daarvan voel ek dat ons baie daaruit gekry het, dinge soos netwerk, mentorskap, net raad oor die hele linie. Ek het oor die netwerk gegaan, maar dit is 'n baie groot deel daarvan. Onder daardie 200 maatskappye kon ons baie bande smee en mense met wie ek vandag nog in kontak bly. En die YC-netwerk is ook, hulle bestuur hierdie interne gemeenskap waar jy na enige ander YC-stigter kan uitreik. Dit lys die e-posadres en telefoonnommer. So as ek wou, kan ek die stigter Dropbox vir Airbnb vermoedelik aanklop as ek 'n goeie rede het om dit te doen. Maar daardie netwerk is 'n groot stuk YC.

Joey Korenman:

O, dis regtig interessant. En daar is 'n paar ooreenkomste. Ek wil nie School of Motion met YC vergelyk nie, maar ons het 'n alumni-netwerk wat eintlik waarskynlik die waardevolste deel van die ervaring van die neem van een van ons klasse geword het. En dit was aanvanklik soort van 'n onverwagse ding, hoe waardevol dit eintlik geblyk het te wees. So dit maak vir my baie sin. Kom ons gaan dus na die werklike toepassing, Animator. En almal wat luister, ons gaan skakel na die webwerf, Haiku se webwerf, en jy kan aflaai. Ek dink daar is tans 'n gratis proeftydperk van 14 dae van Animator, en daar is tutorialeOp die webwerf. Baie wonderlike inligting.

Joey Korenman:

Daar is dus ander animasie-toepassings wat ontwikkel word, en dit lyk of daar in die algemeen baie toepassings ontwikkel word, webtoepassings en ook inheemse toepassings, om te probeer om webontwerp en toepassingsontwerp makliker te maak. So, wat is die unieke ding van Animator?

Zack Brown:

Wat uniek aan Animator is, is die feit dat dit vir kodebasisse bedoel is. Dit is bewegingsontwerp wat na produksie gestuur word. So kode is 'n eersteklas burger, beide binne die toepassing, soos jou bronlêer, as jy dink soos 'n .PSD vir Photoshop, soos daardie soort bronlêer. Die bronlêer vir Animator is reguit kode, handbewerkbare kode. So elke keer as jy iets op die verhoog rondskuif of 'n Tween opstel, lees en skryf dit eintlik kode terwyl dit dit doen. En dit is baie doelbewus sodat dit baie maklik is om met kodebasisse te integreer.

Joey Korenman:

So laat ek jou dit vra. Want, en ek is nie baie gesofistikeerd hieroor nie, so vergewe my as ek dit afslaan, maar in After Effects het ons Bodymovin, wat jou After Effects-komp neem, en daar is baie waarskuwings wanneer jy dit gebruik, maar oor die algemeen, as jy vormlae en sulke dinge gebruik, spoeg dit 'n JSON-lêer uit. So dit spoeg kode uit. So hoe is dit anders as wat Bodymovin doen?

Zack Brown:

Ja. So ek onthou toe Lottie terug uitgekom het in 2017. Ditwas toe ons reeds soort van gesluit en gelaai het op die bewegingsontwerptrajek vir Haiku, destyds Haiku vir Mac, nou Haiku Animator. Ek het dit nog altyd baie inspirerend gevind. Ek het 'n paar persoonlike bedenkings oor After Effects, soos jy jou dalk kan voorstel, veral as 'n hulpmiddel vir UI's, vir sagteware. Bodymovin en Lottie is ontwerp rondom, gebou rondom reverse engineering van die After Effects-bronlêer. So daardie JSON-blob wat jy uit Bodymovin kry, is die vorm van die After Effects-lêerformaat.

Zack Brown:

Persoonlik, wanneer ek my voorstel vir bewegingsontwerp vir sagteware, soos jy reeds genoem het, Joey, interaktiwiteit is van kritieke belang, soos die vermoë om kleure te verander of te reageer op tik, of om van hierdie toestand na daardie toestand oor te gaan op 'n ander manier as om van daardie toestand na die daaropvolgende toestand oor te skakel. Alhoewel dit logika vereis. In rekenaarwetenskap-y terme vereis dit volledige volledigheid. En jy kan dit eenvoudig nie van After Effects kry nie.

Joey Korenman:

Reg.

Zack Brown:

Reg. So dit is die grootste verskil, ek dink beide die voorreg en die ongelooflike las is om die outeursinstrument van nuuts af te bou, die After Effects-vervanging, as jy wil. Dit het ons in staat gestel om 'n kode-formaat te ontwerp wat bedoel was vir kode in plaas daarvan om dit opnuut aan te pas.

Joey Korenman:

Dit is 'n baie goeie verduideliking. En nadat u Animator a gebruik het1 Augustus 2019 ! Klik net op die skakels hieronder om die afslag te eis. Hier is twee verskillende opsies:

  • 50% afslag vir drie maande van 'n maandelikse plan (Spaar $27)
  • 25% afslag op die eerste jaar van 'n jaarlikse plan  (Spaar $45)

Nou dat jou nuuskierigheid 'n hoogtepunt bereik het, kom ons sê hallo vir Zack...


ZACK BROWN WYS NOTAS

Ons neem verwysings van ons poduitsending en voeg skakels hier by, wat jou help om op die poduitsending-ervaring gefokus te bly.

  • Zack Brown
  • Haiku Animator

MENSE/STUDIOS

  • Thomasstraat
  • Paul Graham

BRONNE

  • Skets
  • Y Combinator
  • Inspector Spacetime
  • Lottie Podcast Episode
  • Unity
  • Issara Willenskomer Podcast Episode
  • Lottie

DIVERSE

  • Dreamweaver
  • Vuurwerke
  • Skud

ZACK BRUIN TRANSKRIPT

Joey Korenman:

Ek moet iets bely. Ek stel regtig belang in wat in die UI en UX-ruimte aangaan met betrekking tot bewegingsontwerp. Dit is 'n gebied wat blykbaar ontplof met oulike projekte, werksgeleenthede en nuwe tegnologie wat dit makliker maak om animasie in kode te vertaal. Vanaf hierdie opname in 2019 is dit egter nogal 'n pyn in die boude om animasie te skep wat maklik op 'n interaktiewe manier binne toepassings bruikbaar is.

Joey Korenman:

Ons gas vandag poog om dit te verander. Zack Brown, en jabietjie, dit herinner my baie aan die manier waarop Flash werk. En dit is regtig interessant. Ek merk op jy gebruik dieselfde terminologie wat Flash gebruik het, Tween en stage en sulke dinge. In After Effects is daar soort van verskillende woorde wat ons gebruik. Maar jy het in wese 'n komp, en jy het lae, en jy kan stukkies kode op daardie lae plaas wat veroorsaak dat hulle op sekere dinge reageer en op die uitleg reageer, en jy kan responsiewe dinge opstel. En dit is regtig baie cool. So wat is 'n paar van die ... miskien kan jy vir ons 'n paar voorbeelde gee van hoe jy 'n instrument soos Animator kan gebruik om dinge te doen wat moeilik is om op ander maniere te doen.

Zack Brown:

Weereens, gebaseer op die uitgangspunt dat Animator se doel is om daardie gaping tussen bewegingsontwerp en kode te oorbrug, is die werklike krag wat jy by jou vingers het, kode, soos die magie van kode. En dus het Animator 'n paar maniere waarop jy binne die toepassing kan kodeer. Dit is ook 'n fundamentele verskil teenoor After Effects. En daar is drie maniere waarop jy kan kodeer. Ons het hierdie konstrukte genoem uitdrukkings, wat baie soos After Effects se uitdrukkings met 'n kinkel is. Dit is in wese Excel-sigbladfunksies. So op dieselfde manier wat jy 'n som van selle A3 tot A14 in Excel kan neem net deur gelyk te skryf aan som [onhoorbaar 00:27:15], daardie mooi klein uitdrukking, kan jy dieselfde ding doen in Animator, maar reageer op, vir byvoorbeeld die posisie van die muisof 'n aanraking, 'n tik. Maak dit sin?

Joey Korenman:

Ja, dit maak baie sin.

Zack Brown:

Goed. En dan andersom, so dit is bedoel om eenvoudig te wees, maar ook baie kragtig. Dit kanaliseer funksionele, reaktiewe programmering. En jy kan daardie uitdrukkings in enige eiendom toepas. So ek kan posisie X van een van my elemente laat kaart na gebruiker muis X, en ek kan posisie Y kaart maak na gebruiker muis Y, en ek kan skaal maak soos 'n sinus funksie van sê, my tydlyn posisie en gebruiker muis Y, as dit sin maak. So jy kan begin om hierdie te skep, baie maklik om te skryf, maar baie kragtige soorte interaksies. En vir seker, daardie soort kreatiewe bemagtiging is waarin Flash werklik, regtig uitgeblink het, en wat die wêreld ontbreek, nie waar nie?

Joey Korenman:

Ja. En watter taal gebruik jy wanneer jy binne-in Animator kodeer?

Zack Brown:

JavaScript.

Joey Korenman:

O, perfek. Goed, so as jy gewoond is aan After Effects-uitdrukkings, is ek seker dele daarvan is identies. En ek neem aan dat daar 'n paar persoonlike dinge is wat julle uitgebrei het na JavaScript om Animator-spesifieke kenmerke by te voeg?

Zack Brown:

Presies, ja.

Joey Korenman:

Ek probeer aan 'n algemene gebruiksgeval hiervoor dink. So byvoorbeeld, as jy 'n gedrag op jou webwerf wil hê dat daar 'n karakter is, en jy wil hê dat die leerlinge op die oë jou moet volg,soos volg die muis rond. Jy kan dit in After Effects bespot, en dan sal 'n ingenieur moet uitvind hoe om dit te doen. Maar in Animator, kan jy eintlik net daardie gedrag bou en dit dan oorgee?

Zack Brown:

Ja, presies. Die weergawe-enjin wat in Animator gebruik word, is eerstens oopbron, en tweedens is dit presies dieselfde weergawe-enjin wat gebruik word wanneer jy dit op die web laat loop, presies dieselfde ding. So voorskou-modus is letterlik voorskou-modus. Dit is dieselfde ding. En dit kom daarop neer dat die bronlêer kode is. Wanneer jy 'n uitdrukking skryf, sal wat jy ook al skryf, op presies dieselfde manier binne Haiku Animator geëvalueer word as wat dit op die webwerf sal wees.

Joey Korenman:

Ek bedoel, so dit is een van die grootste verskille tussen Animator en ander toepassings soos daardie en After Effects, is dat jy in After Effects die luukse het, jy kan animeer wat jy wil en dit sal moet weergee, maar die persoon wat dit gaan sien, doen nie moet kyk hoe dit weergegee word. Wanneer jy dit regstreeks doen soos dit op die web of in 'n toepassing gebeur, is dit regstreeks. So ek is nuuskierig, hoe hanteer jy dit, net in die algemeen dink ek, selfs as 'n app-ontwikkelaar, hoe hanteer jy die feit dat jou gebruikers dalk dinge wil animeer wat nie werklik in reële tyd kan gebeur nie? Is dit 'n probleem?

Zack Brown:

Ja. Vir seker is dit. Wat jy skepwanneer jy iets skep in Haiku Animator is sagteware. Punt, wat jy skep, is sagteware. En jy doen dit deur 'n kombinasie van visuele gereedskap, en as jy wil, kode. Maar die eindresultaat is sagteware. Nou, wanneer jy sagteware skep, is prestasie een van die inherente bekommernisse waarvan jy bewus moet wees. En as 'n ontwikkelaar 'n for-lus gaan skryf wat skyf AIO so sluit dat 'n rekenaar vries, is dit iets wat 'n programmeerder tydens toetsing moet uitvind en moet regmaak sodat daar nie 'n groot perf-fout in hul sagteware is nie. Presies dieselfde met Haiku Animator. Jy kan gaan animeer 5 000 kolletjies net bons, en jy sal sien dat dit stadiger word. En as 'n skepper van sagteware is dit jou verantwoordelikheid om seker te maak dit werk reg.

Joey Korenman:

Ja. Dit is iets waaraan jy regtig nooit hoef te dink nie. Ek bedoel jy moet daaraan dink aan die voorkant wanneer jy goed in After Effects bou, gaan dit te lank neem om te lewer, maar sodra dit weergegee is, is dit klaar. Dit is 'n totaal ander manier om te dink. Dit is regtig soort van interessant.

Zack Brown:

Nou gesê, Lottie doen dit, Bodymovin erf daardie selfde bekommernis omdat dit tydens die looptyd geïnterpreteer word. So as jy 1 000 kolletjies het wat in After Effects bons, sal dit ook in Bodymovin kruip.

Joey Korenman:

Reg. Ja, dit is regtig baie interessant. Goed. So ek isprobeer om met 'n ander voorbeeld vorendag te kom. En een van die dinge wat ek onthou dat ek in Flash gedoen het, was dat jy hierdie uitgebreide oorrol-toestande kan hê. Soos kom ons sê, so ons doen hierdie ontwerpverfrissing op die oomblik op School of Motion, en ek weet nie wanneer hierdie episode sal uitkom nie, maar as jy daarna luister, is dit dalk reeds op die webwerf , of jy sal begin sien hoe dit uitvloei. Maar kom ons sê dat ons besig was om die manier waarop ons duimnaels lyk op ons webwerf wat ons blogplasings en tutoriale en poduitsendings wys, oor te doen.

Joey Korenman:

So kom ons sê dat ons wil hê een of ander uitgebreide rollover-toestand, waar jy dit oorrol, en die titel van die ding groei 'n bietjie, en dan skaal die beeld self op binne die grense van die duimnael, en dan verander hierdie gradiënt-oorleg, die ondeursigtigheid daarvan. En dan wanneer jy oorbeweeg, iets effens ... as jy afskuif, verskoon my, iets effens anders gebeur. Die manier waarop ek van plan was om dit te doen, was om dit in After Effects te prototipeer, en dit dan net aan die ontwikkelaars oor te dra, miskien iets soos Inspector Spacetime te gebruik sodat hulle my verligtingskrommes en sulke dinge het, en dan sal hulle moet implementeer dit. So as ek besluit om dit in Animator te doen, hoe sou die werkvloei lyk? Hoe sal ek my kunswerk inbring, en is die gereedskap daar om dit soort van te doen en dit te laat werk?

ZackBrown:

Ja, beslis. Nou gaan dit 'n paar kode vereis om dit wat jy beskryf het, af te haal. En ons oortuiging is dat dit moet. Om regtig daardie onbeperkte ekspressiwiteit te kry wat jy wil hê, wel wanneer ek hierheen beweeg, moet dit gebeur. Weereens, miskien is ek 'n ou skool, miskien is ek net 'n curmudgeon, maar uit al my rekenaarwetenskaplike begrip en wat nog, glo ek dat kode nie verdwyn nie.

Joey Korenman:

Ek stem saam met jou.

Zack Brown:

En die manier waarop jy dit in Haiku Animator kan doen, is dat jy een tydlyn gebruik. Dit is baie soos Flash. Jy gebruik een tydlyn, jy het verskillende streke wat die verskillende aksies het. Rame een tot 80 kan dus jou muis oor wees, en rame 81 tot 120 sal jou muis uit wees. Ons volg 'n komponentmodel met Haiku Animator, so wat jy skep, word toegedraai as 'n komponent, eersteklas ondersteuning vir React en Angular en View. Hopelik gebruik jy een van daardie op jou-

Joey Korenman:

We're using React, yeah.

Zack Brown:

Okay . Ons ondersteun ook vanielje JavaScript as jy as't ware net by die metaal wil uitkom. En so sal jy 'n React-komponent uit Haiku Animator kry wat jou 'n verwysing gee na die Haiku Animator API waar jy, vanaf React-land, sê op muis oor, op 'n React muis oor, die tydlyn van nul tot 80 kan skrop, of gaan na en speel raam nul, of gaan na en speel raam 81. So dieontwikkelaar is eintlik die een wat aan die einde van die dag die toutjies trek, maar jy stel as 't ware die verhoog met Animator.

Joey Korenman:

Dit is super cool. Goed, so dit kan regtig in die onkruid kom hier, luisteraar, so ek vra om verskoning, maar ek is baie nuuskierig hieroor, en ek wil dit regtig verstaan. So dit maak vir my volkome sin, en as iemand wat luister Flash gebruik het, is dit presies wat jy sal doen. Jy sou sê op muis oor, gaan na raam 20 en speel tot raam 40, met muisverlof of wat dit ook al was. En jy het basies al jou animasies op 'n tydlyn gehad en jy speel verskillende raamreekse. Nou, my vraag is, en terloops, ek gaan my ontwikkelaars hierna laat luister, want hulle gaan dit baie beter as ek verstaan, en hulle gaan baie oulike idees kry.

Joey Korenman:

Maar nou hier is die vraag wat ek het, Zack. So as ek 'n komponent van ontwikkel, is dit hoe 'n duimnael lyk en hoe jy dit weet. En ek neem aan dat visuele ontwikkeling in iets soos Skets sal plaasvind. En dan bring ons dit in Animator, ek sal animeer soos ek wil hê daardie komponent moet optree met die muis oor, en miskien gebeur iets anders met die klik. Maar dan moet die werklike kunswerk wat in daardie kleinkiekie vertoon word, dinamies wees, nie waar nie? So skep dit nie steeds hierdie kwessie van soos nie, wel, die ontwikkelaar moet nog in duikdaardie kode en spaghetti monster dit uitmekaar sodat hulle die regte duimnael op die regte plek kan insit, of is daar ook 'n beter manier om dit te doen en daardie proses makliker te maak?

Zack Brown:

Ja. Goed. So leer ek weer uit Flash, ek voel 'n bietjie soos 'n gebroke rekord, maar een van die dinge wat Flash verkeerd gedoen het, was, dit was 'n soort swart boks, hierdie doodloopstraat, waar as jy eers Flash op het, sê jou webwerf, jy kom nooit weer uit nie. Daardie boks pixels behoort aan Flash, en God spoed as jy enigiets daar wil probeer verander. Jy moet die Flash IDE oopmaak en 'n paar veranderinge maak en 'n bietjie logika byvoeg, en met hul API worstel om data deur te stuur, ensovoorts, en dit was 'n groot gemors.

Zack Brown:

In Haiku Animator het ons 'n idee van 'n plekhouer waar wanneer jy skryf, kan jy sê, hier is 'n reghoek binne-in hierdie super reghoek wat ek in Haiku Animator skep. Hierdie reghoek behoort aan die ontwikkelaar. Ek het geen idee wat hier gaan ingaan nie, maar ek kan dit animeer. Hulle word affiene transformasies genoem, skaal, posisie, roteer, skeef, al daardie transformasies. Jy kan daardie plekhouer animeer en dan op kodetyd kan die ontwikkelaar die inhoud deurgee. So in React sal dit soos 'n kinderkomponent lyk, of in HTML, is dit iets binne 'n div. Dit is ons oplossing vir dinamiese inhoud in Haiku Animator, en hoe dit vir die eindontwikkelaar lyk, isreguit Reageer. Daar is geen salto's of iets besonders nie. Jy gee net inhoud in as 'n kind van die Haiku React-komponent.

Joey Korenman:

Dit is super cool. Goed. So een van die dinge wat ek gelees het in soort van die dokumentasie en dinge, is dat ... want ons het 'n bietjie hiervan op ons webwerf gedoen. Ons het animasies wat min of meer net ingebak is. Maar dan het ons sekere klein animasies wanneer jy oor iets beweeg wat ons soort van prototipe gemaak het, en sulke dinge. En die probleem is dan, as ons besluit om dit te verander, is dit nogal 'n groot probleem om terug te gaan en dit reg te stel. Dit is nie soos kopieer, plak nie, nou is dit opgedateer. So hoe hanteer jy dit, en ek weet nie of ek hierdie term korrek gebruik nie, maar weergawebeheer, wanneer jy 'n nuwe weergawe van die muis oor toestand van ons duimnaels het? Is daar 'n eenvoudiger manier om dit te implementeer noudat julle vorendag gekom het?

Zack Brown:

Ja, in werklikheid. Dit was een van die kern ... weereens, om terug te gaan na my agentskapdae, en te sien hoe moeilik dit is om nie net ontwerp te implementeer om te kodeer nie, maar dan om te herhaal. Dit is waarskynlik waar 80% van die poging is om te herhaal. Nou het jy hierdie ontwerp as kode geïmplementeer, nou is daar 'n nuwe ontwerp wat eintlik die vereistes 'n bietjie verander, en nou moet wat ook al in kode gebou is, oorgedoen word. Nou is hierdie ander stuk gebreek. Al die probleme wat uitspoeliterasie, dit is waar werkvloei opgelos word, ek dink dit is die heilige graal vir die oplossing van werkvloei.

Zack Brown:

En ons siening daaroor met Haiku Animator is weer, gebaseer op die komponentmodel, jou komponente is weergawe. So as jy 'n projek in Haiku Animator skep en jy druk die publiseer-knoppie, kry jy weergawe 0.0.1 van daardie komponent, en jy kan dit in 'n kodebasis laat val. Ons integreer met NPM vir die wêreldwebwereld, vir enige ontwikkelaars in die webwêreld om daarmee vertroud te wees. So jy installeer eintlik net NPM daardie Haiku Animator-komponent by weergawe 0.0.1, en jy is goed om te gaan.

Zack Brown:

Nou, die animeerder, bewegingsontwerper of ontwikkelaar, wie ook al Haiku Animator gebruik, kan teruggaan en daaropvolgende veranderinge maak, die bates vanaf Sketch opdateer, byvoorbeeld, wat sal deurspoel na Haiku Animator, en weer publiseer, en nou het jy weergawe 0.0.2. En al wat jy van kode af moet doen, is om daardie komponent op te dateer na weergawe 0.0.2 en jy is lewendig. Dis dit. So dit is hoe ons daardie iterasieprobleem opgelos het, is deur staat te maak op 'n kombinasie van weergawebeheer en pakketbestuurders. Dit is alles redelik tegnies, en 'n lekker manier om dit op te som is, ons integreer met dev-nutsgoed op dieselfde manier as wat ons integreer met ontwerpnutsgoed, soos Sketch en Photoshop, Illustrator.

Joey Korenman:

So as ek dit reg verstaan, bedoel ek dit werk baie soos Flash gedoen het, dit is net sodit is sy regte naam, is die uitvoerende hoof en stigter van 'n beginonderneming genaamd Haiku. Nadat hulle deur die legendariese Y Combinator-program gegaan het, het Zack en sy span "Animator" bekendgestel, 'n toepassing wat die beskeie doel het om ontwerp en kode te verenig. Nogal verhewe goed, maar ek glo dat Haiku regtig iets doen.

Joey Korenman:

Die Haiku-span het 'n manier uitgedink om animasie te ontplooi wat dalk net een van die moeilikste probleme kan oplos bewegingsontwerpers in die gesig staar wanneer hulle aan programme werk. Animator, waarmee ek rondgespeel het en ek liefhet, laat ons jou animeer en kodeer in een koppelvlak wat dan daardie animasie op 'n baie gladde en buigsame manier vir ontwikkelaars kan ontplooi. In hierdie onderhoud gaan ons diep in op hoe animator werk en wat dit anders en meer doeltreffend in die UI-ruimte maak as byvoorbeeld After Effects.

Joey Korenman:

Ons praat ook oor hoe Zack het die maatskappy begin en 'n splinternuwe animasie-app heeltemal van nuuts af gebou. Dit is 'n baie oulike gesprek en ek dink dit sal jou 'n voorsmakie gee van die soort gereedskap wat ons bewegingsontwerpers in die nabye toekoms gaan gebruik.

Joey Korenman:

Zack , dit is wonderlik om jou op die School of Motion-podcast te hê. Baie dankie dat jy tyd geneem het en ek kan nie wag om jou brein te kies nie.

Zack Brown:

Ja, dit is my plesier om hier te wees, Joey. Dankie dat jy my aan het.

Joey Korenman:

Ja, geen probleem nie, man. Wel, eersmakliker om werklik te implementeer en op te dateer en te gebruik oor 'n hele toepassing en 'n hele platform. So ek is eintlik baie opgewonde om weer daarmee te gaan speel, want dit is regtig, soos ek gesê het, perfekte tydsberekening vir ons. En ek is baie opgewonde, ek hoop regtig baie van julle luister na hierdie gaan laai die 14 dae demo af. As jy hierdie soort werk doen, probeer hierdie toepassing, want dit sal baie, baie gaaf wees om te sien waarmee sommige werklik goeie bewegingsontwerpers vorendag kan kom. En ek wou jou hieroor vra, want ek het al meer en meer gesprekke soos hierdie gehad.

Joey Korenman:

Dit is amper asof hierdie twee wêrelde begin saamsmelt. Jy het bewegingsontwerp en jy het UX. En hulle beweeg albei na mekaar toe, en nou is daar genoeg oorvleueling waar gereedskap soos hierdie lewensvatbaar begin word. En jy lyk soort van uniek, want jy het hier by die kruising gekom. Jy het hierdie dinge vir kliënte prototipeer en geïmplementeer. So is jy 'n animeerder? Hoe het jy geweet watter gereedskap om in Animator te plaas? Omdat ek dit die eerste keer oopgemaak het en niks daarvan geweet het nie, en daar is sleutelrame en daar is 'n grafiekredigeerder, soos 'n animasiekurwe-redigeerder, wat eintlik baie lekker is om te gebruik, en 'n laaggebaseerde samestellingstelsel, en dit alles net soort van sin gemaak het. So hoe het jy besluit watter kenmerke om in te sit?

Zack Brown:

So ek sou sê ek is 'n animeerder deuromstandighede.

Joey Korenman:

Ek is mal daaroor.

Zack Brown:

Beslis nie 'n goeie een nie. Ek het wel 'n bietjie ervaring gehad toe ek jonger was, daardie F-woord weer, Flash. En so die idee van sleutelrame en tydlyne, een keer [onhoorbaar 00:42:03] deur my-

Zack Brown:

Die idee van sleutelrame en tydlyne. Jy weet, een keer [onhoorbaar 00:42:04] in my jong gedagtes het soort van my vasgesteek in my volwasse gedagtes. Die kort antwoord is gebruikers, ons gebruikers is die kundiges en jy weet, dit is algemene wysheid in die produkskeppingswêreld om uit te vind wat jou gebruikers wil hê en jy bou dit. So, die Curve-redakteur byvoorbeeld, ons het dit onlangs bekendgestel. Die produk bestaan ​​sedert 2006 en 2019 was toe ons uiteindelik die Curve-redigeerder bekendgestel het nadat ons deur gebruikers versoek, versoek, versoek het. Maskering is 'n kenmerk wat ons nie tans ondersteun nie, waarvoor mense geskreeu het. So, ek verwag dit sal binne te lank kom.

Zack Brown:

Dit is hoe ons dit ontdek. Die kenners vertel ons en ons neem dit van daar af.

Joey Korenman:

Regtig want ek bedoel daar is baie dinge wat After Effects-gebruikers spesifiek heeltyd doen. Jy weet, gebruik een laag as 'n masker vir 'n ander, met paaie wat 'n lyn het, soort van animasie langs die pad. Om sulke dinge te doen was ... Eerlik gesê, selfs die gereedskap in After Effects om sommige van daardie dinge te doen is baie oud en kan 'n bietjie vanopdatering, en dit is nogal netjies om te sien hier is 'n soort geleentheid om met gebruikers te praat en uit te vind presies wat hul lewens makliker gaan maak.

Joey Korenman:

So watter soort vind u gebruikers wat eintlik met Animator werk? Is dit bewegingsontwerpers, of is dit UX-ontwerpers wat animasie benodig?

Zack Brown:

Dit is albei. Dus, soos Sketch meer toeganklik is as Photoshop of Illustrator, het ons gevind dat daar 'n hele segment gebruikers is wat bewegingsontwerp leer, miskien vir die eerste keer 'n sleutelraamtydlynparadigma gebruik, en hulle is weg na die resies met Haiku Animator. Soos ons die toepassing ontwikkel het, het ons ook dokumentasie soos 'n hulpsentrum ontwikkel, allerhande goed. So ons het tutoriale. Ons het dus goeie hulpbronne vir mense wat vir die eerste keer begin om bewegingsontwerp te doen.

Zack Brown:

Ons sien ook ervare bewegingsontwerpers wat die waarde-stut van skip na produksie waardeer. Of die waardestut van, "Voeg 'n bietjie kode by." Iets wat jy nie in After Effects kan doen nie. Jy weet, fundamenteel is dit 'n unieke plek in die mark vir hierdie oplossing, en dit gaan alles terug na die vakuum van Flash.

Zack Brown:

So ja, en dan is die ander deel van daardie vraag maatskappye van alle vorms en groottes van Fortune 5s tot agentskappe en vryskutters, en ook sien ons ontwikkelaars wat dit gebruikook. Of soos voorkant soort eenhoornigheid ... Eenhorings kry vir seker die meeste daaruit, want hulle het die volle reeks ontwerpkenmerke en die volle reeks kodekenmerke, maar eintlik gebruik alle strepe dit.

Joey Korenman:

Ek wou jou vra, want baie van ons luisteraars en ons studente is eerstens bewegingsontwerpers, en sommige van hulle begin net met After Effects Expressions ploeter. En daarom was ek net nuuskierig of jy enige idee gekry het van hoe die leerkurwe is vir animeerders om Animator, Haiku Animator te begin gebruik. Ek gaan Haiku Animator begin sê om dit makliker te maak.

Zack Brown:

Dis goed, ja.

Joey Korenman:

Ja, hoe is die leerkurwe vir animeerders wat dit gebruik. Hoeveel kode gaan hulle nodig hê om te leer? En wat moet die leerkurwe-verwagting wees?

Zack Brown:

Goed so ek sal aanbeveel om met Expressions te begin. As jy ooit Excel of Google Blaaie gebruik het, dan het jy waarskynlik 'n sigbladformule gebruik, en jy is voorbereid vir Haiku Animator. Soos om iets te laat volg die muis is net so maklik soos om 'n som in Excel te neem, en dit is baie bevredigend wanneer jy dit doen. Baie, dink ek, dit is 'n afgesaagde woord, maar dit is baie bemagtigend om te sien dat dit gebeur.

Zack Brown:

Ek sou sê as jy 'n bewegingsontwerper is wat met kode wil begin, dit is die perfekte hulpmiddel virjy. Dit is grootliks hoekom ons dit gebou het. Weereens, om daardie gaping tussen bewegingsontwerp en kode te oorbrug. So tussen die hulpbronne wat ons beskikbaar het en die koderedigeerder wat in die toepassing ingebou is, behoort dit 'n goeie manier te wees om te begin.

Joey Korenman:

Dis uitstekend. So kom ons praat oor soort van die algemene toestand van hierdie ding wat ons noem ... ek weet nie eers wat dit genoem word nie. Die kruising van UX en bewegingsontwerp. So jy weet, Animator los 'n paar pynpunte op wat jare lank aangehou het. Ek onthou eintlik 'n baie episode van hierdie poduitsending, ons het Salih en Brandon van Airbnb gehad wat twee van die ouens in die span was wat  Lottie gebou het.

Zack Brown:

Ja, ek is mal daaroor ouens.

Joey Korenman:

Ja, hulle is fantasties. En jy weet, hulle was regtig instrumenteel om my te laat verstaan ​​wat hierdie pynpunte is, en ek het gedink Lottie kom saam en gaan hulle almal oplos, maar elke keer as ek met iemand praat, is hulle soos, "Nee, hulle" is nog nie opgelos nie." Dit is steeds baie pynlik om bewegingsontwerp te neem en dit in kode te verander.

Joey Korenman:

En die manier waarop animators dit aanpak, lyk regtig baie slim, en ek dink beslis jy is op iets, maar wat is 'n paar ander dinge wat aangespreek sal moet word om hierdie proses werklik vaartbelyn en doeltreffend te maak? Jy weet, ek bedoel, want dit is net die wêreld van kodering en die wêreld van bewegingsontwerp, hulle isnou redelik apart. En selfs 'n take soos Animator, jy weet, jy gaan steeds 'n ontwikkelaar vereis om dit te implementeer, reg? Soos, jy kan 'n komponent bou, maar dan sal daardie selfde persoon daardie komponent kan implementeer? Is dit selfs iets waarna ons moet mik? So ek is nuuskierig wat jou siening is oor wat ander dinge is wat oor die volgende paar jaar kan verander om hierdie proses nog beter te maak?

Zack Brown:

As ons praat op die skaal van etlike jare, dink ek baie mense raak vasgevang oor wat ontwerpers oor x jaar gaan doen, of wat ontwikkelaars oor x jaar gaan doen. Op grond hiervan dink ek dat dit 'n misleidende idee is dat dit oor 'n paar jaar dieselfde gaan beteken. Daardie ontwikkelaar beteken vandag dieselfde as wat hy oor 'n paar jaar doen, nie waar nie?

Zack Brown:

Dit is hoekom ek daarvan hou om te dink aan ... Ek het vroeër 'n paar minute gelede genoem wat jy met Haiku Animator se skepsagteware doen. Ons gee nie om of jy 'n ontwikkelaar is nie. Ons gee nie om of jy 'n ontwerper is nie. Jy skep sagteware. Dis dit. So my siening is dat dit oor 'n paar jaar nie regtig saak maak wat jou titel is nie, maar ons sal almal saam sagteware bou. En ek wil graag wys na waar dit al gebeur het in 'n parallelle bedryf, in die wildbedryf.

Zack Brown:

Enigiemand wat Unity 3D gebruik het, enigiemand wat by daardie ekosisteem betrokke was, jy isbou speletjies. Jy bou sagteware. En as jy Photoshop gebruik om jou teksture te skep, wat op die 3D-modelle binne Unity gekarteer sal word, skep jy eintlik sagteware deur Photoshop. Jy kan teruggaan en daardie tekstuur verander en dit spoel deur na die sagteware, en dit word na produksie gestuur.

Zack Brown:

Unity het die werkvloeiprobleem tussen werklike bewegingsontwerpers gekraak ... Daar is 'n tydlyn en sleutelraam-animasiestelsel binne Unity, tekstuurredigeerders, riggers, 3D-modelleerders en ontwikkelaars. Hulle bou almal dieselfde ding in Unity. En dit is dus wat ek dink die toekoms is van die skep van sagteware as 't ware, en dit is ons standpunt. Dit is ons speelgrond, dit is ons wêreld is die wêreld van die skep van sagteware. Maak nie regtig saak wat jou titel is of selfs wat jou agtergrond is nie, maar as ons ons werk reg doen deur werkvloeie te verenig, sal ons almal saam sagteware bou.

Joey Korenman:

Dis nogal mooi. Ek het 'n bietjie tranerige oë, man. Dit was regtig welsprekend.

Joey Korenman:

Goed so ek het met Issara Willenskomer hieroor gepraat van UX in Motion, en tans is dit steeds die wilde weste in terme van die gereedskap wat mense gebruik om animasie uit te voer in 'n app. En daar is 'n miljoen verskillende maniere om dit te doen, en die model wat Animator gebruik los dit miskien op, maar is daar enige soort standaardisering aan die gang? En weereens, dit is nie myne niekundigheid, maar van wat ek verstaan, skop Animator kode uit, dit wil sê ... dit is in wese soos 'n reaksie-komponent wat is, vergewe my as ek my misgis, maar dit is gebaseer op javascript, reg? Dit is 'n soort geur daarvan, reg?

Zack Brown:

Ja, ja.

Joey Korenman:

Ok cool. So dan, sal dit werk met ... en dus as jy 'n webwerf of 'n toepassing bou wat daarop gebaseer is, is dit wonderlik, maar wat as jy nie is nie? Wat as jy gebruik ... Ek wens ek het 'n rolodex van koderingstale gehad. Wat as jy Ruby of so iets gebruik? Moet daar meer standaardisering wees, dink ek is wat ek bedoel? In die algemeen, vir hierdie probleem om weg te gaan, is dit steeds 'n probleem?

Zack Brown:

Absoluut, ja. As ons oor werkvloei praat, is standaardisering waar dit is. Dis hoekom Unity daarin geslaag het, is omdat hulle 'n standaard geword het. Die helfte van alle speletjies, die helfte. Letterlik een uit twee speletjies vir enige platform is gebou op Unity. Grootliks omdat dit 'n standaard bereik het.

Zack Brown:

Daar is 'n paar standaarde wat saamsmelt. Lottie is 'n goeie voorbeeld in die bewegingsontwerpruimte. En weet jy, ek het 'n paar bedenkings genoem oor die tegniese kern van Lottie, naamlik dat dit 'n baie, baie steil pad is om Lottie interaktief te maak. Baie moeilik. Net as gevolg van sy kernformaat.

Zack Brown:

Wat Lottie baie goed gedoen het, is om mindshare en'n standaard geword en dit was 'n groot stap vorentoe vir bewegingsontwerp as 'n gemeenskap, as 'n wêreld. So Lottie het 'n standaard geword. Ons het redelik vinnig op daardie trein gespring. Haiku Animator was die heel eerste instrument op die mark, buite After Effects, om Lottie-uitvoer te ondersteun. So weereens, in ons missie om werkvloei bymekaar te bring, was ons deeglik bewus daarvan, van daardie opkomende standaard.

Zack Brown:

Maar ek bedoel, ons kan aan animasies dink aangesien dit op 'n paar verskillende maniere met sagteware verband hou. Een van hulle is die atomiese klein boksie, soos 'n .gif of 'n video of 'n Bodymovin-animasie wat goed is vir 'n laaidraaier of 'n element binne-in 'n knoppie wat wanneer jy op die knoppie klik, weer begin, soos 'n laaidraaier. Dit begin draai.

Joey Korenman:

Reg.

Zack Brown:

Jy weet, jy maak die Airbnb-toepassing oop, die huis van Lottie. Jy maak die Airbnb-toepassing oop, en jy kry hierdie lekker dansende, [onhoorbare 00:52:57] Airbnb-logo. Bietjie iets soos ... So dit is een manifestasie van beweging in sagteware. Die ander een is groter skaal soos uitleg-animasie.

Joey Korenman:

Reg.

Zack Brown:

Daardie standaardisering het nie plaasgevind nie. Dit is pure wilde weste. Soos anderkant die wilde weste. Die enigste manier waarop jy daardie soort animasie doen, is tans met kode, en baie van daardie probleemspasie is die feit dat die implementering van 'n uitleg-animasie in die web baieanders as om dit vir iOS te doen. Dit is baie anders as om dit vir Android te doen. Dit is baie anders as om dit vir Samsung-slim-TV te doen. Dit is dus 'n groot, lelike, uitdagende probleem.

Zack Brown:

Sonder om te veel weg te gee, werk die Haiku-span aan iets in hierdie ruimte. Maar ek dink dit is die moeite werd om daardie onderskeid tussen daardie twee soorte beweging in sagteware te identifiseer.

Joey Korenman:

Reg. En laat ek jou dit vra, want dit het eintlik net vanoggend opgekom, en ek dink daar is nog baie verwarring oor wat Lottie is. Ek dink aan die ontwikkelingskant is dit baie meer verstaanbaar as aan die bewegingsontwerpkant. Iemand in ons Slack-kanaal het vanoggend gesê: "O kyk, Airbnb maak 'n animasie-app." En ek was soos nee, dit is nie wat dit is nie.

Joey Korenman:

So van wat ek verstaan, vertaal Lottie in wese wat Bodymovin en ook watter animator. Jy weet, die kode wat dit uitspoeg, dit vertaal dit na iOS of Android. Daardie tale. So dit klink of wat regtig moet gebeur om dit universeel en maklik te maak, is dat daar, dink ek, soort van 'n universele vertaler moet wees, jy weet, en is dit iets wat jy dink 'n maatskappy soos Haiku behoort aan te neem, of is wat 'n veel meer universele poging van Apple en Google en Samsung gaan verg om 'n manier te skep vir 'n universele formaat?

Zack Brown:

So eerstens,ding wat ek jou moet vra oor die naam. Ek het ons School of Motion-span gevra, ek het gesê: "Haai, Zack Brown van Haiku kom aan," en al wat hulle wou weet, was hoe dit is om 'n country-musiekster te wees, so kry jy dit baie? Weet jy wie die Zac Brown Band is?

Zack Brown:

Ja, dit is baie werk as 'n bekende musikant terwyl jy 'n opstart, maar op een of ander manier trek ek deur en maak dit alles gebeur.

Joey Korenman:

Daai ou kastaiing.

Zack Brown:

Maar dit was inderdaad 'n insleepvoertuigbestuurder wat my die eerste keer in Zac Brown ingelei het en hy is asof ek jou handtekening nodig het en o, Zac Brown, ek het jou handtekening nodig. Ek het dit gemaak, ek dink ek was destyds 20, ek het dit 20 jaar van my lewe gemaak om Zack Brown te wees en daarna moet jy altyd op die "het jy bedoel Zac Brown Band?"

Joey Korenman:

Presies, ja. Ek dink nie hy het 'n K nie, so jy kan maar sê ek is Zack met K. Dit sal dinge opklaar. O, dis regtig snaaks. Almal wat hierna luister, ek is seker hulle is nog nie baie vertroud met jou maatskappy en jou toepassing nie, maar hulle sal wees.

Joey Korenman:

Maar ek wou net begin leer 'n bietjie meer oor jou. Wat is jou agtergrond en hoe het jy uiteindelik 'n sagtewaremaatskappy begin wat besig is om 'n animasie-toepassing te bou?

Zack Brown:

Natuurlik goed, so ek het my kreatiewe lewe in drukontwerp en fotografie-soort begin vanweer, ons werk tans aan iets wat hoogs geheim is, gehul in misterie, maar ons sal dit binnekort aankondig. Dit maak 'n toneelstuk op kruisplatform-standaardisering.

Joey Korenman:

Reg.

Zack Brown:

Jy weet, persoonlik as 'n skrapse begin. ou, ek dink nie dit hoef uit Google te kom nie, maar dit moet beslis een of ander tyd deur Google aangeneem word om 'n standaard te wees.

Zack Brown:

Dan weer, 'n suksesscenario, soos ek dit sien, is 50% markaandeel. Dis goed. Dit is wat Unity gedoen het. Hulle het nie seer nie. Jy gaan nooit almal tevrede stel nie. Veral in 'n tegniese dissipline ... [onhoorbaar 00:55:47] was in die ongeluk produk van tegniese dissiplines van kodeerders van verskeie tale en ontwerpers met behulp van verskeie ontwerp gereedskap, en beweging ontwerpers van verskeie strepe. Jy vermenigvuldig al daardie verskillende kombinasies, jy gaan nooit almal tevrede stel met een standaard of een instrument nie, en dit is heeltemal in orde. Maar, iets wat kan resoneer en die probleem kan oplos, soos die basislynprobleme van genoeg mense, om 'n standaard te begin word op die manier wat Unity is, ek dink dit is heeltemal moontlik.

Zack Brown:

En ek dink nie dit hoef uit een van daardie groot maatskappye te kom nie. Jy weet, bevooroordeeld, maar persoonlike beskouing daarvan.

Joey Korenman:

Ja. Baie koel. Ja, ek is opgewonde vir jou om te onthul en op die verhoog te klim in 'n swart tortleneck enwys almal wat daardie kenmerk is.

Joey Korenman:

So ek het nog 'n paar vrae vir jou, en jy woon in San Francisco, jy is in die tegnologie-borrel. Jy het die YC ding gedoen en dit alles.

Zack Brown:

Vir seker.

Joey Korenman:

En so verbeel ek my dit jy is in kontak met baie tegnologiemaatskappye. Ek is seker jy ken mense by die groot, wat is die akroniem wat mense nou gebruik? FAANG.

Zack Brown:

FAANG, yeah.

Joey Korenman:

... met twee As, yeah, yeah. Jy weet, Facebook, Apple ...

Zack Brown:

Amazon.

Joey Korenman:

Eintlik nee wag, dis Facebook, Apple, ja Amazon reg, dan Netflix en Google.

Zack Brown:

Ek dink Microsoft hoort ook daar bo, maar dit is eintlik dat Silicon Valley [onhoorbaar 00:57:00] is.

Joey Korenman:

Reg. Dit is soos die cool kinders, uitgesluit die ... Maar in elk geval, so jy weet, en jou gebruikers is beide bewegingsontwerpers en UX-ontwerpers en alles tussenin. So ek is nuuskierig net vanuit jou perspektief, hoe lyk die werksvooruitsigte aan die weskus vir die animeerder wat 'n bietjie kode ken of die kodeerder wat 'n bietjie animasie ken? Van waar ek in Florida sit, lyk dit of dit bloei, maar ek is nie daar nie, en ek is nuuskierig wat jy op die grond sien.

Zack Brown:

Vir seker, ek sien ook 'n oplewing. Die idee van UX as 'n differensieerder het regtig ...dit is in volle hoofstroom-aanneming op hierdie punt wat die kromme deurkruis, as jy die een ken. In elk geval, dit is ... almal en hul ma en oupa is bewus daarvan dat die onderskeid op UX 'n groot verskil maak aan 'n maatskappy se vooruitsigte op sukses. En mosie is gevestig as 'n belangrike deel daarvan.

Zack Brown:

En terug na Lottie en dies meer, om dit toeganklik te maak ... maak dit regtig maklik om 'n heerlike animasie in jou toepassing te plaas, dit is 'n groot probleem. So ja, bewegingsontwerpers wat ... Bewegingsontwerpers vir kode, bewegingsontwerpers vir kodebasisse, bewegingsontwerpers vir sagteware. Vir seker, ons sien daardie booming hier.

Joey Korenman:

Dit is wonderlik. Wel, hoekom eindig ons nie hiermee nie? Animator is reeds 'n baie baie cool app en regtig baie kragtig, en weer gaan ons daarna skakel. Ek stel voor almal gaan speel daarmee. Of jy nou hierdie soort werk doen of nie, daar is 'n goeie kans dat jy dit in die toekoms sal doen, want ek dink Zack is reg, almal en hul ma wil nou animasie op hul webwerf en in hul app hê.

Joey Korenman:

As jy Animator met After Effects vergelyk, wat ek dink 25 of 26 jaar oud is, is daar natuurlik baie funksies wat Animator nog nie het nie, en daar is geen 3D-kamera of so iets op hierdie stadium.

Zack Brown:

Geen kamera nie.

Joey Korenman:

Wat is jou visie vir die toekoms van dieapp en eerlik van die maatskappy ook?

Zack Brown:

Ons amper simpel ambisieuse ... Jy weet, ons moet vir die sterre skiet. Deel daarvan is om Silicon Valley en VC gesteun te word. Deel daarvan is as't ware net blinde ambisie. Persoonlik, soos op 'n eksistensiële vlak, maar ek sien 'n geleentheid om ontwerp en kode te verenig. Reg? Almal in ons span doen. Om daardie werkvloeie te verenig om byvoorbeeld daardie markaandeel te bereik wat Unity het.

Zack Brown:

So ons maatskappy se missie is "Om sagteware-skepping te revolusioneer deur ontwerp en kode te verenig". Dit is die groot sessie vir die begin-missie, en die manier waarop ons met ons eerste produk na die mark gegaan het, was om daardie leemte te vul wat Flash oorgebly het van bewegingsontwerp wat na produksie gestuur word. En dit dek daardie eerste gebruiksgeval van beweging in sagteware wat ek genoem het. Daardie atoomsoort animasies. En Animator laat jou verder gaan met dinge soos plekhouers en die kode API.

Zack Brown:

Maar daar is meer aan die probleem, en ons sien interessante neigings opduik soos ontwerpstelsels wie se gestelde doel is om ontwerp te sistematiseer op dieselfde manier as wat kode is. Idees soos weergawebeheer, idees soos komponente, en dit begin regtig mindshare vasvang. Veral in die onderneming waar die behoeftes van groot konsekwentheid daartoe gelei het dat miljoene en miljoene en miljoene dollars gestort is om ontwerpstelsels te skep. So dit kan weeseen deel van die legkaart. Dit is iets wat ons dophou.

Zack Brown:

Wat ontwerpstelsels ignoreer, is presies dieselfde oorhandiging van ontwerp tot kode. Nou kan jy 'n ontwerpstelsel in jou ontwerpinstrument skep, en jy het hierdie wonderlike abstrakte idee van, "Hier is my tipografie," en, "Hier is my kleure." Maar jy moet nog gaan en dit met die hand in die kode implementeer. Dit het dieselfde geërf ... daardie ruimte het dieselfde probleem geërf as wat die tradisionele ontwerp-oorhandiging gedoen het. So dit is 'n probleem wat ons fyn dophou.

Zack Brown:

Ja, beantwoord dit jou vraag?

Joey Korenman:

Ja, ek dink verenig, ontwerp en kodeer. Dit is 'n redelik ambisieuse taak, maar ek weet nie. Net uit die paar interaksies wat ek met jou gehad het, Zack, dink ek jy en die span is opgewasse daarvoor. En ek sien regtig uit daarna om te sien waar dit gaan.

Zack Brown:

Dankie, Joey. Baie dankie dat jy my vandag aan het.

Joey Korenman:

Kyk na Animator by Haiku.ai. Ek wil regtig vir Zack bedank dat hy so goed gepraat het oor die uitdagings wat animeerders en ontwikkelaars in die gesig staar wanneer dit kom by die implementering van animasie in app. Animator is nog redelik nuut, maar dit is reeds 'n baie lekker toepassing om te gebruik, en ek dink dit het 'n groot kans om die manier waarop ons dinge animeer te verander wat uiteindelik interaktief op 'n webwerf of 'n mobiele toepassing of enigiets anders sal wees.

Joey Korenman:

Maak seker jy is ingeteken op hierdie poduitsending sodat jy op hoogte kan bly van industrienuus en nuwe nutsgoed soos Animator. En as jy nog meer kennis wil hê, gaan na SchoolofMotion.com om 'n gratis rekening te kry en om ons Motion Mondays-nuusbrief te ontvang. Dit is 'n kort e-pos wat jy oor jou ekstra groot gewone Dunkin' Donuts-koffie kan lees, en dit sal jou op hoogte hou van enigiets waarvan jy bewus moet wees in bewegingsontwerp.

Joey Korenman:

En dit is dit vir hierdie episode. Ek hoop regtig jy het dit gegrawe, en vrede.

gebruik Illustrator, Photoshop, soos daardie reeks gereedskap. Ek was nog altyd in rekenaars vandat ek baie jonk was en terwyl ek hierdie media verken het, het ek hierdie hulpmiddel genaamd Flash ontdek, wat 'n wonderlike stuk sagteware was en dit het my brug na programmering geword.

Zack Brown:

In Flash kon jy nie net met hierdie tot vandag toe unieke vektor outeur-instrumente teken nie, maar jy kan jou ontwerpe met kode versier in 'n baie elegante en selfstandige manier, so dit het my regtig in programmering begin kry. Ek het al hierdie klein speletjies gemaak. Die wêreld was as 't ware my oester. En so het ek voortgegaan om rekenaarwetenskap te studeer en toe vir 'n rukkie as 'n sagteware-ingenieur gewerk oor die hele linie, 3D-weergawe, verspreidingstelsels, 'n bietjie KI, AR.

Zack Brown:

En 'n goeie hoeveelheid UI, UX en toe, het voortgegaan om 'n agentskap genaamd Thomasstraat te begin. Ons was omtrent sewe jaar lank, het tot 'n goeie grootte gegroei. Ons het kliënte soos Coca-Cola, DirecTV gehad, toe verkoop ek dit. Ek het vir twee jaar uit my 20's gereis. Dit was soos 'n opsetlike loopbaanskuif, glo dit of nie. Sowat 40 lande gedek, 'n paar tale geleer, 'n rukkie deurgebring om te seil, en probeer om my lewe as 't ware te verryk.

Zack Brown:

En toe, kom daaruit en stig Haiku en dit was 2016. Ons is al 'n rukkie.

Joey Korenman:

Sjoe, ons kan almal daarmee vereenselwig.Verkoop 'n maatskappy en reis vir twee jaar. Dit is 'n baie oulike storie, man. Ek wil 'n bietjie daarin delf. So, jy het gesê jy het 'n agentskap begin, jy doen werk vir handelsmerke soos Coca-Cola en sulke goed. Watter soort werk het jy gedoen?

Zack Brown:

Dit was oor die algemeen gefokus op die oorbrugging van die gaping tussen ontwerp en kode, asof dit ons swart boks was. Produkkonsultante, skat ek. So, ons sou ingaan, ons sou vereistes met die verskillende belanghebbendes insamel, ons sou met ontwerpe vorendag kom, dit goedgekeur kry, die ontwerpe as sagteware implementeer en daardie end-tot-end proses was ons brood en botter.

Zack Brown:

Dit is ook soort van die begin van my persoonlike begrip van die probleem om van ontwerp tot kode te kom. Dit is 'n morsige probleem en daar is vandag nog geen perfekte oplossing daarvoor nie.

Joey Korenman:

Ja, dit is waaroor ek jou wou vra, want selfs nou en hierdie onderhoud is goeie tydsberekening vir ons, want School of Motion gaan deur die proses om te doen 'n bietjie van 'n ontwerp-herhandelsmerk en ons gaan dit oor alles implementeer, op ons webwerf en so, ons worstel nogal hiermee ook.

Joey Korenman:

Ons het al hierdie idees en ons wil graag hê ons webwerf moet op 'n sekere manier werk en ons is 'n animasieskool, so ons wil hê dinge moet animeer. En selfs nou, in 2019, is dit steeds baie moeilikom dit te doen, so toe jy hierdie agentskap bestuur het, hoe was hierdie proses? Die proses om ontwerp te verander en ek neem aan ook animasie in kode? Wat was die toestand van die staat destyds?

Zack Brown:

Dit was omtrent dieselfde as die stand van die kuns vandag, dit is waar jy ontwerpers het wat digitale gereedskap gebruik om spot te skep ups van wat in pixels gebou moet word, wat hulle dan oorhandig aan ontwikkelaars wie se taak dit is om daardie pixels in ander pixels te bou, maar die regte pixels.

Joey Korenman:

Reg.

Zack Brown:

Reg en dit is weer die kern van die probleem. Ons gebruik reeds almal digitale gereedskap, maar ons werkvloeie is onsamehangend en daardie werkvloei is eintlik die kern van die probleem. Hoe bring ons daardie werkstrome bymekaar?

Joey Korenman:

Ja en daar is ook 'n totaal ander ... Ek het probeer om aan 'n ander woord as "paradigma" te dink, want dit is net klink so lam, maar dit is die woord wat ek dink dit is gepas. Wanneer bewegingsontwerpers tipies dink in terme van in wese lineêre storievertelling. Dit gaan so lyk, want ek animeer dit so en dit sal elke keer so terugspeel.

Joey Korenman:

Maar wanneer jy van 'n toepassing praat, sal dit in 'n ander toestand animeer, maar dan kan dit dalk agteruit animeer. As jy teruggaan en die kleur van die knoppie kan verander afhangendeop 'n voorkeur. En daar is al hierdie dinge wat nou interaktief is en afhanklikhede het en sulke dinge.

Joey Korenman:

So, is dit in wese die rede dat daar hierdie vertaalprobleem is tussen die gereedskap wat ons aan die bewegingsontwerpkant en die koderingskant gebruik?

Zack Brown:

Presies, ja. En daar is nie so 'n gereedskap met 'n waarskuwing nie, sit 'n pen daarin, daar is nie so 'n hulpmiddel vandag wat ons dit laat doen nie. Daar was vroeër een. Dit is presies wat Flash jou laat doen, weereens, deur ontwerp en kode te meng, kan jy na Frame 20 gaan en 'n klein vlaggie in die kode stel en nou is jy wat ook al jou knoppie rooi is in plaas van blou. After Effects doen dit nie en After Effects is eintlik al wat deesdae oor is in die wêreld van bewegingsontwerpgereedskap.

Zack Brown:

Maar dit is eintlik net 'n vreemde laaste wat, vyf, 10 jaar sedert Flash effektief dood was dat die wêreld hierdie vakuum gevoel het, want dit het vroeër 'n monopolie gehad en wanneer 'n monopolie sterf, is dit net soort van hierdie vreemde plek waarin ons is. Maak dit alles sin?

Joey Korenman:

Ja, nee, dit doen dit heeltemal en ek eintlik voorheen Ek het ten volle in bewegingsontwerp gegaan, ek het ook met Flash gedobbel en ek was ook mal daaroor dat jy aksieskrif kon gebruik en 'n klomp interaktiwiteit kon skep terwyl jy ontwerp en dit was regtig 'n wonderlike ding om te gebruik.

Joey Korenman:

En om te weeseerlik, ek het nooit heeltemal verstaan ​​hoekom dit die edele dood gesterf het wat dit gedoen het nie. Het jy enige insig in wat dit doodgemaak het? En vir almal wat luister, Flash is nog steeds rond. Dit word nou Animate genoem. Adobe het dit hernaam en dit word baie gebruik vir selanimasie, vir tradisionele animasie, maar dit word nie gebruik soos dit vroeër was nie.

Joey Korenman:

Ek is nuuskierig of jy weet hoekom dit wil sê, Zack.

Zack Brown:

Ja, ek het 'n gedagte of twee. Dus, die begin van die einde vir Flash was omstreeks 2005 toe Adobe Macro Media vir $3,4 miljard verkry het en daardie geld was in wese alles vir Flash. Macro Media het ander produkte in sy reeks gehad soos Dream Weaver en Fireworks, maar Flash was regtig, dit was die kroonjuweel. Dit het op elke toestel gehardloop, dit het op die stadium die helfte van die internet se advertensies bedien, dit was die go-to platform vir die skep van speletjies.

Zack Brown:

As jy flitsspeletjies onthou, flits spotprente, dit was die ruggraat, die infrastruktuur-ruggraat vir YouTube en in die algemeen, video op die web. Dit is maklik om dit alles te vergeet, maar Flash was 'n groot sukses, en dus het Adobe met reg 'n groot bedrag daarvoor betaal en toe het die selfoon gekom. Die iPhone was soort van die vlagskip vir die selfoon, slimfoonrevolusie en selfoon het Flash doodgemaak saam met die hulp van Steve Jobs en die hele besigheidsmodel van die toepassingwinkel, 'n reusagtige deel van wie se inkomste uit speletjies kom.

Zack

Rol na bo