看到這個(gè)標(biāo)題，想必大家都有興趣的齐媒，今天給大家分享一個(gè)不正經(jīng)的輸入框蒲每。廢話少說，先上效果
代碼奉上：
騷氣的input
* {
margin: 0;
padding: 0;
}
body {
font-size: 30px;
}
canvas {
position: absolute;
top: 20px;
}
div {
width: 350px;
margin: 100px auto;
position: relative;
}
input {
width: 100%;
height: 30px;
position: absolute;
background: transparent;
border: none;
border-bottom: 2px solid #a0a0a0;
outline: none;
font-size: 30px;
}
.placeholder {
display: inline-block;
position: absolute;
top: -10px;
transition: .4s;
color: #ddd;
}
請輸入內(nèi)容...
var input = document.querySelector('input');
var span = document.querySelector('.placeholder');
input.addEventListener('focus', function () {
if (input.value.length <= 0) {
span.style.transform = 'scale(.8) translate(-20px,-30px)';
animate(false);
}
});
input.addEventListener('blur', function () {
if (input.value.length <= 0) {
span.style.transform = 'none';
animate(true);
}
});
function animate(isBack) {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
if (!this.border) {
this.border = 1;
input.style.borderBottom = 'none';
}
var width = canvas.width,
height = canvas.height;
var m = Math;
var scale = 50;
var ang = 0,
value = height * .6;
var deg = m.ceil(width / m.PI * 4),
k = isBack ? -12 : 12;
input.style.borderBottom = 'none';
var t = setInterval(function () {
ang += k;
context.clearRect(0, 0, width, height);
context.beginPath();
for (var i = 0; i < deg; i++) {
context.lineTo(m.PI * i / 180 * scale, .3 * m.sin(m.PI * (i - ang) / 180) * scale / 2 + value);
}
context.stroke();
if (m.abs(ang) > width) {//動(dòng)畫完成喻括。重新繪制線條邀杏。
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.moveTo(0, value);
context.lineTo(width, value);
context.strokeStyle = '#000';
context.stroke();
clearInterval(t);
}
}, 20);
}
不得不說，html5 canvas太棒了唬血，給了前端充分的想像望蜡，結(jié)合數(shù)學(xué)，給我們意想不到的驚喜拷恨。 運(yùn)用canvas最基礎(chǔ)的API,簡單的三角函數(shù)脖律，可視化數(shù)學(xué)之美。
下面進(jìn)行技術(shù)總結(jié)：
1腕侄、通過正弦曲線生成N個(gè)點(diǎn)小泉，然后通過context.lintTo把所有的點(diǎn)連接起來芦疏，形成一個(gè)正弦曲線，我們都知道微姊，正弦曲線表達(dá)式為：y = sin(x); 主的取值為[-1,1]酸茴，如果我們在sin前面*一個(gè)系數(shù)，比如：y=4*sin(x);則表示增大波峰兢交。即上下擺動(dòng)的幅度增加了4倍薪捍。
2、canavs動(dòng)畫的基本原理：畫了擦配喳，擦了再畫酪穿。
3、不要給canvas設(shè)置width,height的樣式界逛，要用JS 動(dòng)態(tài)設(shè)置昆稿，用CSS設(shè)置的在繪制一些基本圖形的時(shí)候可能會變形纺座，大家不妨可以試試息拜。
