动画的动态 UIBezierPath
Dynamic UIBezierPath for Animations
我想创建一个动画,其中对象沿 path
对其位置进行动画处理。我遇到的问题是使这个 path
动态意味着它适用于所有屏幕尺寸。
上面 gif 中的宇宙飞船最初遵循 "U" 形状 path
。
我使用这个 "U" 形状 path
并且有效,这是代码:
func animateAlongPath() {
// Create and add image to view
let myImage = UIImage(named: "myImage")!
let myImageView = UIImageView(image: myImage)
myImageView.frame = CGRect(x: 100, y: 100, width: myImage.size.width, height: myImage.size.height)
holderView.addSubview(myImageView)
// Create "U" shape path for animation (path code created in PaintCode)
let path = UIBezierPath()
path.moveToPoint(CGPointMake(59.5, 81.5))
path.addCurveToPoint(CGPointMake(66.5, 91.5), controlPoint1: CGPointMake(63.64, 84.13), controlPoint2: CGPointMake(62.62, 85.9))
path.addCurveToPoint(CGPointMake(81.5, 110.5), controlPoint1: CGPointMake(72.31, 99.88), controlPoint2: CGPointMake(75.91, 103.08))
path.addCurveToPoint(CGPointMake(109.5, 142.5), controlPoint1: CGPointMake(88.44, 119.71), controlPoint2: CGPointMake(102.39, 135.23))
path.addCurveToPoint(CGPointMake(145.5, 156.5), controlPoint1: CGPointMake(122.47, 155.76), controlPoint2: CGPointMake(129.15, 157.54))
path.addCurveToPoint(CGPointMake(237.5, 81.5), controlPoint1: CGPointMake(185.04, 153.99), controlPoint2: CGPointMake(237.5, 81.5))
let pathAnimation = CAKeyframeAnimation(keyPath: "position")
pathAnimation.path = path.CGPath // Use "U" shape path for animation
pathAnimation.calculationMode = kCAAnimationPaced
pathAnimation.timingFunctions = [CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)]
pathAnimation.duration = 1
pathAnimation.removedOnCompletion = false
pathAnimation.fillMode = kCAFillModeForwards
myImageView.layer.addAnimation(pathAnimation, forKey: nil)
myImageView.layer.position = path.currentPoint
}
问题是 UIBezierPath
不是动态的。它在 iPhone 6 设备屏幕尺寸上运行良好,但在任何其他设备尺寸上效果不佳,因为它是静态的。我尝试使用 PaintCode 创建带有变量的动态路径,但就是无法正常工作。
有什么想法吗?
PaintCode 可以使用 Frames.
生成可调整大小的代码 UIBezierPaths
将 Bezier 放入 Frame 对象中,然后设置所需的自动调整弹簧(全部灵活)。生成的代码将使用 CGRect
/NSRect
进行参数化,并将使用相对系数来计算贝塞尔点。
如果您想更深入地了解,还有一个视频教程about Dynamic Shapes。
我想创建一个动画,其中对象沿 path
对其位置进行动画处理。我遇到的问题是使这个 path
动态意味着它适用于所有屏幕尺寸。
上面 gif 中的宇宙飞船最初遵循 "U" 形状 path
。
我使用这个 "U" 形状 path
并且有效,这是代码:
func animateAlongPath() {
// Create and add image to view
let myImage = UIImage(named: "myImage")!
let myImageView = UIImageView(image: myImage)
myImageView.frame = CGRect(x: 100, y: 100, width: myImage.size.width, height: myImage.size.height)
holderView.addSubview(myImageView)
// Create "U" shape path for animation (path code created in PaintCode)
let path = UIBezierPath()
path.moveToPoint(CGPointMake(59.5, 81.5))
path.addCurveToPoint(CGPointMake(66.5, 91.5), controlPoint1: CGPointMake(63.64, 84.13), controlPoint2: CGPointMake(62.62, 85.9))
path.addCurveToPoint(CGPointMake(81.5, 110.5), controlPoint1: CGPointMake(72.31, 99.88), controlPoint2: CGPointMake(75.91, 103.08))
path.addCurveToPoint(CGPointMake(109.5, 142.5), controlPoint1: CGPointMake(88.44, 119.71), controlPoint2: CGPointMake(102.39, 135.23))
path.addCurveToPoint(CGPointMake(145.5, 156.5), controlPoint1: CGPointMake(122.47, 155.76), controlPoint2: CGPointMake(129.15, 157.54))
path.addCurveToPoint(CGPointMake(237.5, 81.5), controlPoint1: CGPointMake(185.04, 153.99), controlPoint2: CGPointMake(237.5, 81.5))
let pathAnimation = CAKeyframeAnimation(keyPath: "position")
pathAnimation.path = path.CGPath // Use "U" shape path for animation
pathAnimation.calculationMode = kCAAnimationPaced
pathAnimation.timingFunctions = [CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)]
pathAnimation.duration = 1
pathAnimation.removedOnCompletion = false
pathAnimation.fillMode = kCAFillModeForwards
myImageView.layer.addAnimation(pathAnimation, forKey: nil)
myImageView.layer.position = path.currentPoint
}
问题是 UIBezierPath
不是动态的。它在 iPhone 6 设备屏幕尺寸上运行良好,但在任何其他设备尺寸上效果不佳,因为它是静态的。我尝试使用 PaintCode 创建带有变量的动态路径,但就是无法正常工作。
有什么想法吗?
PaintCode 可以使用 Frames.
生成可调整大小的代码UIBezierPaths
将 Bezier 放入 Frame 对象中,然后设置所需的自动调整弹簧(全部灵活)。生成的代码将使用 CGRect
/NSRect
进行参数化,并将使用相对系数来计算贝塞尔点。
如果您想更深入地了解,还有一个视频教程about Dynamic Shapes。