web-dev-qa-db-ja.com

UIButtonを360度回転

次のコードを使用して、UIButtonを360度回転させるアニメーションを実行しようとしています。

UIView.animateWithDuration(3.0, animations: {
  self.vineTimeCapButton.transform = CGAffineTransformMakeRotation(CGFloat(M_PI*2))
  self.instagramTimeCapButton.transform = CGAffineTransformMakeRotation(CGFloat(M_PI*2))
})

ただし、UIButtonはすでにその位置にあるため、360度回転しません。

UIButtonを360度回転するにはどうすればよいですか？

iosswiftuiviewuibutton
19
Nadal Alyafaie

トリックを使用できます。最初に180度で回転を開始し、次に360度で回転します。遅延のある2つのアニメーションを使用します。これを試して。

Swift 2

UIView.animateWithDuration(0.5) { () -> Void in
  button.transform = CGAffineTransformMakeRotation(CGFloat(M_PI))
}

UIView.animateWithDuration(0.5, delay: 0.45, options: UIViewAnimationOptions.CurveEaseIn, animations: { () -> Void in      
  button.transform = CGAffineTransformMakeRotation(CGFloat(M_PI * 2))
}, completion: nil)

Swift 3、4、5

UIView.animate(withDuration: 0.5) { () -> Void in
  self.settingsButton.transform = CGAffineTransform(rotationAngle: CGFloat.pi)
}

UIView.animate(withDuration: 0.5, delay: 0.45, options: UIViewAnimationOptions.curveEaseIn, animations: { () -> Void in
  self.settingsButton.transform = CGAffineTransform(rotationAngle: CGFloat.pi * 2.0)
}, completion: nil)

お役に立てれば

35
truongky

ここ で説明したように、CAAnimationを使用することもできます。このコードは、1つの完全な360回転を適用します。

Swift 3

let fullRotation = CABasicAnimation(keyPath: "transform.rotation")
fullRotation.delegate = self
fullRotation.fromValue = NSNumber(floatLiteral: 0)
fullRotation.toValue = NSNumber(floatLiteral: Double(CGFloat.pi * 2))
fullRotation.duration = 0.5
fullRotation.repeatCount = 1
button.layer.add(fullRotation, forKey: "360")

QuartzCoreをインポートする必要があります：

import QuartzCore

そして、あなたのViewControllerはCAAnimationDelegateに準拠する必要があります：

class ViewController: UIViewController, CAAnimationDelegate {

}
8
Kqtr

Swift 3：

UIView.animate(withDuration:0.5, animations: { () -> Void in
  button.transform = CGAffineTransform(rotationAngle: CGFloat(M_PI))
})

UIView.animate(withDuration: 0.5, delay: 0.45, options: .curveEaseIn, animations: { () -> Void in
  button.transform = CGAffineTransform(rotationAngle: CGFloat(M_PI * 2))
}, completion: nil)
7
Hussein Dimessi

Swift 4：アニメーションのネストされたクロージャーは、アニメーションの遅延ブロックよりも優れています。

UIView.animate(withDuration: 0.5, animations: { 
  button.transform = CGAffineTransform(rotationAngle: (CGFloat(Double.pi))) 
 }) { (isAnimationComplete) in

       // Nested Block
UIView.animate(withDuration: 0.5) { 
   button.transform = CGAffineTransform(rotationAngle: (CGFloat(Double.pi * 2)))
       }    
}
7
Krunal

Swift 4同じビューを無限に回転できるバージョン：

UIView.animate(withDuration: 0.5) {
  self.yourButton.transform = self.yourButton.transform.rotated(by: CGFloat.pi)
}

360度回転したい場合：

UIView.animate(withDuration: 0.5) {
  self.yourButton.transform = self.yourButton.transform.rotated(by: CGFloat.pi)
  self.yourButton.transform = self.yourButton.transform.rotated(by: CGFloat.pi)
}
4
budidino

CABasicAnimation（Swift 4.x）に基づく小さな拡張機能を使用できます。

extension UIButton {
    func rotate360Degrees(duration: CFTimeInterval = 1.0, completionDelegate: AnyObject? = nil) {
        let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation")
        rotateAnimation.fromValue = 0.0
        rotateAnimation.toValue = CGFloat(.pi * 2.0)
        rotateAnimation.duration = duration

        if let delegate: AnyObject = completionDelegate {
            rotateAnimation.delegate = delegate as? CAAnimationDelegate
        }
        self.layer.add(rotateAnimation, forKey: nil)
    }
}

使用方法：

たとえば、簡単なボタンの作成を開始できます。

let button = UIButton()
button.frame = CGRect(x: self.view.frame.size.width/2, y: 150, width: 50, height: 50)
button.backgroundColor = UIColor.red
button.setTitle("Name your Button ", for: .normal)
button.addTarget(self, action: #selector(buttonAction), for: .touchUpInside)
self.view.addSubview(button)

次に、セレクターを作成できます。

@objc func buttonAction(sender: UIButton!) {
        print("Button tapped")
        sender.rotate360Degrees()
}
4
Alessandro Ornano