Swift

Question

我有两个按钮，连接后会显示一条带有动画箭头的线，表明它们是 connected.The 问题是箭头本身没有适当旋转以在动画时指向正确的方向。

移动时如何旋转箭头指向正确的方向？

class ViewController: UIViewController {

let line = CAShapeLayer()
let linePath = UIBezierPath()

var triangleImage = UIImage(named: "triangle" )
let startCoordinate = CGRect(x: 100, y: 100, width: 0, height: 0)

let btn1 = UIButton()
let btn2 = UIButton()

override func viewDidLoad() {
    super.viewDidLoad()

    btn1.createRectangleButton(buttonPositionX: 100, buttonPositionY: 100, buttonWidth: 80, buttonHeight: 40, buttonTitle: "", buttonTag: 0)
    btn2.createRectangleButton(buttonPositionX: 300, buttonPositionY: 400, buttonWidth: 80, buttonHeight: 40, buttonTitle: "", buttonTag: 1)

    view.addSubview(btn1)
    view.addSubview(btn2)


    let imageView = UIImageView(image: triangleImage)
    imageView.frame = CGRect(x:100, y:100, width: 20, height: 20)
    imageView.center = self.btn1.center
    view.addSubview(imageView)

    linePath.move(to: btn1.center)
    linePath.addLine(to: btn2.center)
    line.path = linePath.cgPath
    line.strokeColor = UIColor.red.cgColor
    self.view.layer.addSublayer(line)


    view.bringSubviewToFront(imageView)

    UIView.animate(withDuration: 3, delay: 0.0, options: [.repeat, .curveLinear], animations: {
        imageView.center = self.btn2.center
    }, completion: nil)
}

注意：上面的代码看起来与图片略有不同

Answer 1

试试这个旋转变换

// rotation
imageView.transform = CGAffineTransform(rotationAngle: atan2(btn2.center.y - btn1.center.y, btn2.center.x - btn1.center.x) + CGFloat.pi / 2)
// used triangle image below

Swift - 如何让动画箭头指向正确的方向？

Swift - How to make animated arrow point in right direction?

xcode

animation

cashapelayer

uibezierpath