CSS和jQuery模拟时钟-平滑动画
我的CSS3/jQuery模拟时钟出了点小问题。
时钟指针所走的每一步，都是非常困难的。相反，我希望移动/动画是平滑的。我已经试过使用transition: all .1s了，但是当时钟指针到达顶端时，它就会乱七八糟。
我正在使用transform: rotate()来旋转每只手。每移动一次，它就旋转6度。
也许解决方案可能是，不是仅仅旋转指针，每秒钟、每分钟和每小时旋转6度，秒针每1/6秒旋转1度，分针每10秒旋转一次，时针每10分钟旋转一次。我认为它可以创建一个更流畅的手动画，但我不知道怎么做。
这是我的JavaScript代码：
$(function() {
setInterval( function() {
var seconds = new Date().getSeconds();
var sdegree = seconds * 6;
var srotate = "rotate(" + sdegree + "deg)";
$("#sec").css({ "transform": srotate });
}, 1000 );
setInterval( function() {
var hours = new Date().getHours();
var mins = new Date().getMinutes();
var hdegree = hours * 30 + (mins / 2);
var hrotate = "rotate(" + hdegree + "deg)";
$("#hour").css({ "transform": hrotate});
}, 1000 );
setInterval( function() {
var mins = new Date().getMinutes();
var mdegree = mins * 6;
var mrotate = "rotate(" + mdegree + "deg)";
$("#min").css({"transform" : mrotate });
}, 1000 );
});希望你能理解这个问题，并能帮助我:)
回答 3
Stack Overflow用户
发布于 2014-05-24 17:17:42
为手设置线性过渡：
#clock div {
-moz-transition: all 1s linear;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
transition: all 1s linear;
}为了避免指针倒转到零的奇怪行为，您应该将JS更改为在毫秒内工作。这样，旋转值(度数)只会一直递增。CSS旋转可以做到这一点：
$(function() {
var i=0;
setInterval( function() {
//get time since midnight in milliseconds
var now = new Date(),
then = new Date(
now.getFullYear(),
now.getMonth(),
now.getDate(),
0,0,0),
mil = now.getTime() - then.getTime(); // difference in milliseconds
var h = (mil/(1000*60*60));
var m = (h*60);
var s = (m*60);
//console.log(h+":"+m+":"+s);
var sdegree = (s * 6);
var srotate = "rotate(" + sdegree + "deg)";
$("#sec").css({ "transform": srotate });
var hdegree = h * 30 + (h / 2);
var hrotate = "rotate(" + hdegree + "deg)";
$("#hour").css({ "transform": hrotate});
var mdegree = m * 6;
var mrotate = "rotate(" + mdegree + "deg)";
$("#min").css({ "transform" : mrotate });
if(i>0){
$("#clock").addClass("transform");
}
i++;
}, 1000 );
});更新：
这里有一个纯粹的JS解决方案，用于平滑地扫手。它使用requestAnimationFrame对循环进行计时，因为它不使用CSS转换，所以当你将焦点返回到浏览器选项卡时，它不会出现指针必须“赶上”的奇怪行为。
//use requestAnimationFrame for smoothness (shimmed with setTimeout fallback)
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
//initialize the clock in a self-invoking function
(function clock(){
var hour = document.getElementById("hour"),
min = document.getElementById("min"),
sec = document.getElementById("sec");
//set up a loop
(function loop(){
requestAnimFrame(loop);
draw();
})();
//position the hands
function draw(){
var now = new Date(),//now
then = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0),//midnight
diffInMil = (now.getTime() - then.getTime()),// difference in milliseconds
h = (diffInMil/(1000*60*60)),//hours
m = (h*60),//minutes
s = (m*60);//seconds
//rotate the hands accordingly
sec.style.webkitTransform = "rotate(" + (s * 6) + "deg)";
hour.style.webkitTransform = "rotate(" + (h * 30 + (h / 2)) + "deg)";
min.style.webkitTransform = "rotate(" + (m * 6) + "deg)";
}
})();Stack Overflow用户
发布于 2014-05-24 16:37:46
您只需在hand元素上指定过渡持续时间。试试这个：
#clock div {
-webkit-transition-duration: 1.0s;
-moz-transition-duration: 1.0s;
-o-transition-duration: 1.0s;
transition-duration: 1.0s;
}Stack Overflow用户
发布于 2014-05-24 16:37:54
你想让第二只手(和其他所有手)平稳地移动吗？尝试将以下css添加到#sec div：
[prefix-]transition: all 1.00s linear 0.0s;这只会让你走到那里的一部分，你必须聪明地告诉转换如何旋转，因为它可能会导致12c时钟标记附近的bug。
不管它有什么价值，你可能有一个单独的setInterval(...)，它创建一个单独的new Date()并相应地更新指针。
https://stackoverflow.com/questions/23847310
复制![[Cocos Creator] 围绕物体旋转](https://ask.qcloudimg.com/http-save/yehe-4348418/c3fyjrdzlz.png)
相似问题
旋转点围绕枢轴点？
围绕原点旋转点
方法围绕一个点旋转，html画布
围绕任意点旋转SKShapeNode
围绕轴心点旋转图像
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
