![]() Since Angular is using an observable the graph updates on each poll interval automatically. Relevant service code that uses an interval to return the data to the componentīasically this component polls a service, converts the 1–100 Health # to a level that is then used to break the HealthBar into lit segments, yielding the animation above. So, in the spirit of transparency, PaintCode is an optional step here, your mileage may vary. I did not layer on more complex interactions in this example. Yes, you can just export directly from Sketch to SVG but stopping off at PaintCode creates a much tighter, less assumptive, and more programmatically addressable SVG image AND you can layer on more complex interactions before moving it into your app. ![]() ![]() Moving a layer from Sketch into PaintCode is as easy as copy and paste. (optional) Step 1 : Import into PaintCodeĮnter: PaintCode! PaintCode is a really interesting tool that allows you to create complex vector based drawings and then connect them directly to a systems of variables and scripts. I looked at a few approaches including rolling my own by hand, using something like D3 or Charts.js and emulating it as a bar chart but none of these were going to let me get the pixel perfection I needed. Because our web engineers (me) are slightly less amazing, this presented a challenge. The graph on the right is dynamically adjusting individual bar opacity from 0.15 to 1 every few secondsīecause our mobile engineers are amazing, this was no problem. For our specific use case, we will be looking at an EQ Graph that is embedded in the application Sketch is amazing, we all love it and it lends itself well to mobile implementation. If you are like everyone else, your designers are using Sketch to design their mobile app. Lets see a simple case to illustrate how these new toolchains enable complex widgets with their own independent lifecycle to be shared cross platform. This presents a unique set of challenges when you are working native on mobile and HTML5 on web since code reuse between these environments, particularly for complex widgets, is non-existent.įortunately for us the tooling around platform neutral procedural components has improved dramatically over the last few years and with Angular 2+ (just Angular from here on out) it has become incredibly easy to control these procedurally generated widgets. If you are anything like us at work, your designers are increasingly asking for widgets in a mobile app to be replicated inside a non-mobile web application. Complex SVG interactions using Sketch, PaintCode and Angular 2+
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |