10 Best iOS Photo App Templates

Photo apps are among the most popular of iOS apps to be
found in the App Store today. If you’re not an experienced developer but have long
fantasised about building a photo app yourself, I’m here to make your dream a
reality with this list of the ten best iOS photo app templates available at CodeCanyon.

App templates are ideal for novice coders because they
already have core functions implemented for you so that you can customise the
app easily and add the elements you most prefer to the app’s code to create the
product you want.  

So whether you’re interested in building an app for photo
editing, adding text to photos, or creating your own social media photo app, there’s
a photo app template here for you.

1. PIXL

First up is PIXL,
a handy photo editor app template with a customisable camera built-in. This means that users can take photos with
the camera and start editing them right away or edit photos already in their
photo library.

PIXL

Some of the app’s
best features are its filters, its brightness, saturation, contrast, and tonal
adjustments, resizing and cropping controls, as well as the ability to add
stickers, frames, and text.

When users have
completed their edits, they can share their images directly from the
app on Facebook, Instagram, Twitter, etc. The app supports both iAd and AdMob
and was created with Objective-C.

2. Photo/Video Social App

If you’d love to create your own Instagram-like app, check
out the Photo/Video
Social App
template. This template allows developers to create a
photo and video sharing app in the vein of Instagram where users can follow,
like, comment, and share photos. 

PhotoVideo Social App

Users can log in with their email, Google, or Facebook
accounts, and the app supports monetisation with AdMob. It also supports push
notifications and comes with built-in Analytics to monitor performance.

The app template is written with Swift 4 and uses the latest
version of Firebase.

User Bornagainfatkid says of the template:

“This is an awesome template, the documentation is very well
written with video support. I was able to get this running in Xcode with minimal effort and posting to Firebase needed under an hour of just going over the
documents. It does exactly what is listed in the description.”

3. iOS Image Editor

The beauty of the iOS
Image Editor
app template is that it gives developers two powerful photo
editing templates for one, with both PhotoGram and PicStick templates in one
bundle.

iOS Image Editor

Both apps feature
tools like exposure, saturation, contrast, brightness and sharpness adjustment,
filters, frames, stickers, focus and blur, image rotation, crop and resize,
blemish removal, text and drawing features and more.

These Objective-C templates
have AdMob and iAd implemented
for easy monetisation, but if you don’t want to use ads, they can be disabled with
one click.

4. Photo Collage Maker

Photo collages have become very popular over the past few
years, so it’s no surprise that the Photo
Collage Maker
app template has made it onto our top ten list.

Photo Collage Maker

Written in Objective-C, this template will help you create a
fabulous photo collage app easily and quickly that will allow users to drag and
drop photos from their photo library, edit them, and then arrange them in one of
a wide selection of collage styles. Users can also select their frame style,
size, and colour, as well as adding stickers and text to their creation.

The template supports monetisation with AdMob.

5. Polaroyd

If you love the
vintage look of Polaroid and want to create an app that allows users to
replicate this effect in their photos, the Polaroyd
app template may be just the thing for you.

Polaroyd

Created with Swift, this
template allows the app’s users to take photos with the built-in camera or upload
them from their photo library and edit them with a range of adjustments and
filters to create the Polaroid look.

Users can also add different Polaroid frames and captions to their images and
share them on Facebook and Twitter, email or messenger. 

6. Photo
Stickers App

The Photo
Stickers App
is a template written in Objective-C and is ideal for
developers who want to create an app for adding stickers to photos.

Photo Stickers App

Developers can
create a range of stickers for use in their app, and users of their app can drag
and drop these stickers on photos they’ve either taken with the app’s built-in
camera or selected from their photo library. Users can move, scale, or rotate their stickers.

Once the user has
created their composition, they can share it on Facebook, Twitter, Instagram, WhatsApp,
etc. The app supports AdMob and iAD for easy monetisation.

7. Photo Trivia Quiz

Developing your own
photo quiz app has never been easier. With the Photo
Trivia Quiz
app template, you can create a wide range of photo-driven
quizzes by creating your own categories, uploading your own photos, and creating
questions for users to answer. 

Photo Trivia Quiz

You can
also customise the parameters of the quiz. For example, users might need to
fight against the clock so that the faster they answer questions, the more
points they get. Or they might need to collect a set amount of points to unlock
a new level of the quiz.

The template
provides two versions—one for iPhones and the other for iPads—and supports a
variety of ad providers like AdMob and Chartboost.

8. Gif Factory App

If you want to create an app that allows users to turn their
photos or videos into a GIF sequence, then the Gif
Factory App
template is perfect for you. The app is designed to enable users to use photo sequences or video
clips and turn them into animated GIFs quickly and easily.

Gif Factory App

Even if users aren’t interested in creating their own GIFs
from scratch, they can use the app to play GIFs stored in their photo library
and edit them as they wish. All GIFs can be shared via email, messaging, and
social media.

The template, which is written in Swift, is fully AdMob
integrated.

9. QuickTxt

The power of the QuickTxt
app template is its simplicity and ease of use. The app template, which is
written in Swift, targets developers who want to create a straightforward text
app that allows users to add text to their images and share them quickly
via Email, Facebook, Twitter,
Instagram, WhatsApp, etc.

QuickTxt

Users can select
their fonts, adjust text size and colour, move and scale
photos, and apply a coloured background to their images.

10. Funny Face Maker

To round off our list, check out the Funny
Face Maker
app template. This app template helps developers create one of those incredibly
silly apps that few of us can resist, maybe because they bring a bit of comic
relief to our day by allowing us to make funny photos of ourselves that will
keep family and friends endlessly amused.

