标签 animation 下的文章

前几天在写一个活动页的时候发现一个你一样问题，先还原一下现场

页面中有一个地方要做一个一直旋转的动画，类似转盘的效果，很简单是不是？是的！

.rotate{
    animation: rotate 1s linear infinite;
}


@keyframes rotate{
    from{ transform: rotate3d(0,0,1,0deg) }
    to{ transform: rotate3d(0,0,1,360deg) }
}

简洁明了，有木有，还带 3D 加速，完美是不是？
然而。。。
为什么 safari 下并不动。。。。 = =!，老夫可是最新的 safari 9.1.1 呀！

额，这就尴尬了~

请教一下同事，然后试着改成了这样

@keyframes rotate{
    0%   { transform: rotate3d(0,0,1,0deg) }
    50%  { transform: rotate3d(0,0,1,180deg) }
    100% { transform: rotate3d(0,0,1,360deg) }
}

然后，诶~ 转了！
等等！！！ 为什么转的姿势这么奇怪！
你知道来回摇头是什么姿势么？没错！就是这样！转到 180 度的时候，它又返回去了！！！
你怎么还来回的转呢？！！！

看来这样子不行！
再换一个姿势试一下，google 一下，有人说是开始和结束的位置是一样的（毕竟转了 360 度嘛），所以 safari 会以为没有动，所以就不转了。

好吧，那我们换成不一样的试试

@keyframes rotate{
    from{ transform: rotate3d(0,0,1,0deg) }
    to{ transform: rotate3d(0,0,1,359deg) }
}

改成 359 度呢？

答案是： 还 TM 不行！！！

WTF！！！

然后，还有人给出答案说，再多加几个关键帧，因为加了 50% 的时候它确实转了，不过转的后半段的姿势不是我们想要的，那我们如果把它加一个关键帧，是不是就不会再转回去了呢？

@keyframes rotate{
    0%   { transform: rotate3d(0,0,1,0deg) }
    50%  { transform: rotate3d(0,0,1,180deg) }
    75%  { transform: rotate3d(0,0,1,270deg) }
    100% { transform: rotate3d(0,0,1,360deg) }
}

然后你会发现，它转起来，还是那么奇怪！！！
呵呵呵呵呵呵呵呵呵呵。。。。。。

然后，老夫又试了几种办法，最终发现有两种方法可以正常转动

一种就是不用 3D 加速，直接变成这样

@keyframes rotate{
    from{ transform: rotate(0deg) }
    to{ transform: rotate(360deg) }
}

呵呵，这样竟然。。。。。

但是我知道有些强迫症肯定还是要用 3D 加速，那么，你可以试试这样

@keyframes rotate{
    0%   { transform: rotate3d(0,0,1,0deg) }
    25%  { transform: rotate3d(0,0,1,90deg) }
    50%  { transform: rotate3d(0,0,1,180deg) }
    100% { transform: rotate3d(0,0,1,360deg) }
}

是的！就是这么奇葩！加上一个 25% 的关键帧，它喵的就正常了？！！！

至于具体是设么原因造成的，额。。。。 我真的没查到 QAQ~
我猜是 safari 的 bug 吧。。。

如果有知道的朋友，希望能留言告诉我一下，多谢了~

OK，今天就先这样吧！ 好想吸毒~ QAQ

好久没更新技术文章了，这次更新还是有点儿水。。。 没事儿，水惯了就好了，哈哈

这次这个货呢主要是最近在写一个比较好玩儿的东西，在做动画的主程序循环的时候，想起了这货 -- requestAnimationFrame， HTML5的新增函数，主要在于提高动画的执行效率，尤其是canvas和svg这种的。用起来很赞，但是兼容性嘛。。。。 呵呵。。。

so~ 这次我主要是记一下这货的兼容写法（终于进入正题了。。。）

(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) {
    var currTime = new Date().getTime();
    var timeToCall = Math.max(0, 16 - (currTime - lastTime));
    var id = window.setTimeout(function() {
        callback(currTime + timeToCall);
    }, timeToCall);
    lastTime = currTime + timeToCall;
    return id;
};
if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) {
    clearTimeout(id);
};
}());

嗯嗯，大概就是这样。。。 也没啥好细说的，简单明了

很好，水贴完成！ 走你～