Player JS Code

Animation Code

Flow File:

Format:

Exporter:

  • Super clean, readable code
  • Uses cool code things
  • Imports UIKit for real
  • No 3rd Party Reliance
  • Really effin' nifty

Player.js

Here is the code for player exported with Flow’s HTML template.

Made with Flow 1.5.1

Click here to go back.

/**
 * Class used for driving animations.
 */
class Player {
    constructor(timeline, timerID, loop, delay) {
        this.loop = loop
        this.delay = delay
        this.timerID = timerID
        this.timeline = timeline
        this.createOnFinishCallback()
    }

    get timeline() {
        return this._timeline
    }

    set timeline(timeline) {
        if (this._timeline != null) {
            this.pause()
        }
        this._timeline = timeline

        if (this._timeline === null) {
            this.timingAnimation = null
            this.currentTime = 0
            this.shouldPlay = false
        } else {
            this.timingAnimation = document.getElementById(this.timerID).animate({}, this.timeline.duration + this.delay)
            this.timingAnimation.currentTime = 0
            this.timingAnimation.pause()

            this.animations = this.timeline.createAllAnimations()
            this.shouldPlay = true
            this.pause()
        }
    }

    get duration() {
        return (this.timeline === null) ? 0 : this.timeline.duration
    }

    get currentTime() {
        return (this.timingAnimation === null) ? 0 :  this.timingAnimation.currentTime
    }

    set currentTime(time) {
        if (this.timeline === null || this.timingAnimation === null) {
            return
        }

        for (const animation of this.animations) {
            animation.currentTime = time
        }
        for (const shape of this.timeline.allShapes) {
            shape.setCurrentTime(time / 1000)
        }
        this.timingAnimation.currentTime = time
    }

    play() {
        if (this.timeline === null || this.isPlaying() == true) {
            return
        }

        this.timingAnimation.play()
        for (const animation of this.animations) {
            animation.play()
        }
        for (const shape of this.timeline.allShapes) {
            var t = shape.getCurrentTime() % this.timeline.duration
            shape.setCurrentTime(t)
            shape.unpauseAnimations()
        }
    }

    isPlaying() {
        if (this.timingAnimation == null) {
            return false
        }
        return (this.timingAnimation.playState == "running")
    }

    pause() {
        if (this.timeline === null || this.timingAnimation === null) {
            return
        }
        // console.log("pause - "+this.timerID)
        
        this.timingAnimation.pause()
        for (const animation of this.animations) {
            animation.pause()
        }
        for (const shape of this.timeline.allShapes) {
            shape.pauseAnimations()
        }
    }

    stop() {
        this.shouldPlay = false
        this.pause()
        this.currentTime = 0
    }

 
    //------------------
    // interface updates
    //------------------

    createOnFinishCallback() {
        if (this.timingAnimation == null) {
            return
        }    
        this.timingAnimation.onfinish = () => {
            if (this.loop == true) {
                this.currentTime = 0
            } else {
                this.stop()
            }
        }
    }


    //---------------
    // helper methods
    //---------------

    static convertTimeToString(milliseconds) {
        var date = new Date(null)
        date.setMilliseconds(milliseconds)
        return date.toISOString().substr(14, 8);
    }
}

Try Flow For Yourself

Subscribe to our newsletter

Love UI Animation? Sign up to receive the latest news, articles, tutorials and resources.

We're diligent and don't spam.

Recent MovingUI Articles

MovingUI is a publication sponsered by FLOW focues on UI animation for IOS and the web...


Animate Your Portfolio with Sketch & Flow

Learn the best ways to use motion to help sell your work and step-up your portfolio.

Read on Medium



Discuss. Connect. Share.

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 “”.