JS小分享｜來SpriteSpin用圖片組成360°效果吧！

有時候，客戶會希望商品的呈現效果擁有360°的可以左右拖曳來仔細的查閱他們的展示商品，你也碰到了這些需求嗎~?

本篇文章頁來介紹SpriteSpin這項plugin，讓我們簡單的使用連續圖片串成一個360°效果的商品展示圖吧！

我也會在本篇中加入一個額外的小功能，點選左右的小button讓SpriteSpin增加1格格轉動的效果歐~

Step1：SpriteSpin安裝

在npm中你可以直接安裝spritespin：
  
 npm i spritespin
或是
你也可以選擇引入CDN:
<script src='https://unpkg.com/spritespin@x.x.x/release/spritespin.js' type='text/javascript'></script>

Step2：設定init

//SpriteSpin.sourceArray 是 SpriteSpin 提供的圖片陣列寫法，引用他來節省圖片一張張帶入的步驟，也可以指定初始的圖片要使用哪一張喔！
var frames = SpriteSpin.sourceArray('/images/img{frame}.png', {
   frame: [0, 33], //圖片的編號從 0~n 張的代碼
   digits: 3 // 初始圖片選用第3張呈現
});
var spin = $('#frames_canvus'); // 指定div框架
spin.spritespin({
    source: frames, // source中放入圖片的陣列
    width: 480,  // 設定SpriteSpin的寬
    height: 327,  // 設定SpriteSpin的高
});

基本上，完成上述的步驟，SpriteSpin就設定完成囉！接下來我們就來看看SpriteSpin的常見設定吧！

Step3：SpriteSpin的常見參數設定

SpriteSpin的常見參數設定：
$('.spritespin').spritespin({
    responsive: true, //RWD設定，只需要在設定中更動responsive的true值
    animate: false, //是否讓圖片自動撥放
    zoomUseClick: true, // 在plugins設定中開啟zoom效果的時候，可以選擇如何觸發zoom效果，還有zoomUseWheel以及zoomPinFrame可以選擇
    plugins: [
      '360',
      'ease', //動畫播放的滑順度，還有swipe可以選擇，這個效果像slide滑動喔
      'blur', //讓圖片擁有殘影的效果
      'zoom', //讓圖片擁有zoom In/Out的效果
      'drag'  //讓滑鼠可以點擊不放時拖曳圖片，其他還有move和wheel功能可以選擇
    ]
  });
$('.spritespin').spritespin('api').toggleZoom();// 在plugins設定中開啟zoom效果的時候，要記得加入這個設定

Step4：幫SpriteSpin加入按鈕觸發圖片切換角度的效果吧！

var frames = SpriteSpin.sourceArray('/images/img{frame}.png', {
   frame: [0, 33],
   digits: 3
});
var spin = $('#frames_canvus'),
    api;
spin.spritespin({
    source: frames,
    sense: -1,
    animate: false,
    responsive: true,
    plugins: [
      'drag',
       'ease',
      '360'
    ]
});
api = spin.spritespin("api");
$( "#prev_btn" ).click(function(){
   api.stopAnimation();
   api.nextFrame();
});
$( "#next_btn" ).click(function(){
   api.stopAnimation();
   api.prevFrame();
});

那麼以上就是本篇文章的介紹了，更多關於SpriteSpin的實作範例可以參考官網的Example中查看，希望這篇文章也能帶給需要360°圖片呈現方式的人不錯的推薦~

＊如果是使用vue開發的朋友，點擊這裡就可以看到vue的寫法囉！

那我們下篇再見吧~