Profile cover photo
Profile photo
Alex Lockwood
11,201 followers -
Blogger, Go Programmer, and Android Enthusiast
Blogger, Go Programmer, and Android Enthusiast

11,201 followers
About
Alex's posts

Post is pinned.Post has attachment
Introducing Shape Shifter v1.0, https://shapeshifter.design

For the past 2 months I've been working tirelessly on merging Shape Shifter and +Roman Nurik​ Android Icon Animator tool into a single web app. Today I am finally ready to release Shape Shifter v1.0, which provides the following features:

* Build layered vector graphics using groups, paths, and clip paths. (https://goo.gl/hHECgH)
* Create property animations for each individual layer and organize them via a timeline. (https://goo.gl/tvXukk)
* Edit the individual properties of each layer/property animation by hand and view how they affect the rendered result. (http://i.imgur.com/e8XqyDR.png)
* Create path morphing animations even if the path strings are incompatible. Shape Shifter will detect whether the path strings are incompatible and will prompt you to either “auto fix” the paths or to fix them by hand. (https://goo.gl/Qcw7Pe) Note that pretty much all of the functionality that existed in previous versions of this tool is hidden behind that “edit paths” button in the screenshot, so don’t miss it! :)
* Export the resulting animation to SVG, VectorDrawable, AnimatedVectorDrawable, and SVG spritesheet format (CSS keyframes coming soon).

In addition to these features, Shape Shifter can also be used as a SVG-to-VectorDrawable converter (better than most of the existing conversion tools out there IMO).

It is also a great educational tool for teaching Android developers about AnimatedVectorDrawables (i.e. the layers make up the VectorDrawable specified in the <animated-vector android:drawable=“…”> attribute and the animation blocks are the AVD’s <target> nodes).

There are several demos available to try under “File” —> “Demo”. If you want to create your own icon animations, I recommend downloading/importing some SVGs from https://material.io/icons/ and seeing what you can come up with.

In the coming weeks I’ll be posting more documentation/videos illustrating how to use the tool. Until then, I would love to hear your thoughts/suggestions/ideas for further improving the tool!

Live version: https://shapeshifter.design
Video tutorial: https://youtu.be/2aq3ljlnQdI
Source code: https://github.com/alexjlockwood/ShapeShifter
Intro to icon animations: https://goo.gl/tSQ3pj
Animated Photo

PM me if you work somewhere cool in NYC because i started applying to a couple places today. :p

Post has shared content
Lessons learned while converting to Kotlin with Android Studio

Just converted your app to Kotlin? Here are some tips to improve your code!

Read the blog post here: https://goo.gl/b61nmJ

Post has attachment
Shape Shifter v1.0.1, https://shapeshifter.design

Mainly bug fixes and improvements to SVG import/export. Next thing I'm going to tackle is importing clip-paths from SVG to VectorDrawable. Should be fun. :D

Full change log here: https://github.com/alexjlockwood/ShapeShifter/releases/tag/v1.0.1

Post has attachment
here's a preview of what i'm hoping to release early next week:

https://www.youtube.com/watch?v=2aq3ljlnQdI

Post has attachment
Shape Shifter makes an appearance at Google I/O! (25:40-26:00)

https://youtu.be/V6-roIeNUY0?t=25m40s

Post has attachment

Post has attachment
Shape Shifter v0.3.0 is out! (https://shapeshifter.design)

Make sure you share this post with your web developer friends, because Shape Shifter now exports to CSS keyframes and SVG spritesheets! Here are the deets:

* Made significant improvements to Shape Shifter's UI, making it overall much easier to use.
* Added a new "pair subpaths mode", which allows the user to specify how subpaths in the start canvas should morph into subpaths in the end canvas.
* Added export to SVG spritesheet option for web developers.
* Added export to standalone SVG frames option for web developers.
* Added export to CSS keyframes option for web developers.
* Added the ability to import VectorDrawable files into the workspace.
* Added the ability to delete subpaths and split segments directly from the canvas.
* A bunch of performance improvements and bug fixes.

View the complete changelog on GitHub: https://goo.gl/3x05wE
Animated Photo

Post has attachment
i wonder if the readers over at css-tricks can see through my web developer noobness... :p

pretty cool considering i learned a ton from that blog over the past few months!

https://css-tricks.com/many-tools-shape-morphing/

Post has shared content
wow
Some months ago I decided to implement a library, which provides a tab switcher similar to the one, which is used in Google's chrome browser on Android. It was much more complex than I expected, but finally it is stable enough to release a first version: https://github.com/michael-rapp/ChromeLikeTabSwitcher

It does not yet provide a layout optimized for tablets (tabs at the top), but I will add this feature soon. The current features are:

* Provides a layout optimized for smartphones. The layout is adapted depending on whether it is displayed in landscape or portrait mode.
* Tabs can dynamically be added and removed in an animated manner.
* The tab switcher's state is automatically restored on configuration changes.
* Views are recycler and previews are rendered as bitmaps in order to increase the performance.
Animated Photo
Wait while more posts are being loaded