Funny Face Maker

The template
provides a huge selection of fun objects and effects for developers to select
for inclusion in their app.

For the end user,
the app is very easy to use. They just need to take a photo with their
camera or select the photo they want to
manipulate from their photo library, and then select the fun object or objects they
want to use. Users can resize and move the object(s) as needed, and save the image. Finally, they can share
on social media, by email or messenger.

Conclusion

These top 10 iOS photo app templates are just a small
selection of the iOS photo app
templates
we have available at CodeCanyon, so if none of them quite fits
your needs, there are plenty of other great options to choose from.

If you want to explore more iOS apps and
templates, then check out some of our other posts on CodeCanyon app templates!

View Tutorial: 10 Best iOS Photo App Templates

Performant Animations Using KUTE.js: Part 5, Easing Functions and Attributes

So far in this series, you have learned how to animate the CSS properties of different elements, how to create different SVG-related animations, and how to animate the text content of different elements on a webpage. There is one more way in which you can animate the elements on a webpage using KUTE.js, and that is by changing the values of different attributes. This requires you to include the attributes plugin in your project.

In this tutorial, you will learn how to use the attributes plugin to animate the value of different kinds of attributes in KUTE.js. We will also discuss different easing functions that you can use to control the pace of different animations.

Easing Functions

Objects in real life very rarely move linearly. They are either accelerating or decelerating. Even the acceleration and deceleration occur at different magnitudes. Up to this point, all our animations have progressed linearly. This doesn’t feel natural at all. In this section, you will learn about all the easing functions that KUTE.js provides for controlling the pace of different animations.

The core easing functions in the library are included in the core engine out of the box. Let’s say you want to apply the QuadraticInOut easing to an animation. This can be achieved in two ways:

easing: KUTE.Easing.easingQuadraticInOut
// OR
easing: 'easingQuadraticInOut'

Each of the easing functions has a unique curve that determines how the elements will accelerate during the animation. A sinusoidal curve implies linear acceleration. Keep in mind that this is different from the linear easing function. The linear function implies a linear speed of animation, while a sinusoidal curve implies a linear speed of acceleration for the animation. In other words, the speed of the animation will increase or decrease linearly. Similarly, quadratic implies acceleration with a power of two, cubic implies a power of three, quartic implies a power of four, and quintic implies a power of five. There are also circular and exponential easing functions.

You can append In, Out, or InOut to any of the easing functions. The value In implies that the animation will start very slowly and keep accelerating until the end. The value Out implies that the animation will start at the maximum speed and then decelerate slowly until it comes to a halt at the end. The value InOut means that the animation will speed up at the beginning and slow down at the end.

You can also use bounce and elastic easing functions in your animations and append In, Out, or InOut to any of them. In the following demo, I have applied all these easing functions on different circles so that you can see how they affect the pace of the animation.

It is possible that none of the core easing functions provide the animation pace that you are looking for. In such cases, you can include the Cubic Bezier functions in your project from the experiments branch and start using those easing functions. 

Similarly, KUTE.js also provides some physics-based easing functions imported from the Dynamics.js library. You can read more about all these easing functions and how to properly use them on the easing function page of the library.

Animating Attributes

Attributes in SVG can accept numbers as well as strings as their value. The strings can be color values or numbers suffixed with a unit like px, em, or %. The names of the attributes themselves can also consist of two words joined by a hyphen. Keeping these differences in mind, KUTE.js provides us different methods that can be used to specify the values of different attributes.

var tween = KUTE.to('selector', {attr: {'r': 100}});
var tween = KUTE.to('selector', {attr: {'r': '10%'}});

var tween = KUTE.to('selector', {attr: {'stroke-width': 10}});
var tween = KUTE.to('selector', {attr: {strokeWidth: 10}});

As you can see, suffixed values need to be enclosed within quotes. Similarly, attributes which contain a hyphen in their name need to be enclosed inside quotes or specified in camelCase form.

Unitless Attributes

A lot of attributes accept unitless values. For example, the stroke-width of a path could be unitless. Similarly, you don’t have to specify a unit for the r, cx, and cy attributes of a circle element. You can animate all these attributes from one value to another using the attributes plugin. 

Now that you know how to use different easing functions, you will be able to animate different attributes at different paces. Here is an example:

var radiusAnimation = KUTE.allTo(
  "circle",
  {
    attr: { r: 75 }
  },
  {
    repeat: 1,
    yoyo: true,
    offset: 1000,
    easing: 'easingCubicIn'
  }
);

var centerxAnimationA = KUTE.to(
  "#circle-a",
  {
    attr: { cx: 500 }
  },
  {
    repeat: 1,
    yoyo: true,
    easing: 'easingCubicInOut',
  }
);

var centerxAnimationB = KUTE.to(
  "#circle-b",
  {
    attr: { cx: 100 }
  },
  {
    repeat: 1,
    yoyo: true,
    easing: 'easingCubicInOut'
  }
);

var centeryAnimation = KUTE.allTo(
  "circle",
  {
    attr: { cy: 300 }
  },
  {
    repeat: 1,
    yoyo: true,
    offset: 1000,
    easing: 'easingCubicOut'
  }
);

The first tween animates the radius of both circles at once using the allTo() method we discussed in the first tutorial. If set to true, the yoyo attribute plays the animation in the reverse direction. 

The cx attribute of both the circles is animated individually. However, they are both triggered by the same button click. Finally, the cy attribute of both the circles is animated at once with an offset of 1000 milliseconds.

