1
Мне нужно сделать анимированную рамку на div. Я понял, как это сделать с наложением холста и некоторым javascript, но сейчас он очень неуклюж. Нужно ли все-таки выполнить эту же анимацию с анимацией CSS? См. Этот jsfiddle http://jsfiddle.net/L8ov2fk0/7/CSS Анимированная рамка
EDIT: Много замечательных ответов! Некоторых я нашел, что работаю над этим, а другие нет. Проблема, с которой я столкнулся, заключается в том, что точная анимация в моей скрипке - это то, чего хочет клиент, и я никогда не мог подстроить все, что я нашел, во что-то даже близкое к этому.
И мой код
HTML
<div id="buttona" class="button" >Button A</div>
<div id="buttonb" class="button" >Button B</div>
<canvas id="bordera"></canvas>
<canvas id="borderb"></canvas>
CSS
.button{
padding:10px;
border:1px solid red;
}
#buttona{
position:absolute;
}
#buttonb{
position: absolute;
left:100px;
}
#bordera{
position:absolute;
width:81px;
height:40px;
pointer-events:none;
}
#borderb{
position: absolute;
left:100px;
width:80px;
height:40px;
pointer-events:none;
}
Javascript
$('body').on('click', '#buttona', function(){
DrawButtonBorder("bordera");
});
$('body').on('click', '#buttonb', function(){
DrawButtonBorder("borderb");
});
/*animated borders*/
function Point(x, y, width, height, half) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.half = half;
}
Point.prototype.increment = function() {
if (this.half == "upper") {
if (this.y > 0 && this.x == 0)
this.y--;
else if (this.y == 0 && this.x < this.width)
this.x++;
else if (this.y < this.height/2 && this.x == this.width)
this.y++;
}
else {
if (this.y < this.height && this.x == 0)
this.y++;
else if (this.y == this.height && this.x < this.width)
this.x++;
else if (this.y > this.height/2 && this.x == this.width)
this.y--;
}
}
animatedBorder = null;
borderDrawn = "";
function DrawButtonBorder(id) {
if (borderDrawn != id) {
borderDrawn = id;
CancelButtonBorder();
ClearButtonBorder("bordera");
ClearButtonBorder("borderb");
var speed = 1;
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
var style = getComputedStyle(canvas);
var width = parseInt(style.width.replace("px", ""));
width = parseInt(width/speed);
var height = parseInt(style.height.replace("px", ""));
height = parseInt(height/speed);
context.canvas.width = width;
context.canvas.height = height;
var middle = parseInt(height/2);
var a = new Point(0, middle, width, height, "upper");
var b = new Point(0, middle, width, height, "lower");
function draw() {
//upper half
context.strokeStyle = '#D7A95A';
context.moveTo(a.x, a.y);
a.increment();
context.lineTo(a.x, a.y);
context.stroke();
//lower half
context.strokeStyle = '#D7A95A';
context.moveTo(b.x, b.y);
b.increment();
context.lineTo(b.x, b.y);
context.stroke();
if (a.y > middle && b.y < middle)
return;
animatedBorder = requestAnimFrame(draw);
}
draw();
}
}
function ClearButtonBorder(id) {
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
context.clearRect(0,0,context.canvas.width, context.canvas.height);
}
function CancelButtonBorder() {
cancelAnimFrame(animatedBorder);
}
var requestAnimFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000/60);
};
var cancelAnimFrame = window.cancelAnimationFrame ||
window.webkitCancelAnimationFrame ||
window.mozCancelAnimationFrame;
Не думаю CSS анимации возможно, но вы можете создать анимированный gif, который является пикселем, большим, чем ваша кнопка (при условии, что они «статический размер»), который вы делаете видимым при щелчке –
Можно рисовать линию с помощью CSS - используя штрих-dasharray и штрих-dashoffset на svg. – Shikkediel
будет ли это намеком на ответ? http://codepen.io/gc-nomade/pen/IGliC –