HTML5 SVG混合图标动画特效插件

简要教程

Hybicon是一款基于HTML5 SVG和Raphaël.js的混合图标动画特效插件。Hybicon的原理是合成两个SVG图标,在鼠标滑过或鼠标点击图标的时候,SVG图标将会产生动画特效。

HTML5 SVG混合图标动画特效插件

查看演示      下载插件

安装

可以通过npm或bower来安装Hybicon插件。

$ npm install hybicon $ bower install hybicon

使用方法

使用Hybicon图标动画插件需要引入raphael.min.js和hybicon.min.js文件。

<script src="js/required/raphael.min.js"></script> <script src="js/hybicon.min.js"></script>

HTML结构

你可以通过data-hybicon属性来定义hybrid图标。

<div data-hybicon="icon1-icon2"></div>

HTML5 SVG混合图标动画特效插件

所有可用的预定义图标可以参看DEMO中的icons页面。

图标的位置可以通过data-hybicon-positioning属性来设置。

<div data-hybicon="github-star"      data-hybicon-positioning="topright|center|topleft"></div>

HTML5 SVG混合图标动画特效插件

鼠标滑过模式

通过设置data-hybicon-hovermode属性可以制作第二个图标在鼠标滑过时的动画效果。

<div data-hybicon="code-fave" data-hybicon-hovermode="show|rotate|switch"></div>

HTML5 SVG混合图标动画特效插件

鼠标点击模式

通过设置data-hybicon-clickmode属性可以制作第二个图标在鼠标点击时的动画效果。

<div data-hybicon="icon1-icon2" data-hybicon-clickmode="show|rotate|switch"></div>

HTML5 SVG混合图标动画特效插件

信息模式

可以通过data-hybicon-infomode属性来为图标添加一些信息。

<div data-hybicon="download-code"      data-hybicon-infomode="show|right-*width*"      data-hybicon-infotext="*your text*"> </div>

HTML5 SVG混合图标动画特效插件

超链接

如果需要为图标添加超链接,可以简单的使用一个<a>元素来包裹<div>元素。

<a href="documentation.html#hyperlink"><div data-hybicon="link"></div></a>

HTML5 SVG混合图标动画特效插件

高级模式

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>

HTML5 SVG混合图标动画特效插件

使用第三方图标

插件中预定义的图标都是基于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>

HTML5 SVG混合图标动画特效插件

图标的对齐方式

可以通过data-hybicon-align属性来设置图标的对齐方式。

<div data-hybicon="icons" data-hybicon-align="left|center|right""></div>

HTML5 SVG混合图标动画特效插件

图标的尺寸

可以通过data-hybicon-size属性来设置图标的尺寸。

<div data-hybicon data-hybicon-size="unit in px|'css' for responsive behaviour""></div>

HTML5 SVG混合图标动画特效插件

图标的背景颜色

如果需要为图标设置背景颜色,可以使用data-hybicon-background属性。

<div data-hybicon="github-star" data-hybicon-background="as CSS background"></div>

HTML5 SVG混合图标动画特效插件

图标的颜色

可以使用data-hybicon-color属性来为图标设置颜色。

<div data-hybicon="github-star" data-hybicon-color="as CSS color"></div>

HTML5 SVG混合图标动画特效插件

图标的边框

如果需要为图标设置边框,可以使用data-hybicon-border属性。

<div data-hybicon="github-star" data-hybicon-border="as CSS border"></div>

HTML5 SVG混合图标动画特效插件

圆角边框

如果需要为图标边框设置为圆角边框,可以使用data-hybicon-borderradius属性。

<div data-hybicon="github-star" data-hybicon-borderradius="as CSS border-radius"></div>

HTML5 SVG混合图标动画特效插件

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; }

HTML5 SVG混合图标动画特效插件

hybicon插件的官方主页为: http://hybicon.softwaretailoring.net/

来源: jQuery之家

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » HTML5 SVG混合图标动画特效插件

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址