Color Attributes

Starting from version 1.5.7, the attribute plugin in KUTE.js also allows you to animate the fill, stroke, and stopColor attributes. You can use valid color names or hex values for the colors. You can also provide the color values in RGB or HSL format. 

One important thing that you have to keep in mind is that the animations will only seem to work if you are not setting the value of these properties in CSS. In the following demo, the fill color wouldn’t have animated at all if I had added the following CSS in our demo.

rect {
    fill: brown;
}

The demo I created is very basic, but you can make it more interesting by applying transforms and using more colors.

Suffixed Attributes

A lot of SVG attributes like r and stroke-width can work with and without suffixes. For example, you can set the value of r to be a number like 10 or in terms of em units like 10em. There are some attributes like offset attribute for color stops that always require you to add a suffix. While specifying a value for suffixed attributes in KUTE.js, always make sure that you enclose the value within quotes.

In the following example, I have animated the offset value of the first stop in a gradient and the color of the second stop. Since offset requires a suffix, I have enclosed the value inside quotes.

var offsetAnimation = KUTE.allTo(
  ".stop1",
  {
    attr: { offset: '90%'}
  },
  {
    repeat: 1,
    offset: 1000,
    yoyo: true,
    easing: 'easingCubicIn'
  }
);

var colorAnimation = KUTE.allTo(
  ".stop2",
  {
    attr: { stopColor: 'black'}
  },
  {
    repeat: 1,
    offset: 1000,
    yoyo: true,
    easing: 'easingCubicIn'
  }
);

var scaleAnimation = KUTE.allTo(
  "circle",
  {
    svgTransform: { scale: 2}
  },
  {
    repeat: 1,
    offset: 1000,
    yoyo: true,
    easing: 'easingCubicIn'
  }
);

There are three different gradients in the demo, and each of these gradients has two color stops with the class names stop1 and stop2. I have also applied a scale transform using the svgTransform attribute, which we discussed in the third tutorial of the series.

Final Thoughts

In this tutorial, you learned about different easing functions available in KUTE.js and how you can use them to control the pace of your own animations. You also learned how to animate different kinds of attributes.

I have tried to cover all the important aspects of KUTE.js in this series. This should be enough to help you use KUTE.js confidently in your own projects. You can also read the documentation in order to learn more about the library. 

I would also recommend that you go through the source code and see how the library actually works. If you have any questions or tips related to this tutorial, feel free to share them in the comments.

View Tutorial: Performant Animations Using KUTE.js: Part 5, Easing Functions and Attributes

Performant Animations Using KUTE.js: Part 4, Animating Text

In the second tutorial of this series, you learned how to animate different CSS properties of the elements on a webpage using KUTE.js. You learned how to animate all the transform properties as well as properties like border-radius and border-color. You can also use the CSS plugin to animate CSS properties like font-size, line-height, letter-spacing, and word-spacing.

KUTE.js also has a Text plugin which allows you to animate the text inside different elements, either by increasing or decreasing a number like in a countdown or by writing a string character by character.

In this tutorial, you will learn how to animate the text inside different elements on a webpage using the CSS and Text plugins in KUTE.js.

Animating CSS Text Properties

As I mentioned earlier, you can use the KUTE.js CSS plugin to animate four different text-related CSS properties. These properties are font-size, line-height, letter-spacing, and word-spacing. We will also use some properties from the core engine discussed in the first tutorial to animate individual letters. Let’s see how we can use all these concepts together to create the vibrating HELLO text in the following demo.

Here is the code that was used to create the above animation:

var theLetters = document.querySelectorAll("span");
var h = document.querySelector(".h");
var e = document.querySelector(".e");
var la = document.querySelector(".la");
var lb = document.querySelector(".lb");
var o = document.querySelector(".o");
var startButton = document.querySelector(".start");

var animateColor = KUTE.allFromTo(
  theLetters,
  { color: 'white' },
  { color: 'red' },
  { offset: 200, duration: 50}
);

var animateFontSize = KUTE.allFromTo(
  theLetters,
  { fontSize: '2em' },
  { fontSize: '4em' },
  { offset: 100, duration: 200, repeat: 10, yoyo: true}
);

var animateSkewing = KUTE.allTo(
  theLetters,
  { skewX: -15},
  { offset: 200, duration: 200 }
);

var animateH = KUTE.to(
  h,
  { color: '#009688' }
);

var animateE = KUTE.to(
  e,
  { translateY: -40, color: '#E91E63' }
);

var animateLA = KUTE.to(
  la,
  { color: '#8BC34A' }
);

var animateLB = KUTE.to(
  lb,
  { translateY: 20, color: '#FFC107' }
);

var animateO = KUTE.to(
  o,
  { color: '#FF5722' }
);

var lettersSqueezed = KUTE.allTo(
  theLetters,
  { letterSpacing: '-15px' },
  { offset: 0, duration: 200 }
);

animateColor.chain(animateFontSize);
animateFontSize.chain(animateSkewing);
animateSkewing.chain(animateH, animateE, animateLA, animateLB, animateO);
animateE.chain(lettersSqueezed);

startButton.addEventListener(
  "click",
  function() {
    animateColor.start();
  },
  false
);

Each letter of the word is wrapped inside a span tag and has its own unique class. The first tween animates the color of all the letters from white to red with an offset of 200ms. This is also the first animation that is played after clicking on Start Animation. The animateFontSize tween has been chained to animateColor. This way, the font-size animation begins as soon as the color animation ends. 

