Class

Animation

An object that provides basic, single-keyframe animation capabilities for a layer property.

You should never have to interact directly with an Animation object.

Declaration

class Animation

Overview

An Animation object is a convient wrapper around the standard creation of a web-animation. It also provides convience functions for controlling the playback of the instance, as well as calculating its duration.

Properties

element

The HTMLElement to which the animation will be applied. This property is used internally to trigger a web animation, like so:

this.element.animate(keyframe, options)

property

A String representing the name of the animatable css property that will be animated. Some basic examples are:

backgroundColor
offset
opacity

from

The value from which the animation will animate. Flow’s approach to using web-animations is to follow the key-value paring of property names with arrays of values, like so:

{ opacity: [ 0, 1 ] } // [ from, to ]

The from property represents the first value in the array.

to

The value to which the animation will animate. Flow’s approach to using web-animations is to follow the key-value paring of property names with arrays of values, like so:

{ opacity: [ 0, 1 ] } // [ from, to ]

The to property represents the final value in the array.

id

A String used to identify the animation. Flow constructs a unique identifier for each animation in a timeline, doing so by concatenating 3 unique properties like so:

id = element + animatableProperty + animationIndex

startTime

The time at which the animation will begin. This value is always in reference to the beginning of the animation’s timeline. This value maps to the delay property of a the Element.animate() method, which is described as:

The number of milliseconds to delay the start of the animation. Defaults to 0.

endTime

The time at which the animation ends. This value is always in reference to the beginning of the animation’s timeline. This value used to calculate the duration of the animation. Measured in milliseconds from the beginning of a timeline, the endTime marks the actual completion time of an animation.

In some circumstances the endTime may not map directly to startTime+duration. For example, when using a step-middle curve, the animation will visually complete before the endTime arrives.

timingFunction

The timing function used to scale the time to produce easing effects, where easing is the rate of the animation’s change over time.

Depending on the type of curve specified, this property will be either one of the standard options:

linear
ease
ease-in
ease-in-out

A customized bezier curve:

cubic-bezier(0.68,-0.55,0.265,1.55) //Equivalent to the Back-Both in Flow 

A step curve:

steps(1,end)  //step left
steps(1)      //step middle
step-end      //step right

webAnimation

A web-animation constructed from the properties of the Animation object. This property is dynamically created.

playState (readonly)

The playState property a web-animation returns and sets an enumerated value describing the playback state of an animation.

get playState() {
  return this.webAnimation.playState
}

Possible values are specified inweb-animation.playState. The return value will be one of:

idle
running
paused
finished

Returns an enumerated value describing the playback state of an animation.

currentTime

Provides access to the current time value of the animation in milliseconds, whether running or paused.

var t = animation.currentTime

animation.currentTime = 500

Constructor

Creates a new instance of a Flow Animation object.

constructor(element, property, from, to, id, startTime, endTime, timingFunction)

Parameters

element (HTMLElement) - The HTML Element the animation will be manipulating.

property (String) – The property of the HTML Element the animation will be manipulating.

from (String) – The current value of the property being animated.

to (String) – The value of the property being animated at time duration of self.

startTime (Number) – The time the animation will begin.

endTime (Number) – The time the animation will end.

timingFunction (String) – The timing function to be used by self.

Methods

createWebAnimation()

This method constructs a web-animation using the properties of the current instance.

Specifically, it uses the Element.animate() method and applies key-value paring of property names with arrays of values to construct an animation, as defined in the Keyframe Formats document.

createWebAnimation() {
  let keyframe = {
    [this.property]: [`${this.from}`, `${this.to}`]
  };
  let options = {
    id: this.id,
    delay: this.startTime,
    duration: this.duration(),
    easing: this.timingFunction,
    composite: "replace",
    fill: "forwards"
  };
  return this.element.animate(keyframe, options);
}

Returns an animation to be interpreted by the Web Animations API.

duration()

The duration of the current animation. The default value is endTime - startTime except for step functions where the value is calculated like so:

duration() {
  let duration = this.endTime - this.startTime;
  switch (this.timingFunction) {
    case "steps(1,end)":
      return 1
    case "steps(1)":
      return duration / 2
    case "step-end":
      return duration - 1
    default:
      return duration
  }    
}

Returns the duration of the current animation.

play()

Initiates playback for the current instance.

play() {
  let shouldPlay = this.currentTime < this.endTime
  if (shouldPlay) {
      this.webAnimation.play()
  }
}

pause()

Pauses the playback for the current instance.

pause() {
  this.webAnimation.pause()
}