Increase speed on automatic play

[BenComicGraphics]

Is there a way to incraese the speed on automatic playback? Thank you!

[giniedp]

Use the frameTime option. Default value is 40 which corrsponds to ~ 25fps

[BenComicGraphics]

Doesn't work. same speed

[giniedp]

Please submit an example. What options do you use?

this is the default. Spins with 25 frames per second

spritespin({
  // ...
  animate: true,
  frameTime: 40
})

this spins faster with 60 frames per second

spritespin({
  // ...
  animate: true,
  frameTime: 16
})

[BenComicGraphics]

Sure thing. What I want it to do is not animate on open, but animate on trigger, spin once, then end on it's starting frame, at a speed that is 200% faster than it currently is.

` $(function() {
  Vue.component('spritespin', {
    props: ['options'],
    template: '<div></div>',
    data: function () {
      return {
        api: null,
        data: null,
      }
    },
    mounted: function() {
      // create spritespin
      $(this.$el).spritespin(this.options)
      // access api object
      this.api = $(this.$el).spritespin('api')
      // access data object
      this.data = $(this.$el).spritespin('data')
      // watch changes and update spritespin
      this.$watch('options', (newVal, oldVal) => {
        $(this.$el).spritespin(newVal)
      })
    },
    updated: function() {
      // $(this.$el).spritespin(this.options)
    },
    beforeDestroy: function() {
      // destroy spritespin before Vue node is destroyed
      $(this.$el).spritespin('destroy')
    },
  })

  new Vue({
    el: '#threesixty',
    template: `
      <div id="threesixty">
        <button v-on:click="toggleShow">CREATE DESTROY</button>
        <button v-on:click="next">NEXT</button>
        <button v-on:click="prev">PREV</button>
        <button v-on:click="togglePlayback">TOGGLE</button>
        <button v-on:click="toggleFullscreen">FULLSCREEN</button>
        <spritespin v-bind:options="options" v-if="show" ref="spritespin"/>
      </div>
    `,
    data: {
      show: true,
      loop: false,
      options: {
   source: [
    '{{ 'M2_360-Turntable-Frame.1.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.4.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.7.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.10.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.13.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.16.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.19.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.22.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.25.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.28.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.31.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.34.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.37.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.40.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.43.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.46.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.49.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.52.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.55.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.58.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.61.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.64.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.67.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.70.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.73.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.76.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.79.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.82.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.85.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.88.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.91.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.94.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.97.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.100.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.103.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.106.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.109.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.112.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.115.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.118.png' | file_img_url:"master" }}',
    '{{ 'M2_360-Turntable-Frame.120.png' | file_img_url:"master" }}'
  ], 
   width:1280,
   height: 780,
        frameTime: 3,
        animate: true,
        loop: false,
        sense: -1
      },
    },
    methods: {
      toggleShow: function() {
        this.show = !this.show
      },
      prev: function() {
        if (this.$refs.spritespin) {
          this.$refs.spritespin.api.stopAnimation()
          this.$refs.spritespin.api.prevFrame()
        }
      },
      next: function() {
        if (this.$refs.spritespin) {
          this.$refs.spritespin.api.stopAnimation()
          this.$refs.spritespin.api.nextFrame()
        }
      },
      togglePlayback: function() {
        if (this.$refs.spritespin) {
          this.$refs.spritespin.api.toggleAnimation()
        }
      },
      toggleFullscreen: function() {
        if (this.$refs.spritespin) {
          this.$refs.spritespin.api.requestFullscreen()
        }
      },
    }
  })
})`

[giniedp]

If you don't want initial playback, do

animate: false

if you want the animation to be played only once, do

loop: false

if you want to change the playback speed, do

frameTime: 20 // this is 200% faster than original, which is 40

you can change these settings on the fly, for example before you call any api method

api.data.frameTime = 20;
api.data.loop = false;
// this will start the animation with 50 FPS and play only once
api.startAnimation();

https://stackblitz.com/edit/spritespin-example-api-usage?file=index.html