Html5添加SVG和Raphaël.js的混合圖標動畫特效插件教程

1、安裝
能夠經過npm或bower來安裝Hybicon插件。
$npm install hybicon
$bower install hybicon     

2、使用方法
使用Hybicon圖標動畫插件須要引入raphael.min.js和hybicon.min.js文件。
<script src="js/required/raphael.min.js"></script>
<script src="js/hybicon.min.js"></script>  

3、Html結構
你能夠經過data-hybicon屬性來定義hybrid圖標。
<div data-hybicon="icon1-icon2"></div>

圖標的位置能夠經過data-hybicon-positioning屬性來設置。
<div data-hybicon="github-star"
data-hybicon-positioning="topright|center|topleft"></div>

(1)鼠標滑過模式
經過設置data-hybicon-hovermode屬性能夠製做第二個圖標在鼠標滑過期的動畫效果。
<div data-hybicon="code-fave" data-hybicon-hovermode="show|rotate|switch"></div>  

(2)鼠標點擊模式
經過設置data-hybicon-clickmode屬性能夠製做第二個圖標在鼠標點擊時的動畫效果。
<div data-hybicon="icon1-icon2" data-hybicon-clickmode="show|rotate|switch"></div>

(3)信息模式
能夠經過data-hybicon-infomode屬性來爲圖標添加一些信息。
<div data-hybicon="download-code"
data-hybicon-infomode="show|right-*width*"
data-hybicon-infotext="*your text*">
</div>

(4)超連接
若是須要爲圖標添加超連接，能夠簡單的使用一個<a>元素來包裹<div>元素。
<a href="documentation.html#hyperlink"><div data-hybicon="link"></div></a>

(5)高級模式
Hybicon圖標默認在100X100的矩陣中工做，它的定位和動畫根據公式：centerX, centerY, size, rotate來進行。你還能夠經過data-hybicon-animtime和data-hybicon-animease屬性來設置圖標動畫的時間和easing效果。
<div data-hybicon="arrowright-arrowright"
data-hybicon-icon1init="20,50,25,0" <!-- default: "45,55,77,0" -->
data-hybicon-icon1anim="35,50,30,180" <!-- default: "45,55,77,0" -->
data-hybicon-icon2init="80,50,25,180" <!-- default: "80,20,33,0" -->
data-hybicon-icon2anim="65,50,30,0" <!-- default: "80,20,33,0" -->
data-hybicon-animtime="600" <!-- default: "200" -->
data-hybicon-animease="bounce" <!-- default: "linear" -->
data-hybicon-clickmode>
</div>

(6)使用第三方圖標
插件中預約義的圖標都是基於SVG paths來製做的，你也能夠經過data-hybicon-iconclass屬性來使用本身的圖標。
var myIcons = {
triangle: "M0,100,L100,100,L50,20,z",
rectangle: "M0,0,L100,0,L100,100,L0,100,z"
}                
<div data-hybicon-iconclass="myIcons"
data-hybicon="triangle-rectangle"
data-hybicon-clickmode="rotate">
<div>

(7)圖標的對齊方式
能夠經過data-hybicon-align屬性來設置圖標的對齊方式。
<div data-hybicon="icons" data-hybicon-align="left|center|right""></div>

(8)圖標的對齊方式
能夠經過data-hybicon-align屬性來設置圖標的對齊方式。
<div data-hybicon="icons" data-hybicon-align="left|center|right""></div>

(9)圖標的背景顏色
若是須要爲圖標設置背景顏色，能夠使用data-hybicon-background屬性。
<div data-hybicon="github-star" data-hybicon-background="as CSS background"></div>

(10)圖標的顏色
能夠使用data-hybicon-color屬性來爲圖標設置顏色。
<div data-hybicon="github-star" data-hybicon-color="as CSS color"></div>

(11)圖標的邊框
若是須要爲圖標設置邊框，能夠使用data-hybicon-border屬性。
<div data-hybicon="github-star" data-hybicon-border="as CSS border"></div>

(12)圓角邊框
若是須要爲圖標邊框設置爲圓角邊框，能夠使用data-hybicon-borderradius屬性。
<div data-hybicon="github-star" data-hybicon-borderradius="as CSS border-radius"></div>  

4、CSS樣式
hybicon圖標能夠經過CSS來設置局部樣式。
<div id="myHybicon"
data-hybicon="user-idea"
data-hybicon-hovermode="switch"
data-hybicon-infomode
data-hybicon-size="css">
</div>                
#myHybicon {
width: 222px;
height: 222px;
}
#myHybicon-svg {
background: #FFF;
border-radius: 15%;
}
#myHybicon-icon1 {
fill: #333;
}
#myHybicon-icon2 {
fill: #FFF;
stroke: #F6921E;
stroke-width: 0.5;
}
#myHybicon-info {
fill: #604c3b;
stroke: #604c3b;
stroke-width: 3;
}
#myHybicon-infotext {
fill: #FFF;
font: 11px Impact, sans-serif;
}                                                                   
         
KeyMob是一家專門從事開發者專業服務工具，他自由訂價，自自主銷售廣告，廣告互推，應用內交叉推廣。支持視頻廣告和全屏廣告等，能夠經過平臺進行交叉推廣。優勢集成方便快捷，聚合多個主流平臺，缺點是發展比較緩慢。