做一個360度看車的效果玩玩（web）

前幾天在 Lexus 官網看到有這樣的一個效果：http://www.lexus.com.cn/models/es/360

於是順手打開控制台看了下他們是怎么做的，發現使用的技術還是比較簡單的，通過背景圖的切換來完成全景的效果。

心血來潮自己做了一個優化一點的版本，先上 DEMO 和 源碼。（由於圖片資源較大，加載時間較長，請耐心等待）

 

接下來分享下我的制作流程。首先觀察下他們的圖片鏈接：

http://img.lexus.do2014.cn/images/es/car/spoke10a/Sonic_Quartz/36.jpg!t1024x450.jpg

標紅的位置為圖片的序號，在拖拽時通過改變 url 來完成全景的效果。每款車的每個顏色都有60張圖，序號為0-59。

現在想把這60張圖下載下來，一張張扣自然太low，小小的運用下 node.js 幫我們實現這個需求：依次請求圖片，並通過 fileSystem 將圖片寫到本地。

download.js

var http = require("http"),
    fs = require("fs");

var imgPath = 'http://img.lexus.do2014.cn/images/es/car/spoke10a/Red_Mica_Crystal_Shine/';

fs.mkdir('./downloadImg', (err) => {
    if (err && err.code != 'EEXIST') return;
    downloadImg();
});

function downloadImg() {
    for (var i = 0; i < 60; i ++) {
        var url = imgPath + i + ".jpg!t1024x450.jpg";
        // console.log(url);
        ((i) => {
             http.get(url, (res) => {
                var out = fs.createWriteStream('./downloadImg/'+i+'.jpg', {
                    encoding: 'binary'
                });

                res.on('data', (chunk) => {
                    out.write(chunk);
                });

                res.on('end', () => {
                    console.log('Image_'+i+' download complete.');
                    out.end('');
                });
            });
        })(i);
    }
}

$ node download.js

這樣60張圖片就已經下載下來了，接下來想通過 CSS 精靈來實現這個圖片切換的效果，所以需要將這些圖片拼成一整張，我這里使用 sketch 來完成。

在同等的服務器條件下，一張肯定要比多張效率高。不過即使是壓縮之后的圖，也有着上M的大小。如果有 CDN 進行加速的話，那是再好不過的了。

准備工作已經完成了，接下來進行代碼的編寫。

 

首先創建一個方法用來生成矩陣，矩陣中用來保存每輛車在雪碧圖中的坐標。

{   
　　// ...
　　I: 0,
　　J: 0,
　　rowNum: 10,
　　colNum: 6,
　　max: 60,
　　conWidth: 1024,
　　conHeight: 450,
   //...
　　createMatrix() {
        this.matrix = [];

        var arr = [];

        for (var i = 0; i < this.max; i ++) {
            var position = '-' + this.I * this.conWidth + ' -' + this.J * this.conHeight;    
            arr.push(position);

            this.I ++;

            if ((i+1) % this.colNum == 0) {
                this.matrix.push(arr);
                arr = [];
                this.I = 0;
                this.J ++;
            }
        }
        // console.log(this.matrix);
        this.I = 0;
        this.J = 0;
    }
}

生成的坐標矩陣如下

由於這些坐標最后是應用於 backgroundPostion 屬性上的，所以直接在前面添加了 “-” 號。

接下來創建一個改變圖片行列序號的方法，同時將坐標設置到 backgroundPosition 上。

{
       //...
    this.$container: document.querySelector('#container'),
    this.I: 0,
    this.J: 0,
    this.rowNum: 10,
    this.colNum: 6,
       //...
    rotate(type) { //clockwise: 順時針, anti: 逆時針 
        if (type == 'clockwise') {
            this.I ++;

            if (this.I >= this.colNum) {
                this.I = 0;
                this.J ++;
                if (this.J >= this.rowNum) this.J = 0;
            }

        } else if (type == 'anti') {
            this.I --;

            if (this.I < 0) {
                this.I = this.colNum - 1;
                this.J --;
                if (this.J < 0) this.J = this.rowNum - 1;
            }
        }
        // console.log(this.I, this.J);
        this.changePosition();
    },

    changePosition() {
        // console.log(this.matrix[this.J][this.I]);
        this.$container.style.backgroundPosition = this.matrix[this.J][this.I];
    },
}

最后使用 hammer.js 來完成手勢的操作

var hammer = new Hammer(this.$container);

hammer.on('pan', function(e) {
　　if ([向右拖動]) {
　　　　this.rotate('anti');
　　} else {
　　　　this.rotate('clockwise');
　　}
});

這樣，一個全景觀車的效果就完成了。

 

感謝你的瀏覽，希望有所幫助。