Tutorial
Multiple Animations Tutorial : Loading, complete and fail animations using QuartzCode
Starting from version 1.3, QuartzCode now supports multiple animations. In this post I’m gonna show how to create loading, complete and fail animation as multiple animations in QuartzCode.These are how final animations we will create,Loading AnimationLoading to Complete AnimationLoading to Fail Animation Loading Animation1. For first step, change canvas size to 30 x 30. This should be suitable for the…
Read MoreTutorial : Percentage vote animation for iOS using QuartzCode
In this post I’m going to explain how to create something like percentage vote animation using QuartzCode.I’m going to show the final result first. In this tutorial, I will also show how to edit the generated code in Xcode so that the percentage animation can be changed. 1. First we need to create people icon. Create two…
Read MoreTutorial : Water Fill Animation using QuartzCode
In this post, I’m going to explain how to create water fill animation using QuartzCode.This will be final result and the animation is fully vector which means no image will be used. So, let us get started.1. Create a rectangle to act as glass for the water. 2. Use Insert > CALayer to add CALayer to the canvas. The…
Read MoreApple Watch Animation Explained and Recreated using QuartzCode
After watching Apple Watch transition animation, I immediately think how to reproduce this animation in QuartzCode.And this is my answer, see my version below.I’m not gonna explain full tutorial, however I’ll explain some important techniques to create this animation. However you can download full project below to try it yourself using QuartzCode.I’m going to answer few questions regarding…
Read MoreCreating Custom Activity Indicator using CAReplicatorLayer in QuartzCode (Beta)
There are various types of spinning indicator in various type of apps and webpages. While not all, many of them can be recreated by using CAReplicatorLayer. Although CAReplicatorLayer is cool, originally I don’t know what can it be used for, until I found this great article from David Rönnqvist that is to create spinning indicator. By using QuartzCode,…
Read MoreHow to Create Hamburger Animation using QuartzCode (Beta)
In this post I’m gonna show video tutorial on how to create hamburger animation using QuartzCode without writing any code.Without further ado, here is the video: The steps are summarized as follow:1. Create circle, circle extension(middle path), top and bottom path.2. Edit middle path using vertex mode so it appear as below 3. 2. Set color and lineWidth for all paths, set…
Read More