9

さて、これは私にとって本当にイライラしています。まず、私の質問のフレーミングが間違っている場合は、編集してください（そう思う場合）...そして、私の画面で説明されているので、それでも私はそれを望んでいます要素は特定の形状のままで、アニメーションと一緒に回転しないようにする必要があります。本当に愚かなものが欠けていますか？

私が欲しいもの：

私が欲しいもの

何が起こっているのか：

何が起こっていますか

jQueryソリューションを歓迎します（しかし、CSS3ソリューションが大好きです）

注：要素の不透明度を上げないでください。1はペイントを使用して作成され、その他はPhotoshopで作成されます。正方形は正方形として回転する必要があります。

HTML

<div><span></span></div>

CSS

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

div {
    width: 50px;
    height: 50px;
    animation: round_round 3s linear infinite;
    margin: 50px auto 0;
    transform-origin: 50% 150px;
    background-color: #8FC1E0;
}

span {
    display: inline-block;
    margin: 5px;
    height: 5px;
    width: 5px;
    background: #c00000;
}

デモ

4

2 に答える 2

17

絶対に配置し、変更せず、そのtransform-originままにしておき50% 50%ます。

次に、要素を回転させ、半径の値で変換してから、最初の回転をキャンセルします。ここで、連鎖変換がどのように機能するかを確認できます。

@keyframes rot {
  0% { transform: rotate(0deg) translate(150px) rotate(0deg); }
  100% { transform: rotate(360deg) translate(150px) rotate(-360deg); }
}

デモ

于 2012-12-27T16:36:58.757 に答える
2

CSS 3アニメーションを使用したくない人のために（互換性の理由などで）純粋なJavaScript実装を作成しました。

デモ

// requestAnim shim layer by Paul Irish
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function(/* function */ callback, /* DOMElement */ element) {
            window.setTimeout(callback, 1000 / 60);
          };
})();

function CircleAnimater(elem, radius, speed) {
    this.elem = elem;
    this.radius = radius;
    this.angle = 0;
    this.origX = this.elem.offsetLeft;
    this.origY = this.elem.offsetTop;
    
    this.shouldStop = false;
    this.lastFrame = 0;
    this.speed = speed;
}

CircleAnimater.prototype.start = function () {
    this.lastFrame = +new Date;
    this.shouldStop = false;
    this.animate();
}
    
CircleAnimater.prototype.stop = function () {
    this.shouldStop = true;
}
    
CircleAnimater.prototype.animate = function () {
    var now    = +new Date,
        deltaT = now - this.lastFrame;
    
    var newY = Math.sin(this.angle) * this.radius;
    var newX = Math.cos(this.angle) * this.radius;

    this.elem.style.left = (this.origX + newX) + "px";
    this.elem.style.top = (this.origY + newY) + "px";
    this.angle += (this.speed * deltaT);

    this.lastFrame = +new Date;

    if (!this.shouldStop) {
        var $this = this;
        requestAnimFrame(function () {
            $this.animate();
        });
    }        
}
于 2012-12-27T16:58:52.637 に答える