4种基于SVG的Material Design风格按钮点击波特效

svgripples是一款效果非常炫酷的基于SVG的Material Design风格按钮点击波特效。该点按钮击波特效共有4种不同的效果，分别为：圆形波，圆形渐变波，多边形波和线性渐变波。特效中通过TweenMax.js和SVG相结合，制作出邻人惊叹的点击波效果。

在线预览   源码下载

制作方法

HTML结构

该按钮点击波使用的SVG元素的代码非常简单。SVG中使用了<symbol>元素-它用于定义可重复使用的符号。并在<symbol>元素放置需要的SVG图形。


1

2

3

4

5

6

7

8

<div style="height: 0; width: 0; position: absolute; visibility: hidden;" aria-hidden="true">

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg"

            xmlns:xlink="http://www.w3.org/1999/xlink" focusable="false">

    <symbol id="ripply-scott" viewBox="0 0 100 100">

      <circle id="ripple-shape" cx="1" cy="1" r="1"/>

    </symbol>

  </svg>

</div>              

为了使用上面定义的<symbol>元素，在按钮上使用了<use>元素-它可以在SVG图像中多次重用一个预定义的SVG图形。它通过xlink:href属性来指向前面定义的<symbol>元素的ID。


1

2

3

4

5

6

<button id="js-ripple-btn" class="button styl-material">

  Click for Ripple

  <svg class="ripple-obj" id="js-ripple">

    <use width="100" height="100" xlink:href="#ripply-scott" class="js-ripple"></use>

  </svg>

</button>               

CSS样式

点击波的主要CSS样式只有两句：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

.ripple-obj {

  height: 100%;

  pointer-events: none;

  position: absolute;

  top: 0;

  left: 0;

  z-index: 0;

  width: 100%;

  fill: #0c7cd5;

}

.ripple-obj use {

  opacity: 0;

}              

由于只需要在.ripple-obj的父元素上产生点击波效果，所以使用pointer-events: none;来阻止SVG上产生点击波。

点击波在开始的时候是不可见的，所以设置它的透明度为0。另外还将波形对象放置在按钮的左上角位置。

JAVASCRIPT

为了制作动态按钮点击波效果，特效中使用GreenSock的TweenMax库来制作SVG动画。rippleAnimation()函数是整个点击波效果的主要动画函数。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

function rippleAnimation(event, timing) {

    var tl           = new TimelineMax();

        x            = event.offsetX,

        y            = event.offsetY,

        w            = event.target.offsetWidth,

        h            = event.target.offsetHeight,

        offsetX      = Math.abs( (w / 2) - x ),

        offsetY      = Math.abs( (h / 2) - y ),

        deltaX       = (w / 2) + offsetX,

        deltaY       = (h / 2) + offsetY,

        scale_ratio  = Math.sqrt(Math.pow(deltaX, 2) + Math.pow(deltaY, 2));

    tl.fromTo(ripple, timing, {

      x: x,

      y: y,

      transformOrigin: ‘50% 50%‘,

      scale: 0,

      opacity: 1,

      ease: Linear.easeIn

    },{

      scale: scale_ratio,

      opacity: 0

    });

    return tl;

  }

  return {

    init: function(target, timing) {

      var button = document.getElementById(target);

      button.addEventListener(‘click‘, function(event) {

        rippleAnimation.call(this, event, timing);

      });

    }

  };

})();               

时间： 2024-12-17 02:24:19

4种基于SVG的Material Design风格按钮点击波特效的相关文章

纯CSS Material Design风格按钮

其实Material Design的扁平化icon按钮,这类型的按钮往往只利用几何色块的变化,就能抓住使用者的眼光,并且从几何形状中明白按钮的含意,这也是Material Design非常强调的设计理念和精髓. 这里推荐一下我的前端学习交流扣qun:731771211 ,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程.自己整理了一份2019最全面前端学习资料,从最基础的HTML+CSS+JS[炫酷特效,游戏,插件封装,设计模式]到移动端HTML5的项目实战的学习资料都有整理,送给每一位前

基于Vue的Material Design UI库 Vue-Carbon

vue-carbon,基于 vue 开发material design 风格的移动端 WEB UI 库, 设计资源参考 CARBON FrameWork7(app开发公司). 安装 目前只使用 npm 安装,和使用 webpack 项目的应用(基础教程qkxue.net) npm install vue-carbon --save import Vue from 'vue' import VueCarbon from 'vue-carbon' Vue.use(VueCarbon) 简单使用 例如

基于React Native的Material Design风格的组件库 MRN

基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://github.com/binggg/mrn 示例应用在线演示 https://appetize.io/app/j48zj9r83cetpd1mhg4g8buc4w 示例应用下载 https://github.com/binggg/MaterialReactNative/blob/master/androi

创建Material Design风格的Android应用--应用主题

昨天正式发布了android 5,同时android developer网站也更新了,增加了创建Material Design风格的Android应用指南,也更新了Support Library,在support library增加了一些Material Design风格的控件和动画等,这里给大家简单介绍一下怎样开发material design风格的Android应用. android 5使用Material Design风格 android提供了三种Material Design风格Them

Android控件使用 — 12个Material Design风格控件的使用

项目在GitHub上的地址: https://github.com/Hebin320/MaterialDesignUse 1.AppBarLayout.ToolBar AppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件,它是为了Material Design设计的App Bar,支持手势滑动操作. AppBarLayout必须作为Toolbar的父布局容器,也可以配合CoordinatorLayout一起使用. ToolBar是谷歌新推出的代替Action

Material Design风格SearchView实现语音搜索功能《IT蓝豹》

Material Design风格SearchView实现语音搜索功能 Material Design风格SearchView实现语音搜索功能,弹出录音对话框效果也很漂亮.但是这份代码支持在5.0以上的手机才能看到效果.VoiceActivity 类实现录制语音功能.自定义一个MaterialSearchView searchView.setOnQueryTextListener(new MaterialSearchView.OnQueryTextListener() {           

打造Material Design风格的TabBar

自从Material Design问世以来, 各种Material Design风格的控件层出不穷, 尤其是google家的几个APP更是将Material Design应用到了极致. 最近在使用google photos的时候发现这款软件的Tabbar做的非常不错, 内容突出, Material Design风味很浓, 再者, 我还没有做过一个Material Design风格的Tabbar, 所以萌生了仿照一个google photos这种tabbar的念想, 今天我们就来一步步的去实现一下

开发Google Material Design风格的WPF程序

今天在网上看到了一个Material Design风格的WPF皮肤,看上去还是挺不错的 这个项目是开源的,感兴趣的朋友可以下载试下: https://github.com/ButchersBoy/MaterialDesignInXamlToolkit. 另外,该作者还实现了一个WinForm版本的:https://github.com/IgnaceMaes/MaterialSkin,不过貌似没有WPF版实现的好

Android开发实战之拥有Material Design风格的抽屉式布局

在实现开发要求中,有需要会使用抽屉式布局,类似于QQ5.0的侧滑菜单,实现的方式有很多种,可以自定义控件,也可以使用第三方开源库. 同样的谷歌也推出了自己的侧滑组件——DrawLayout,使用方式也很简单,配合着toolbar有着不一样的滑动效果,所以推荐大家使用. 如下是效果图,是不是更具交互性,更加酷炫? **首先是XML** drawlayout分为两部分:侧滑界面和内容界面,所以drawlayout中应该有两个布局,在侧滑的布局中设置属性:android:layout_gravity=