You might have noticed that I have used two attributes called repeat and yoyo to control the behavior of the animation. The yoyo attribute is used to reverse the animation that is currently being played repeatedly. This can avoid sudden jumps in the values of different properties during the animation and make it appear smooth.

The font-size animation has been chained with animateSkewing, which skews all the letters by -15 degrees. The skewX and skewY properties are available within the core engine itself.

All the tweens for animating the color of different letters have been chained to animateSkewing at once. This way, you can make sure that all the chained color animations start playing as soon as the skew animation ends. Finally, the lettersSqueezed tween reduces the spacing between different letters by 15 px.

You can create more interesting effects by using different combinations of properties.

Animating Numbers

You can also animate numbers in KUTE.js. However, you will have to include an additional text plugin to create the animation. 

The process of animating numbers is actually very simple. You just need to specify the selector where the animating numbers should be shown as well as the final number at which the animation should end. 

Here is a basic example that shows the total number of airports in the USA in 2016 using animation.

var usa = document.querySelector(".usa");
var startButton = document.querySelector(".start");

var animateUSA = KUTE.to(
  usa,
  { number: 19536 }
);

startButton.addEventListener(
  "click",
  function() {
    animateUSA.start();
  },
  false
);

You can also apply the usual tween options like duration, repeat, and delay to customize the behavior of the animation. The code we just wrote will result in the following animation:

Writing Text Character by Character

This is a very popular effect that you can find on quite a few websites. The KUTE.js text plugin allows you to specify the new sentence that should replace the original sentence one character at a time. 

Before replacing the initial characters with their final value, random characters are animated like the numbers example you just saw. The embedded CodePen demo should make it clearer:

Here is the code that you need to write in order to create the above animation:

var animateHeading = KUTE.to(
  heading,
  { text: '70% Surface of Earth is Covered with Water.' },
  { duration: 5000}
);

startButton.addEventListener(
  "click",
  function() {
    animateHeading.start();
  },
  false
);

The character animation for the whole sentence is finished within 5 seconds. As you might have noticed, the initial and final sentences don’t need to have the same number of characters. This gives us a lot of liberty when setting the value of the text parameter.

You can also include HTML tags inside the value of the text parameter and then use CSS to change the appearance of the text that you just animated.

var animateHeading = KUTE.to(
  heading,
  { text: '70% SURFACE OF <span class="earth">EARTH</span> IS COVERED WITH <span class="water">WATER</span>.' },
  { duration: 10000, textChars: 'upper' }
);

There will be a delay in the appearance of Earth after of has already appeared. This happens because the plugin also writes <span class="earth"> using the same character animation, but none of those characters are actually visible to the user. The delay may or may not be desirable based on your preferences.

The intermediate characters that are shown during the animation are lowercase alphabetical values by default. This can be an issue when the characters that you want to animate are all uppercase letters or numbers. Which intermediate characters are used for the animation is determined by the value of the textChars parameter. It accepts six different values:

  • alpha: In this case, the intermediate characters will be lowercase letters.
  • upper: In this case, the intermediate characters will be uppercase letters.
  • numeric: In this case, numerical characters are used for the animation. This is different from animating a number as the values won’t increase sequentially.
  • symbols: In this case, the plugin will use characters like #, %, and $ for the animations.
  • all: You can use this value if you want the intermediate characters to be a mix of alphabetic, numeric, and symbols.
  • If nothing else works for you, KUTE.js gives you the option of specifying your own custom list of characters that should be used during the animation.

The following example shows how you can animate text inside a heading using uppercase intermediate characters.

Final Thoughts

In this tutorial, you learned how to use the CSS and Text plugins in KUTE.js to animate the text inside an element. When you want to animate the appearance of the text, you need to use the CSS plugin. This will allow you to use properties like font-size, letter-spacing, etc. When you want to change the actual characters inside any element, you need to use the text plugin.

If you’re looking for additional JavaScript resources to study or to use in your work, check out what we have available on Envato Market.

I hope you learned something new in this tutorial. If you have any questions, please let me know in the comments.

View Tutorial: Performant Animations Using KUTE.js: Part 4, Animating Text

Why You Need More Integration Between Design and Development

UX’s role isn’t clearly defined. That leads to many organizations whose development teams adopt a faster, iterative approach to development, struggling to integrate UX design into the process.

One gap is found in the handoff process between designers and developers who may not be familiar (or comfortable) with the needs of their collaborator. Tools such as Zeplin, Figma and Redpen have come in to provide commenting and specs, and also a way to visually track the progress and changes in the design over time. 

Another area for improvement is the process of collaboration between designers and the development team while creating prototypes of the initial designs in the same sprint, without leaving either group silo-ed or feeling a lack of ownership in the process. How should teams be optimally organized in today’s agile work environment? 

UX and Development Should be Integrated

To make this happen, the development team should work alongside UX designers and vice versa. Being agile involves being responsive to change, so this means that everyone is involved in iterating on the initial design, and pointing out ways it can be improved from their perspective with designers bringing a user centered experience perspective, while developers bringing a more technical perspective.

This will increase the flexibility and the response time to changing requirements, making the overall process much easier to follow and understand. Any design issue that arises during the sprint can be solved on the spot, improving the end result and helping the sprint stay on track. 

Wrapping Up

By solving problems in a diverse group, you can quickly aggregate knowledge and share resources. Optimize for a fast feedback loop by covering use cases found by initial research and analyzing problems from many perspectives. 

View Tutorial: Why You Need More Integration Between Design and Development

Performant Animations Using KUTE.js: Part 3, Animating SVG

