저는 HTML5에서 캔버스를 사용하여 일렁 거리는 달 효과를 얻으려고합니다. 맥동 효과가 있지만 requestAnimation 함수가 정의한 순환 경로를 따라 프레임을 업데이트하지 않는 것처럼 보입니다. 여기에 자바 스크립트가 있습니다.원형 경로 애니메이션이 펄싱 동작과 함께 작동하지 않습니다.
window.requestAnimFrame = function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame
||
window.mozRequestAnimationFrame || window.oRequestAnimationFrame
|| window.msRequestAnimationFrame ||
function(a) {
window.setTimeout(a, 1E3/60)
}
}();
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
function Ball(radius, color) {
if (radius === undefined) {
radius = 40;
}
if (color === undefined) {
color = "#ff0000";
}
this.x = 0;
this.y = 0;
this.radius = radius;
this.rotation = 0;
this.scaleX = 1;
this.scaleY = 1;
this.lineWidth = 1;
}
Ball.prototype.draw = function(context) {
context.save();
context.translate(this.x, this.y);
context.rotate(this.rotation);
context.scale(this.scaleX, this.scaleY);
context.lineWidth = this.lineWidth;
context.fillStyle = "#e50000";
context.beginPath();
//x, y, radius, start_angle, end_angle, anti-clockwise
context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);
context.closePath();
context.fill();
if (this.lineWidth > 0) {
context.stroke();
}
context.restore();
};
window.onload = function() {
var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d'),
ball = new Ball(),
angle = 0,
centerScale = 1,
range = 0.5,
speed = 0.02,
pathX = canvas.width/2,
pathY = canvas.height/2,
pathRadius = 150,
pathAngle = 0;
ball.x = Math.cos(pathAngle) * pathRadius + pathX;
ball.y = Math.sin(pathAngle) * pathRadius + pathY;
(function drawFrame() {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
ball.scaleX = ball.scaleY = centerScale + Math.sin(angle) * range;
angle += speed;
pathAngle += speed;
ball.draw(context);
}());
};
가 CodePen에 대한 링크입니다 : http://codepen.io/WriterState/pen/EyKPpq?editors = 0110 – WriterState