Looping an image with Vue Perfectlooper

vue-perfectlooper

A perfectly looping image sequence player with full screen capabilities, built with mobile performance and keyboard accessibility in mind. Using this component you will be able to play back a series of images like a video.

Check the Live Demo

Notice: This project's primary objective is playing back animations at the highest possible visual quality, likely in fullscreen mode. Providing frames with a resolution of 1920x1080 and no visible compression artifacts is strongly recommended. To date, the player has only been designed for, and tested with animations of a 16x9 aspect ratio.

Features

  • Low CPU usage while playing
  • Timeline scrubbing
  • Frame advance & reverse via buttons for mouse and touchscreen users & via keyboard left & right arrows when any element of the player has focus
  • Fullscreen ability
  • Responsive
  • One file module; contains its own CSS
  • Customizable frame path options

Example

To start working with vue-perfectlooper use the following command to install it.

$ yarn add vue-perfectlooper

The following example is going to be with non-sequential image addresses.

Import in your project

<script>
    import VuePerfectlooper from 'vue-perfectlooper'
    export default {
        components: {VuePerfectlooper},
        data: function(){
                return {
                        loop: {
                                'id': 'ghost_wins_at_candy_corn-24',
                                'poster': 'https://i.imgur.com/GraKGsu.jpg',
                                'src': [
                                        'https://i.imgur.com/GraKGsu.jpg',
                                        'https://i.imgur.com/Y1g1hiK.jpg',
                                        ...
                                ]
                        },
                }
        }
    }
</script>

Using an array of image adresses, we are specifying each frame of the play back.

See how to implement it using Vanilla Javascript here.

Component Usage:

<vue-perfectlooper v-bind="loop"></vue-perfectlooper>

In this example, there are no expectations of asset organization, as each frame path is completely specified explicitly; As a side effect of this, the number of frames does not need to be specified in this configuration. To learn more about providing frames to the player, click here.

If you would like to explore more about vue-perfectlooper , head to the project's repository on GitHub, where you will also find the source code.