The previous tutorial of the series showed you how to animate different CSS properties of any element using KUTE.js. However, the core engine does not allow you to animate properties that are specific to SVG elements. Similarly, you can’t animate the SVG morphing of different path shapes or the drawing of different SVG elements using strokes. You will have to use the KUTE.js SVG plugin to achieve any of these tasks.

Before we begin, keep in mind that you will have to include both the KUTE.js core engine and the SVG plugin for the examples in this tutorial to work.

Morphing SVG Shapes

Morphing one SVG shape into another is a very common feature that you will come across. The KUTE.js SVG plugin gives us everything that we need to create our own morphing animations with ease. 

There are three ways to morph SVG shapes using this library:

  1. You can use the fromTo() method to specify both the initial and the final SVG path for your element. 
  2. You can also use the to() method and avoid specifying the initial path. In this case, the start value for the morphing will be determined based on the value of the d attribute of the selected element that you want to morph. 
  3. One more option that you have is to pass the final path as a string directly to the tween. This way, you can avoid having two different paths in your SVG.
KUTE.fromTo('#shape-a', {path: '#shape-a' }, { path: '#shape-b' });
KUTE.to('#shape-a', { path: '#shape-b' });

KUTE.fromTo('#shape-a', {path: '#shape-a' }, { path: 'The path of #shape-b as a valid string.' });
KUTE.to('#shape-a', { path: 'The path of #shape-b as a valid string.' });

During initialization, the library samples some points based on the paths that we provided. These points are then stored in two different arrays. Finally, these arrays are used for the interpolation. There are a number of options that you can configure to control the morphing behavior for different paths.

  • morphPrecision: As you might have guessed, this option allows you to specify the precision or accuracy of the morphing. It is specified as a number, and a lower value means higher precision. Keep in mind that higher precision will result in more accuracy, but it will also be detrimental to the performance. This option does not apply when you are dealing with polygonal shapes or paths where the d attribute consists only of hl, and v. In such cases, the original polygon paths are used instead of sampling new ones.
  • reverseFirstPath: You can set the value of this option to true in order to reverse the drawing path for your first shape. Its default value is false.
  • reverseSecondPath: You can set the value of this option to true in order to reverse the drawing path for your second shape. Its default value is also false.
  • morphIndex: Sometimes, the points on a path might have to cover a lot of distance during morphing. You can control this behavior using the morphIndex parameter. When specified, this parameter allows you to rotate the final path in such a way that all the points travel the least distance possible.

Let’s use what we have learned so far to morph a battery icon into a bookmark icon. You should note that I have used lowercase l in order to specify the path in relative terms. This is the required markup:

<path id="battery-a" 
      d="M50,10 l150,0 l0,25 l20,0 l0,50 l-20,0 l0,25 l-150,0 l0,-100z"/>
<path id="bookmark-a"
      d="M70,10 l0,125 l40,-40 l40,40 l0,-125 l0,0 l0,0 l0,0 l0,0z"/>

The following JavaScript creates the tween object and starts the animation on button click:

var morphA = KUTE.to(
    '#battery-a', 
    { path: '#bookmark-a' },
    { duration: 5000 }
);

startButton.addEventListener(
  "click",
  function() {
    morphA.start();
  },
  false
);

Here is a demo that shows the above code in action. I have also added an extra element where the morph animation sets reverseFirstPath to true. This will help you understand the overall impact of different configuration options on the morphing. The animation duration has been set to 5 seconds so that you can closely observe both the animations and spot the differences.

In the previous example, the main path did not have any subpaths. This made the morphing very straightforward. However, this might not always be the case. 

Let’s add an extra subpath to our bookmark as well as the battery icon. If you morph the icons now, you will see that only the first subpath animates. The second subpath just disappears at the beginning of the animation and reappears at the end. The only way to animate all the subpaths in such cases is by changing the subpaths into individual paths. Here is an example:

<!-- Before -->
<path id="battery-a"
      d="M50,10 l150,0 l0,25 l20,0 l0,50 l-20,0 l0,25 l-150,0 l0,-100z
             M70,30 l60,65 l-10,-65 l60,65z"/>
<path id="bookmark-a"
      d="M70,10 l0,125 l40,-40 l40,40 l0,-125 l0,0 l0,0 l0,0 l0,0z
         M80,80 l30,-45 l30,45 l0,0z"/>
 
<!-- After -->
<path id="battery-b1"
      d="M250,10 l150,0 l0,25 l20,0 l0,50 l-20,0 l0,25 l-150,0 l0,-100z"/>
<path id="battery-b2" 
      d="M270,30 l60,65 l-10,-65 l60,65z"/>
<path id="bookmark-b1"
      d="M270,10 l0,125 l40,-40 l40,40 l0,-125 l0,0 l0,0 l0,0 l0,0z"/>
<path id="bookmark-b2"
      d="M280,80 l30,-45 l30,45 l0,0z"/>

Animating SVG Strokes

Another popular SVG-related animation effect includes starting from nothing and then drawing a predefined shape using SVG strokes. This can be used to animate the drawing of logos or other objects. In this section, you will learn how to use KUTE.js to create a stroking animation for the Font Awesome bicycle icon

There are three ways to animate SVG strokes in KUTE.js. You can animate from 0% to 100% by setting the fromTo values as 0% 0% and 0% 100%. You can also draw a part of the SVG shape by setting the values to something like 0% 5% and 95% 100%. Finally, you can set the ending value to 0% 0% in order to create an erasing effect instead of a drawing effect.

