APPloading圖標(biāo)素材和webAPP loading圖標(biāo)制作

app設(shè)計(jì)分為原生態(tài)的APP界面設(shè)計(jì)和HTML5開發(fā)設(shè)計(jì)的webAPP界面設(shè)計(jì)。2者之前的區(qū)別是很多，之前25學(xué)堂也分享過一些文章.

1、webAPP或手機(jī)網(wǎng)站開發(fā)設(shè)計(jì)實(shí)用小技巧分享

2、APP設(shè)計(jì)需求分析規(guī)范等。

但是2種方式，我們?cè)诓捎眉虞dloading圖標(biāo)的制作和素材也是不一樣。那么如何來制作移動(dòng)loading圖標(biāo)呢？

當(dāng)然，在原生態(tài)APP開發(fā)中，很多都是沿用系統(tǒng)自帶的loading圖標(biāo)效果。但是有些追求完美的APP設(shè)計(jì)師或者開發(fā)工程師，想要設(shè)計(jì)獨(dú)一無二的app loading圖標(biāo)效果。

這個(gè)時(shí)候就要app設(shè)計(jì)師來設(shè)計(jì)。

今天25學(xué)堂跟大家分享一套非常漂亮的手機(jī)app進(jìn)度圖標(biāo)loading圖標(biāo)。

webAPP loading圖標(biāo)素材

APPloading圖標(biāo)素材下載

 

然而webAPP loading圖標(biāo)制作需要使用圖片跟js相結(jié)合或者是純css3.有些時(shí)候可以借助于

現(xiàn)成的js庫來實(shí)現(xiàn)。今天跟大家分享的js庫是Rapha?L ?

酷站官網(wǎng)：http://raphaeljs.com/

Rapha?L是一個(gè)小的JavaScript庫，應(yīng)該在網(wǎng)頁中使用矢量圖形的簡(jiǎn)化你的工作。如果你想創(chuàng)建自己的特定的圖表或圖像裁剪和旋轉(zhuǎn)部件，例如，你可以簡(jiǎn)單輕松地實(shí)現(xiàn)它與圖書館。

Rapha?L使用SVG W3C推薦標(biāo)準(zhǔn)和VML作為創(chuàng)建圖形庫。這意味著每一個(gè)圖形對(duì)象的創(chuàng)建也是一個(gè)DOM對(duì)象，所以你可以將JavaScript事件處理程序或修改后。Rapha?我的目標(biāo)是提供一個(gè)適配器來生成矢量藝術(shù)跨瀏覽器兼容。

所以，我們?cè)趙ebapp中可以使用SVG做旋轉(zhuǎn)Loading圖標(biāo)。

使用步驟：

1、將庫導(dǎo)入你的網(wǎng)站；

2、創(chuàng)建Rapha?l對(duì)象，將SVG div容器的id傳進(jìn)去。

var paper = Raphael(divID, width, height);

3、剛生成的Rapha?l對(duì)象中創(chuàng)建你需要的元素，如下：

1

2

3

4

// Creates circle at x = 50, y = 40, with radius 10

var circle = paper.circle(50, 40, 10);

// Sets the fill attribute of the circle to red (#f00)

circle.attr("fill", "#f00");?

只需3步完成webapp loading圖標(biāo)制作。非常簡(jiǎn)單。