如何解决使用 UIBezierPath 绘制带动画的垂直抛物线?
嗨,我正在尝试制作诸如击球之类的动画。我面临着球曲线的问题,所以它看起来像飞球。我试图做控制点,但没有运气。还想添加旋转和缩放
使用 UIBezierPath 的曲线动画代码
@IBAction func animationIcon(_ sender: Any) {
animate(view: view1,fromPoint: CGPoint(x: self.view.center.x,y: self.view.frame.height-100),toPoint: CGPoint(x: self.view.center.x+100,y: view.bounds.size.height - 400))
}
private func animate(view : UIView,fromPoint start : CGPoint,toPoint end: CGPoint){
// The animation
let duration: TimeInterval = 3.0
CATransaction.begin()
CATransaction.setCompletionBlock({
})
let animation = CAKeyframeAnimation(keyPath: "position")
let path = UIBezierPath()
path.move(to: start)
// Calculate the control points
let c1 = CGPoint(x: (end.x+start.x)/2,y: (end.y+start.y)/2)
let c2 = CGPoint(x: end.x,y: end.y)
path.addCurve(to: end,controlPoint1: c1,controlPoint2: c2)
animation.path = path.cgPath;
// The other animations properties
animation.fillMode = CAMediaTimingFillMode.forwards
animation.isRemovedOnCompletion = false
animation.duration = 2
animation.timingFunction = CAMediaTimingFunction(name:CAMediaTimingFunctionName.easeOut)
// Apply it
view.layer.add(animation,forKey:"trash")
CATransaction.commit()
}
}
旋转和缩放动画我想将所有动画合并到一个地方。
let rotate = CGAffineTransform(rotationAngle: CGFloat(Double.pi))
// initial transform
view.transform = CGAffineTransform(scaleX: 0.8,y: 0.8)
// initial spin for duration of animaton
UIView.animate(withDuration: duration,delay: 0.0,options: [.curveLinear],animations: {
view.transform = rotate;
},completion: nil)
// scaling and fading
UIView.animate(withDuration: duration/2.0,animations: {
view.transform = view.transform.scaledBy(x: 2,y: 2)
}) { (true) in
UIView.animate(withDuration: duration/2.0,animations: {
view.transform = .identity
})
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。