![]() It's an animation tool that turns vector. This will be final look of our finished project.Introducing 1.2 - Turn animation to ObjC / Swift code Free download | QuartzCode| Full version for Mac OS X YOSEMITE Wan Ahmad Lutfi has introduced (quartzcodeapp), a code generator tool for Mac OS X. Try play the animation, seems better than using path animation, right?Ģ7. The duration does not matter because we have set both of the keyframe values to NO, which means the layer will be shown as soon the animation start. Set both first and second keyframe bool value to NO. Add also transform timeline to failPath layer, then set its keyframes as follow,Ģ6. While still selecting 'failLoading' animation, add a new transform to loadOval, and set its keyframes as follow,Ģ5. Loading to fail animation using path animationĢ4. You can use path animation as in 'completeLoading' animation, but the result will not seem too good as shown below, We will use different technique to animate from loading to fail. Because failPath initially should not be shown, hide it using Layer List or by using shortcut SHIFT + CMD + H.Ģ3. Create a fail path as shown below, you can either group the fail component or append them. This is final completeLoading animation, nice isn't it?Ģ2. Add a new animation and rename it to 'failLoading'.Ģ3. Thats why rotation Z -170 is used in this case. Using QuartzCode you can easily check which direction it go.Ģ1. Note: For rotation animation, the rotation direction is undefined and usually based on least angle. To add more touch to the animation, add a transform timeline, set timing function to Ease In and change the keyframes as follow, Now add fillColor timeline, then select its second keyframe then set the color to green using Keyframe Inspector. Try playing the animation.Ģ0. This should be how the project looks like now.ġ9. Select path timeline second keyframe, and change the path to completePath using Keyframe Inspector. While 'completeLoading' animation selected, select loadOval and add a path timeline to it.ġ8. Add a new animation and rename it to 'completeLoading'.ġ7. Unhide loadOval and hide completePath because completePath will only be used for path animation.ġ6. In this case, loadOval has 5 control points so we'll need to add 2 more control points to completePath as shown below,ġ5. To use path animation, it is recommended to make both paths to have same point to make a path interpolate nicely to other path.ġ4. Create complete path using vector tool, adjust the points as necessary and rename the path to completePath.ġ3. First hide loadOval layer using Layer List or using shortcut SHIFT + CMD + H so we can focus on creating completePath.ġ2. Now we will create 'Loading to Complete Animation'. ![]() Try play it, you will have a nice loading animation.ġ1. At keyframe 2, change rotation:z to -360ġ0.While Transform Timeline still selected, in Keyframe Inspector change the following Then add a Transform Timeline to loadOval in 'loading' animation.ĩ. Now we will add a loading animation to loadOval, first add a animation using 'Animation List' and rename it to 'loading'. To make end of loadOval round, go to Layer Inspector and set Line End and Line Join both to round as shown in the image below.Ĩ. Click at loadOval stroke to create a new control point, then right mouse click between last control point and 'Delete Subpath' to make loadOval open.ħ. You can also click loadOval then click at 'Vertex Mode' at toolbar.Ħ. Now to make the oval open, double click at loadOval to change to 'Vertex Mode'. To create a loading animation, create an oval, then rename it to loadOval.ģ. We'll set the loadOval properties which can be changed using Layer Inspector as followĥ. This should be suitable for the loading animation.Ģ. 1. For first step, change canvas size to 30 x 30.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |