Hike News
Hike News

用圖片組成 360 度效果

jQuery, library

簡介

spritespin.js 是 jQuery 的插件，是會依照圖片順序輪播圖片造成像是物品 360 度轉動的動畫效果，呈現的樣子可到 官網 看看

或是加上可互動的按鈕，像是這一個例子 http://jsfiddle.net/giniedp/Xaqw5/

下載

從 NPM 下載 https://www.npmjs.com/package/spritespin

1
npm install spritespin

載入到 javascript

1
2
import SpriteSpin from 'spritespin';
var SpriteSpin = require("spritespin");

或是使用 CDN

載入前還需要連同 jQuery 一起載入才有作用

1
2
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type='text/javascript'></script>
<script src="https://unpkg.com/spritespin@x.x.x/release/spritespin.js" type='text/javascript'></script>

http://spritespin.ginie.eu/samples/#/api-fullscreen

使用

在 HTML 建立一個要應用到 SpriteSpin 元素

1
<div id='mySpriteSpin'></div>

簡單的初始化要產生 360 度動畫的圖像

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$("#mySpriteSpin").spritespin({
  // path to the source images.
  source: [
  "path/to/frame_001.jpg",
  "path/to/frame_002.jpg",
  "path/to/frame_003.jpg",
  "path/to/frame_004.jpg",
  "path/to/frame_005.jpg",
  "path/to/frame_006.jpg",
  "path/to/frame_007.jpg",
  "path/to/frame_008.jpg",
  "path/to/frame_009.jpg",
  "path/to/frame_010.jpg",
  ],
  width   : 480,
  height  : 327
});

基本上這就會看到動畫

http://spritespin.ginie.eu/howto/

用陣列載入圖片

SpriteSpin.sourceArray 是 SpriteSpin 提供的圖片陣列寫法，引用他來節省圖片一張張帶入的步驟，也可以指定初始的圖片要使用哪一張喔！ 

1
2
3
4
SpriteSpin.sourceArray('/images/rad_zoom_{frame}.jpg', {  // {frame} 是配合下一行要套陣列內的值的地方
  frame: [1,34],   // 設定圖片的第一張和最後一張
  digits: 3
})

http://spritespin.ginie.eu/samples/#/basics-source-array

用 sprite 變換

sprite 圖又稱是 雪碧圖 或 合拼圖 

1
2
3
4
5
6
7
8
9
10
11
12
13
$(function() {
  $('.spritespin').spritespin({
    
    source: '/images/bike6x6_big.jpg',  // 圖片
    width: 480,
    height: 327,
    
    // sprite 圖的設定
    frames: 34,  // 圖片內的總圖像數量
    framesX: 6,  // 水平的圖像數量
    sense: -1
  });
})

http://spritespin.ginie.eu/samples/#/basics-spritesheet

3D 效果

http://spritespin.ginie.eu/samples/#/basics-3d

除了有物品水平的 360 度轉動的動畫外，還可以再加上一個上下的轉動

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(function(){
  $('.spritespin').spritespin({
    source: SpriteSpin.sourceArray('/images/3d/sample-{lane}-{frame}.jpg', {
      lane: [0,11],  // 加上垂直於原本轉動方向另一個 360 度旋轉
      frame: [0,23],
      digits: 2
    }),
    width: 400,
    height: 225,
    
    lanes: 12,   // 垂直於原本轉動方向的 360 度圖片數量
    frames: 24,  // 水平轉動方向的 360 度圖片數量
    
    // 動畫靈敏度
    sense: 1,       // 水平方向
    senseLane: -2,  // 垂直方向

    // 位置初始
    lane: 6,
    frame: 0,
    animate: false,

    plugins: [
      '360',
      'drag'  // 這是可用滑鼠托拉產生動畫，還有依滑鼠滑動產生動畫的 'move' 和滾輪滾動的 'wheel'
    ]
  });
});

加入互動按鈕

http://spritespin.ginie.eu/samples/#/basics-source-array

1
2
3
4
5
<div id='spritespin'></div>
<button id='prev'>Prev</button>
<button id='toggle'>Toggle</button>
<button id='reverse'>Reverse</button>
<button id='next'>Next</button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var frames = SpriteSpin.sourceArray('/images/rad_zoom_{frame}.jpg', { 
    frame: [1, 34], 
    digits: 3 
});

var spin = $('#spritespin');
spin.spritespin({
    source: frames,
    width: 480,
    sense: -1,
    height: 327,
    animate: false
});

var api = spin.spritespin("api");

$('#prev').click(function(){
    api.stopAnimation();
    api.prevFrame();
});

$('#next').click(function(){
    api.stopAnimation();
    api.nextFrame();
});

$('#toggle').click(function(){
    api.toggleAnimation();
});

$('#reverse').click(function(){
    api.data.reverse = !api.data.reverse;
});

刪除動畫

1
2
3
4
5
6
// 刪除功能
$("#mySpriteSpin").spritespin("destroy")
// remove HTML leftovers
$("#mySpriteSpin").html("")
// remove any Style leftovers
$("#mySpriteSpin").attr("style", "")