素材.jpg)
-
格式
- -
大小
- -
尺寸
- -
數(shù)量
- -
標(biāo)簽
-
時(shí)間
2014-06-24 -
版權(quán)
僅限學(xué)習(xí)交流,不可商用
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種方式,我們?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)。
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)單。
推薦素材