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 More

Tutorial : 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 More

Tutorial : 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 More

Apple 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 More

How 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