Here is the JavaScript code that I have used to animate our bicycle:

var wholeAnimation = KUTE.fromTo(
  "#icon",
  { draw: "0% 0%" },
  { draw: "0% 100%" },
  { duration: 10000}
);

var partialAnimation = KUTE.fromTo(
  "#icon",
  { draw: "0% 5%" },
  { draw: "95% 100%" },
  { duration: 10000}
);

var eraseAnimation = KUTE.fromTo(
  "#icon",
  { draw: "0% 100%" },
  { draw: "0% 0%" },
  { duration: 5000}
);

As you can see in the example below, you don’t need to worry about multiple subpaths inside a path. KUTE.js animates all of these subpaths individually without any issues. The animation duration is used to determine the time for the animation of the longest path. The stroke duration for the rest of the subpaths is then determined based on their length.

Animating SVG Transforms

We have already learned how to animate CSS transform values in the second tutorial of the series. The KUTE.js SVG plugin also allows you to use the svgTransform attribute in order to rotate, translate, scale, or skew different SVG elements on a webpage.

The rotate attribute accepts a single value that determines the angle of rotation. By default, the rotation happens around the center point of the element, but you can specify a new center of rotation using the transformOrigin attribute.

The translate attribute accepts the values in the format translate: [x, y] or translate: x. When provided with a single value, the value of y is assumed to be zero.

When skewing elements, you will have to use skewX and skewY. There is no support for skew[x, y] in SVG. Similarly, the scale attribute also accepts only one value. The same value is used to scale the elements in both x and y directions.

Here is a code snippet that applies all these transformations on a rectangle and a circle.

var rotation = KUTE.allTo(
  "rect, circle",
  { svgTransform: { rotate: 360 } },
  { repeat: 1, yoyo: true }
);

var scaling = KUTE.allTo(
  "rect, circle",
  { svgTransform: { scale: 1.5 } },
  { repeat: 1, yoyo: true }
);

var translation = KUTE.allTo(
  "rect, circle",
  { svgTransform: { translate: [100, -50] } },
  { repeat: 1, yoyo: true }
);

var skewing = KUTE.allTo(
  "rect, circle",
  { svgTransform: { skewX: 25 } },
  { repeat: 1, yoyo: true }
);

I have set the yoyo parameter to true so that after playing the animation in reverse, the transform properties are set to their initial value. This way, we can replay the animations again and again by clicking on the buttons.

If you press the Rotate button in the demo, you will notice that it does not seem to have any effect on the circle. To observe the rotation of circle, you will have to apply a skew transform on it in order to change its shape and then click on rotate immediately.

Final Thoughts

We began this tutorial by covering the basics of SVG morphing and stroke animations. You learned how to properly morph complex paths that have subpaths and how we can create an erasing stroke effect instead of a drawing one by choosing the right values for the draw attribute. After that, we discussed how we can use the svgTransform attribute in order to animate different transforms.

In various tutorials, we’ve seen just how powerful JavaScript has become. It’s not without its learning curves, and there are plenty of frameworks and libraries to keep you busy, as well. If you’re looking for additional resources to study or to use in your work, check out what we have available on Envato Market.

The tutorial was meant to introduce you to all the features of the KUTE.js SVG plugin and help you get started quickly. You can learn more about the SVG plugin by reading the documentation.

View Tutorial: Performant Animations Using KUTE.js: Part 3, Animating SVG

Quick Tip: Speed up Your Design Process With Studio

In today’s quick tip I’m going to introduce you to “Studio”, a design tool for digital products. Let’s see how it can help speed up your design process!

 

studio.design

Over the years we’ve all become familiar with using tools like Photoshop, Adobe XD, or Sketch, to design layouts and interfaces. Studio takes a slightly different approach to the design process.

It’s a web-based tool, currently free to use, so if you’d like to sign up or sign in head over to https://studio.design/ and enter your credentials.

You’ll be greeted with a Projects page, ready and waiting for your first project if you’ve just signed up. When starting a new project you’ll be given the option of designing a web project, or an iPhone app.

The Tools

Once you kick off a project you’ll see a page (similar to an artboard in other design applications), some zoom and view controls, and to the left you’ll see that you can add boxes, images, text, and icons. Those are pretty much all you can add, so there’s immediately a difference between Studio and other UI design apps you might be used to!

Studios interface
Studio’s interface

This apparent lack of flexibility is soon quashed however, when you see that the left hand sidebar also gives access to a range of pre-built elements (UI kits). The UI kits contain common elements and patterns, such as nav bars, hero sections, forms, and so on. You’ll also find embed blocks, through which you can also drag and drop Google Maps, videos etc. onto your page.

Crucially, all of Studio’s layout elements are responsive; they alter in size and arrangement depending on the size of the page you’re designing. This is key in how Studio works and how it can alter the way you design interfaces.

Take a look at the video above for more details on how to use Studio, its tools, and its resources. Let us know what you think of Studio in the comments!

View Tutorial: Quick Tip: Speed up Your Design Process With Studio

Typography: The Anatomy of a Letter

Learn the basics of typography in this quick video!

Typography: The Anatomy of a Letter

The more we communicate, the closer we become. Typography inspires us by reminding the world of a simpler time without connection. As designers and artists, we can carry that fascination into our work by studying the makeup of letters.

Start with the basics with this quick video below. Learn the anatomy of a letter.

Common Typography Terms

Familiarize yourself with these terms to get a better handle on typography.

Baseline

The invisible line letters rest on.

Baseline - Anatomy of a Letter

Stem

