绘制一个 Material Design 风格的按钮

前端
By Losses Don

就在几天前，玲奈这个混蛋捏我，叫我捏一个google design的页面出来，之后我就跟个抖M似的屁颠屁颠给人家捏去了，Google Design里面那个按一下贴片就会出现个圆圈逐渐扩大的圆这个特效挺讨巧的，做过之后觉得有必要写个笔记，所以就写了(ゝ∀･) 实现思路很简单，需要动画的元素加个class，之后用JQ加个Listener，当鼠标按下去的时候就触发动画。

先把动画定义出来（私有属性自己去打|ωﾟ)—-c<` дﾟ)!）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@keyframes circleHuge
{
    0% {
        transform:scale(1);
        opacity:1;
    }
    95% {
        transform:scale(100);
        opacity:1;
    }
    100% {
        opacity:0;
    }
}

之后把特效的容器定义了。

1
2
3
4
.balabalabala{
    position:relative;
    overflow:hidden;
}

这里的relative是为了让子元素的absolute属性能相对.balabalabala定位（我是好好给元素起名字会死星人(:3 」∠ )）

之后来定义下特效的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.light_effect{
    left:25px;
    top:25px;
    width:50px;
    height:50px;
    margin:-25px 0 0 -25px;
    border-radius:50%;
    background:rgba(255,255,255,0.5);
    position:absolute;
    display:none;
    transition: all 0.5s ease-in;
    transition: left 0;
    transition: top 0;
}

.light_effect_action{
    animation: circleHuge 0.6s;
}

解释下为啥margin是-25px，这么做是为了让div的0,0坐标为元素的中心，这样一会触发动画的时候给元素定位就不用再算一遍了。

写到这大家应该能看明白实现的原理了，就是当鼠标点击的时候给.light_effect丢个.light_effect_action的class进去，这样就能激发动画了。

css到此结束，上jq

先把特效元素加注进去：

1
$(".balabalabala").append('<div class="light_effect"></div>');

用js的原因之前说过，我是洁癖，不想在html里放影响阅读的东西 (:3 」∠ )

接下来的代码用户控制效果的出现。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(".balabalabala").on("click", function(evt) {
    var effectX = evt.clientX - ($(this).offset().left - $(document).scrollLeft());
    var effectY = evt.clientY - ($(this).offset().top - $(document).scrollTop());
    $(this).children(".light_effect").css({
        "display": "block",
        "left": effectX,
        "top": effectY
    });
    $(this).children(".light_effect").addClass("light_effect_action");

//FLAG

$(them).children(".light_effect").hide();
$(them).children(".light_effect").removeClass("light_effect_action");
});

解释下，effectX和effectY是拿来算当前鼠标点击的位置相对其容器的坐标的。

clientX和clientY返回的是相对页面左上角的鼠标指针坐标，offset()返回的是当前元素相对文档左上的坐标，之后scroll返回的是页面拖动的偏移量是多少。

这个公式你就当黑科技拿去用吧，再回来看我自己都有点看不懂( ﾟДﾟ)σ

还有个问题，如果你是给一个超链接按钮定义了特效的话点一下立刻就跳页了，用户根本看不到我们的特效，这个时候要怎么办呢？

亲，给我在页面里停半秒σ`∀´)σ

把a标签的href属性改一个，比如“productURl”，之后用一段代码去容个错：

1
2
if (!$(this).attr("productURl") || $(this).attr("productURl") === "")
    $(this).attr("productURl", defaultProductURl);

说下要容错的原因：js操作不存在的变量会报错的(ﾟ∀。)

接下来把上一段代码的FLAG往下的内容替换成这个：

1
2
3
4
5
6
7
var them = this;
setTimeout(function() {
    $(them).children(".light_effect").hide();
    $(them).children(".light_effect").removeClass("light_effect_action");

    window.location.href=$(them).attr("productURl");
}, 500);

完事了，很简单的效果就实现了，但是亲你造么，当时算那个定位公式我算了一个小时哇(;´༎ຶД༎ຶ`)

Comments

No comments here,

Why not write something?