_Works with BETA5 and higher_

Animation effects, sparsely used, greatly enhance the attractiveness of an app. With BETA5, we reworked the Animation API. This guide gives an overview over the animation API and the inner workings.

We animate all vector elements using a powerful animation model drawing on CoreAnimations, Web Animations, SMIL and CSS Animations. We are pretty confident to enable any kind - even complicated animations - using the API.

Some other good reads on mobile application & animation

  • http://www.creativebloq.com/features/how-to-use-animation-in-mobile-apps

  • https://uxplanet.org/prototyping-mobile-ui-animations-5-inspiring-examples-376693fd7c45

  • https://tubikstudio.com/ui-in-action-15-animated-design-concepts-of-mobile-ui/

Source code for example

Please find the sample project here. Edit the start.swift to run different examples. [Animation demo](🔗)

## Basics

Let's quickly recap how to access a vector element. The page consists a custom control that contains a rectangle with the id **rect1**:

To get a refences to any vector element:

  • make sure vector element has an **id** (here rect1)

  • use the **drawing** attribute and **find** method to get a reference

  • create a basic animation, here the rotate animation

Use an id tag to identify the vector element

(Script tags will be stripped)


## BoundingBox

A rectangular bounding box which is used to describe the bounds of a vector element independant of its shape. You retrieve the BoundingBox using the getBoundingBox() method available on any vector element.

## Get vector element absolute location

The absolute location of the vector element is computed by the absolute location of the bounding box. Here the code to get the absolute XY coordinates of the vector element on the mobile device in pixels.



# Rotate vector element

A few lines of code to animate the rectangle:



Pretty straight forward

(Script tags will be stripped)


## Center of rotation

You can set the center of the rotate animation using the anchor attributes. By default, the center of rotation is defined in **relative** values starting from the top left to the bottom right. You can set it to absolute values by setting rotateAnimation.isAbsolute = true. For now, let keep it the default (false) and the anchor attribute to a value from 0 .. 1.

(Script tags will be stripped)


The following code sets the anchor point to the middle of the object.



# Moving objects

The translate animation moves an object by **dx** and **dy** pixels. The movement is relative to the current location, i.e. it moves by +/- pixels in dx direction, and in +/- pixels in vertical direction. So if the object is located at (100,100), and you use (dx,dy) = (10,20), your new location is (110,120).

Here the swift code to create an animation that moves vector object by dx and dy:



## Compute coordinate for middle lower third of device's screen

Now lets say you want to move to certain coordinate, lets say we want to move to the middle of the lower third of the device, lets further assume we have a resolution of 400 x 690. The coordinate to move to would be (200, 460 + 115) = (200, 575). Here the code to

  • get the width and height of the screen

  • compute the destination coordinate



## Move to computed coordinate

The code for moving to the coordinate is pretty easy:



# Moving along a path

Most certainly, we can also move along a path using the **SCDSvgMotionAnimation**. The object will be moved along a path, where the path comprises of the a number of straight or curved line. Usually, you wouldnt create the path yourself, but create the path through a tool such as Adobe AfterEffects. For demonstration purposes, let us move the object along the sides of a rectangle.

  1. Step 1 - 2 are straightforward. We compute the corners of the rectangle. We use the current device height and width for this

  2. We compute the absolute location of the vector element.

  3. Each motion animation needs a path ** SCDSvgPath ** along which the vector object is moved. Each path starts with a **SCDSvgPathMove** element, followed by a number of **SCDSvgPathLine** elements:

  • We add SCDSvgPathMove using the vector elements current location

  • We add a couple of lines



Using this animation, the rectangle moves around the screen easily.

(Script tags will be stripped)


# PropertyAnimation - animate anything

The property animation is the most powerful, as any attribute of the vector element can be animated. Lets animate the **stroke-width** attribute. When you specify the key, i.e. the property to modify, use camelCase syntax (start with lowerCase, use upperCase for next part)



## Example for properties and ids

Vector attributeKey
fill-opacityfillOpacity
widthwidth
strokestroke
stroke-widthstrokeWidth

## SCDSvgPropertyAnimation constructor

Constructor xDescription
SCDSvgPropertyAnimation(_ key:String,from:Any,to:Any>)Move the property from <from> to <to>. We interpolate linearly with the frame rate over the duration of the animation. Use this as default for most smooth transition
SCDSvgPropertyAnimation(_ key:String,values:[Float])Move property identified by key through the list of values specified in values within the specified duration.

## Animate color transition

As you can see, the constructor and the values for **SCDSvgRGBColor** are a little off standard. We address this shortly, other than that, code is pretty straight forward.



# Grouping animations

The combination and parallel execution of multiple animations effects is done using the **SCDSvgGroupAnimation**. You add multiple animations in the animation attribute


(Script tags will be stripped)


# Value & Time function

The animation api uses two concepts for providing detailed control about the animation called value function and time function:

  • the _value_ function v(x) --> Any receives an input between 0..1 as an input, and returns any value that is compatible with the property specified. As you as the developer write the value function, the behavior itself is totally up to you.

  • the time function f(t) -> [0..1] receives a value 0..1 as an input from the animation system, and returns a value [0..1] as an output. Again you develop the function, and therefore control its behaviour, but you can also use predefined timing function for special effects. These functions are called easing functions and allow your for nice looking effects. Please see here for learning more about the easing functions [Easing functions](🔗)

Vitaly likes to explain it likes this. Image you have an old fashioned movie on a film roll. The value function specifies how each picture on the roll looks like. The time function determines how fast you you reach the picture. The time function can speed up, slow down, fast forward or even go backward.

## Value function example

This value function will return color RED for the first 25% of animation duration, the color ORANGE for the following 50% of the animation duration and for the remaining 25%, the color BLUE.



# OnComplete handler

As animation functions are invoked and execute asynchronously, the ** SCDSvgOnCompleteHandler** allows you to call a function whenever the animation is finished



# Examples