A single vertical stroke upwards to create letters like L or F. Connect one stem to another using a crossbar detail, like the letter H.

Stem and Crossbar - Anatomy of a Letter

Ascender/Descender

Letters with downward strokes that extend past the baseline have Descender strokes. Alternatively, if the stroke moves upward and away from the main body of the letter, we call that the Ascender stroke.

Ascender and Descender - Anatomy of a Letter

Upper/Lowercase Letters

Uppercase letters are capital letters. Lowercase letters are smaller ones. Use uppercase letters for names and places, and lowercase letters for casual settings and more readability.

Upper and Lowercase Letters

X-Height

For lowercase letters, the X-height is the main body of the letter.

X-height - Anatomy of a letter

Counters and Spine

Fully or partially closed spaces found in letters like O, A, and B. If the letter isn’t fully closed, then it’s an Open Counter.

Counter and Ear - Anatomy of a letter

Ear and Shoulder

An Ear is a decorative detail that pokes out from letters like g. A Shoulder is a bumped curve seen in letters like m and n.

Ear and Shoulder - Anatomy of a Letter

Serif vs. Sans Serif

Serif types feature extended stroke details also known as feet. These details are missing in Sans Serif styles.

Serif Vs Sans Serif Typefaces

Learn More About Typography

Typography is an art form every designer can admire. Continue exploring your interest in typography to build your skills over time.

Get Amazing Design Resources

Want to create videos like this? Download the resources used in this video:

Check out these tutorials to learn more from our experts:

View Tutorial: Typography: The Anatomy of a Letter

Simplify Android App Development With Anko

Designed by JetBrains, the organization behind Kotlin, Anko is an open-source library that can radically change the way you create Android apps. It leverages Kotlin’s syntax to offer a large collection of helper functions that help you reduce the verbosity of your code while also improving its performance.

Anko doubles as a DSL, short for domain-specific language, for creating Android layouts. In other words, it can act as a type-safe, dynamic, and more reusable alternative to layout XML files, which, as you might already know, tend to get unwieldy for large apps.

In this tutorial, I’ll help you get started with Anko by showing you how to use some of its most popular features.

1. Project Setup

To be able to use the core features of Anko in your Android Studio project, all you need to do is add the following implementation dependency in the app module’s build.gradle file:

implementation 'org.jetbrains.anko:anko:0.10.1'

If you want Anko to work with widgets from Android’s support libraries, however, you’ll need the following additional dependencies:

implementation 'org.jetbrains.anko:anko-appcompat-v7:0.10.1'
implementation 'org.jetbrains.anko:anko-design:0.10.1'
implementation 'org.jetbrains.anko:anko-recyclerview-v7:0.10.1'
implementation 'org.jetbrains.anko:anko-cardview-v7:0.10.1'

2. Creating Layouts

The Anko DSL has helper functions for almost every widget that’s offered by the Android SDK and the Android support libraries. Using them, you can create your layouts programmatically. The names of the functions match the names of the widgets, but they start with a lowercase letter. For example, to create a TextView widget, you use Anko’s textView() function. Similarly, to create a FloatingActionButton widget, you can use the floatingActionButton() function.

Inside the functions, you’ll have access to all the properties and event listeners of the associated widgets. For instance, you can change the text size of a TextView widget by updating the value of the textSize property inside the textView() function. Similarly, you can add an on-click event listener to it using the onClick method.

To help you better understand how to use the DSL, here’s a sample layout for a browser app, containing an EditText widget and a WebView widget placed inside a LinearLayout widget whose orientation is VERTICAL:

linearLayout {
    orientation = LinearLayout.VERTICAL

    var myWebView:WebView? = null

    editText {
        inputType = InputType.TYPE_TEXT_VARIATION_URI
        imeOptions = EditorInfo.IME_ACTION_GO
        onEditorAction { _, _, _ ->
            myWebView?.loadUrl(text.toString())
        }
    }

    myWebView = webView {
        webViewClient = WebViewClient()
    }
}

Code written in the Anko DSL is very readable and intuitive, but it does take some getting used to, especially if you are already an experienced Android developer. You no longer have to assign identifiers to your widgets—or use the findViewById() method to reference them—because unlike XML-based layouts, Anko’s DSL-based layouts can encapsulate your app’s business logic. For instance, you can see that the EditText widget defined above has an OnEditorAction event listener that directly calls the loadUrl() method of the WebView widget to load the URL the user typed in.

Furthermore, you don’t have to call the setContentView() method anymore because Anko calls it automatically inside your Activity class’s onCreate() method.

The DSL includes several shortcuts you can use to make your layouts more concise. For example, you can directly pass strings to its functions to assign labels to widgets. Often, you can also avoid explicitly setting layout parameters such as widths and heights because it handles them automatically. The following sample code shows you how to create a layout containing two TextView widgets in a highly concise manner:

verticalLayout {
    textView("One")
    textView("Two")
}

For comparison, here’s what the above layout would look like if it were created conventionally:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="One"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Two"/>
</LinearLayout>

Lastly, it’s worth mentioning that layouts created using the Anko DSL tend to load faster than regular layouts because there’s no XML parsing required.

3. Creating Dialogs

If you think using the AlertDialog.Builder class to create dialogs is a lot of work, you’re definitely not alone. For example, here’s how you would normally create a simple dialog that displays a title, a message, and an “OK” button:

AlertDialog.Builder(this@MyActivity)
            .setTitle("My Dialog")
            .setMessage("This is a test message")
            .setPositiveButton("OK", null)
            .create()
            .show()

