Flow - Now with Lottie & Animated SVGs - Ship beautiful UI Animations. | Product Hunt Embed


Class

Timeline

The Timeline class encapsulates all the animations for a specific view, and is the main interface for controlling playback.


Declaration

public class Timeline

Overview

A Timeline object represents a set of animations associated with a view. It contains references to the main view being animated, as well as the duration, sounds, and other options such as repeat. This class is responsible for initiating and controlling the playback for all animations associated with the view.be used as the main interface for controlling the playback of all animations associated with a view.

Topics

Properties

view

The view whose layers will be animated. This is typically the scene (i.e. artboard) view in a Flow project.

public var view: UIView

duration

The duration of the timeline. This value can be longer, but is no shorter than the minimum amount of time necessary to encompass the playback of all animations associated with the timeline.

public var duration: TimeInterval

animations

The set of all Animation objects associated with the view.

public let animations: [Animation]

sounds

A set of tuples that represent all audio objects to be played back on a timeline, as well as the delay before initiating playback.

public let sounds: [(sound: AVAudioPlayer, delay: TimeInterval)]

autoreverses

Specifies whether or not the timeline should automatically reverse upon ending.

public let autoreverses: Bool

This variable is a let that is set during initialization. If you wish to change its value, best practice is to re-initialize a new Timeline.

repeatCount

Determines the number of times the animation will repeat.

May be fractional. If the repeatCount is 0, it is ignored.

Setting this property to greatestFiniteMagnitude will cause the animation to repeat forever.

public let repeatCount: Float

This variable is a let that is set during initialization. If you wish to change its value, best practice is to re-initialize a new Timeline.

time

The current time of the timeline (i.e. what time is being displayed).

public var time: TimeInterval {
    return animations.first?.time ?? 0
}

playing

Returns a bool indicating whether the timeline is currently playing.

The value returned will be true if the timeline is playing.

var playing: Bool {
    return animations.first?.playing ?? false
}

reversed

Returns the reversed version of the Timeline, by creating a new copy with a set of individually reversed Animation objects.

var reversed: Timeline {
    let reversedAnimations = animations.map { $0.reversed }
    return Timeline(view: view, animations: reversedAnimations, sounds: sounds, duration: duration, autoreverses: autoreverses, repeatCount: repeatCount)
}

Initialization

init(…)

Initialization requires a UIView and an dictionary of CALayer objects associated with CAKeyframeAnimation objects, an array of sounds to play, as well as a duration. Optionally, you can specify if the animation should reverse and/or repeat.

This public initialization method prepares Animation objects based on passed CAKeyframeAnimation objects, prior to executing a private init method.

public convenience init(view: UIView, animationsByLayer: [CALayer: [CAKeyframeAnimation]], sounds: [(sound: AVAudioPlayer, delay: TimeInterval)], duration: TimeInterval, autoreverses: Bool = false, repeatCount: Float = 0) {
    let animations = animationsByLayer.map {
        Animation(layer: $0.0, keyframeAnimations: $0.1, autoreverses: autoreverses, repeatCount: repeatCount)
    }
    self.init(view: view, animations: animations, sounds: sounds, duration: duration, autoreverses: autoreverses, repeatCount: repeatCount)
}

init(…)

Initialization requires a UIView and an array of Animation objects, an array of sounds to play, as well as a duration. Optionally, you can specify if the animation should reverse and/or repeat.

fileprivate init(view: UIView, animations: [Animation], sounds: [(sound: AVAudioPlayer, delay: TimeInterval)], duration: TimeInterval, autoreverses: Bool, repeatCount: Float) {
    self.view = view
    self.duration = duration
    self.sounds = sounds
    self.autoreverses = autoreverses
    self.repeatCount = repeatCount
    self.animations = animations
}

Typically you shouldn’t need to call this method directly, instead use the public initializer.

Playback

play()

Initiates playback. Resumes the timeline from where it was paused.

public func play() {
    playSounds()
    for animation in animations {
        animation.play()
    }
}

pause()

Pauses the timeline.

public func pause() {
    for animation in animations {
        animation.pause()
    }
}

playSounds()

Initiates playback for all sounds.

private func playSounds() {
    for (sound, delay) in sounds {
        Sound.playAudio(sound, delay: delay)
    }
}

Driving

offset(to:)

Offsets the timeline to a specific time. Pass this method a value measured in seconds.

public func offset(to time: TimeInterval) {
    let time = max(min(time, duration), 0)
    for animation in animations {
        animation.offset(to: time)
    }
}

Reset

reset()

Resets the timeline to time 0.

public func reset() {
    for animation in animations {
        animation.reset()
    }
}
background Made with Flow.
underscore Made with Flow.
line2 Made with Flow.
line1 Made with Flow.
circle Made with Flow.
hit Made with Flow.

result(s) found for “”.