With Anko, however, creating the above dialog simply involves a call to the alert() function, which accepts the dialog’s title and message as its arguments.

alert("This is a test message", "My Dialog") {
    yesButton {  }
}.show()

Note that you don’t have to pass a context to the alert() function. It infers the context automatically.

Anko has similar intuitively named functions to help you quickly create toasts and snackbars too. The following code shows you how to create both short and long duration toasts:

toast("This is a short toast")
longToast("And this is a long toast")

4. Creating Intents

Whenever you need to start a new activity in your app, you must create an intent. Additionally, if you want to send data to the activity, you must include it in the intent as one or more extras. 

With Anko’s startActivity() function, you can usually perform both tasks in just one line of code. For example, the following code shows you how to launch an activity named MyActivity and pass two extras, a string extra named “PERSON” and an integer extra named “AGE”, to it:

startActivity<MyActivity>("PERSON" to "Bob", "AGE" to 25)

Anko also has helper functions for several common intent-based tasks. For instance, you can use its browse() function to open a URL in the device’s default browser app. Similarly, you can use the email() function to open the default email app and compose an email.

// Open browser
browse("https://tutsplus.com")

// Open default E-mail app
email("bob@example.com", "Hello", "This is a test email")

5. Using SQLite Databases

Even though every Android app can create and use SQLite databases with no additional dependencies, many developers choose third-party databases like Realm. Why? Well, maybe it’s because Android’s SQLite API is extremely verbose, low-level, and requires a good understanding of SQL. Fortunately, Anko has SQLite helper functions to address all those problems.

Let’s say we have a simple SQLite database created using the following code:

val myDB = openOrCreateDatabase("test.db", 
                        Context.MODE_PRIVATE, null)

With Anko, you can now add a table to the above database simply by using the createTable() function, which expects the name of the table along with one more or tuples specifying the names and data types of its columns. The following sample code creates a table named PERSON having four columns, one of which serves as a primary key:

myDB.createTable("PERSON", true,
        "NAME" to TEXT,
        "AGE" to INTEGER,
        "NET_WORTH" to REAL,
        "ID" to INTEGER + PRIMARY_KEY)

What’s more, to insert rows into the table, you no longer have to depend on the ContentValues() class. You can directly call the insert() function on the database, specify the name of the table you want to add the row to, and then pass the column values to it in the form of tuples.

// Add a row
myDB.insert("PERSON",
        "NAME" to "Bob Martin",
        "AGE" to 25,
        "NET_WORTH" to 2500.50,
        "ID" to 100)

// Add another row
myDB.insert("PERSON",
        "NAME" to "Jane Flores",
        "AGE" to 32,
        "NET_WORTH" to 21500.80,
        "ID" to 101)

Lastly, to query the database, you can use the select() function, optionally followed by a chain of intuitively named functions such as whereSimple(), orderBy(), and groupBy(). For example, to list the names and ages of all persons in the above table whose net worth is greater than 10000, you can use the following code:

myDB.select("PERSON", "NAME", "AGE")
        .whereSimple("NET_WORTH > ?", "10000.0").exec {
    // More code here
}

The result of the above query will be, as you might expect, a Cursor object. Converting it into a List containing actual column values of all the rows is slightly more complicated because it involves creating an object that implements the RowParser interface and passing it to the parseList() function.

The RowParser interface has just one method, the parseRow() method, inside which you’ll have access to the column values of a row. How you use the values is of course up to you. For now, let’s just concatenate them and print them. The following code shows you how to do so:

parseList(object: RowParser<String>{
    override fun parseRow(columns: Array<Any?>): String {
        // Concatenate the values of the first and second columns,
        // which happen to be NAME and AGE
        return "${columns[0]} (${columns[1]} years old)"
    }
}).forEach {
    println(it) // print the concatenated values
}

// Result is:
// Jane Flores (32 years old)

Note that you don’t always have to create a RowParser object manually. If the results of your query contain just one column, you are free to use one of Anko’s many built-in parsers. 

The names of the built-in parsers are based on the data types of the columns. For example, if the data type is TEXT, you can use a StringParser. Or if the data type is INTEGER, you can use an IntParser. The following code shows you how to use a StringParser to simply list the names of all persons in our database:

myDB.select("PERSON", "NAME").exec {
    parseList(StringParser).forEach {
        println(it)
    }
}

// Result is:
// Bob Martin
// Jane Flores

Conclusion

In this tutorial, you learned how to use Anko’s DSL and helper functions to simplify Android application development. You also saw how Anko simplifies SQLite-related operations. I hope you now realize how well-thought-out and useful the library is.

In my opinion, if you are competent in Kotlin already, there’s really no reason why you shouldn’t use Anko to further improve your efficiency and development experience. To learn more about it, do refer to its official wiki.

And while you’re here, check out some of our other posts about Kotlin and Android app development!

View Tutorial: Simplify Android App Development With Anko

Start Saving With These Early Cyber Monday Deals

At Envato this year, Cyber Monday lasts a whole week. You can get 50% off selected items on Envato Market, or save a whopping $120 on an annual Envato Elements subscription, any time between now and next Wednesday, 29 November. So if you’re l…

View Tutorial: Start Saving With These Early Cyber Monday Deals

Start Saving With These Early Cyber Monday Deals

At Envato this year, Cyber Monday lasts a whole week. You can get 50% off selected items on Envato Market, or save a whopping $120 on an annual Envato Elements subscription, any time between now and next Wednesday, 29 November. So if you’re l…

View Tutorial: Start Saving With These Early Cyber Monday Deals