我有一个“U”形的 UIBezierPath，我将其用作 myImage.layer 进行动画处理的路径。我也有一个 ScrollView 。我的目标是拥有自定义的“拉动刷新”动画。
我遇到的问题是我希望我的myImage.layer根据scrollView滚动的程度进行更新。
当 ScrollView 被下拉时，myImage.layer 会沿着“U”形路径 进行动画处理。这是我作为 UIBezierPath 创建的代码中的path。
这就是我计算scrollView下拉多远的方法:
func scrollViewDidScroll(scrollView: UIScrollView) {
let offsetY = CGFloat(max(-(scrollView.contentOffset.y + scrollView.contentInset.top), 0.0))
self.progress = min(max(offsetY / frame.size.height, 0.0), 1.0)
if !isRefreshing {
redrawFromProgress(self.progress)
}
}
这是动态更新位置的函数(它不起作用):
func redrawFromProgress(progress: CGFloat) {
// PROBLEM: This is not correct. Only the `x` position is dynamic based on scrollView position.
// The `y` position is static.
// I want this to be dynamic based on how much the scrollView scrolled.
myImage.layer.position = CGPoint(x: progress, y: 50)
}
基本上，这就是我想要的:
如果scrollView滚动为0.0，则
myImage.layer位置应为CGPoint(x: 0, y: 0)或path的起点.如果scrollView滚动是0.5(50%)，那么
myImage.layer位置应该在path的50%，我不这样做知道这里的 CGPoint 值是多少。等等...
我尝试沿着 UIBezierPath 获取 CGPoint 值，并根据 ScrollView 的百分比，将该 CGPoint 值分配给它，但不知道如何执行此操作。我也看了这个post但我无法让它为我工作。
编辑问题 1:
通过使用此扩展，我能够获得一个 CGPoints 数组，其中包含基于我的 UIBezierPath 的 10 个值:
extension CGPath {
func forEachPoint(@noescape body: @convention(block) (CGPathElement) -> Void) {
typealias Body = @convention(block) (CGPathElement) -> Void
func callback(info: UnsafeMutablePointer<Void>, element: UnsafePointer<CGPathElement>) {
let body = unsafeBitCast(info, Body.self)
body(element.memory)
}
// print(sizeofValue(body))
let unsafeBody = unsafeBitCast(body, UnsafeMutablePointer<Void>.self)
CGPathApply(self, unsafeBody, callback)
}
func getPathElementsPoints() -> [CGPoint] {
var arrayPoints : [CGPoint]! = [CGPoint]()
self.forEachPoint { element in
switch (element.type) {
case CGPathElementType.MoveToPoint:
arrayPoints.append(element.points[0])
case .AddLineToPoint:
arrayPoints.append(element.points[0])
case .AddQuadCurveToPoint:
arrayPoints.append(element.points[0])
arrayPoints.append(element.points[1])
case .AddCurveToPoint:
arrayPoints.append(element.points[0])
arrayPoints.append(element.points[1])
arrayPoints.append(element.points[2])
default: break
}
}
return arrayPoints
}
我还将上面名为 redrawFromProgress(progress: CGFloat) 的函数重写为:
func redrawFromProgress(progress: CGFloat) {
let enterPath = paths[0]
let pathPointsArray = enterPath.CGPath
let junctionPoints = pathPointsArray.getPathElementsPoints()
// print(junctionPoints.count) // There are 10 junctionPoints
// progress means how much the scrollView has been pulled down,
// it goes from 0.0 to 1.0.
if progress <= 0.1 {
myImage.layer.position = junctionPoints[0]
} else if progress > 0.1 && progress <= 0.2 {
myImage.layer.position = junctionPoints[1]
} else if progress > 0.2 && progress <= 0.3 {
myImage.layer.position = junctionPoints[2]
} else if progress > 0.3 && progress <= 0.4 {
myImage.layer.position = junctionPoints[3]
} else if progress > 0.4 && progress <= 0.5 {
myImage.layer.position = junctionPoints[4]
} else if progress > 0.5 && progress <= 0.6 {
myImage.layer.position = junctionPoints[5]
} else if progress > 0.6 && progress <= 0.7 {
myImage.layer.position = junctionPoints[6]
} else if progress > 0.7 && progress <= 0.8 {
myImage.layer.position = junctionPoints[7]
} else if progress > 0.8 && progress <= 0.9 {
myImage.layer.position = junctionPoints[8]
} else if progress > 0.9 && progress <= 1.0 {
myImage.layer.position = junctionPoints[9]
}
}
如果我非常慢地下拉 ScrollView ，myImage.layer 实际上会遵循该路径。唯一的问题是，如果我非常快地下拉 ScrollView ，那么 myImage.layer 会跳转到最后一点。难道是因为我上面写的if语句的方式？
有什么想法吗？
最佳答案
感谢@Sam Falconer 让我意识到这一点:
Your code is relying on the scrollViewDidScroll delegate callback to be called frequently enough to hit all of your keyframe points. When you pull quickly on the scroll view, it does not call that method frequently enough, causing the jump.
当我确认这一点后，他还提到:
Additionally, you will find the CAKeyframeAnimation class to be useful.
使用CAKeyfraneAnimation，我可以使用以下代码手动控制它的值:
func scrollViewDidScroll(scrollView: UIScrollView) {
let offsetY = CGFloat(max(-(scrollView.contentOffset.y + scrollView.contentInset.top), 0.0))
self.progress = min(max(offsetY / frame.size.height, 0.0), 1.0)
if !isRefreshing {
redrawFromProgress(self.progress)
}
}
func redrawFromProgress(progress: CGFloat) {
// Animate image along enter path
let pathAnimation = CAKeyframeAnimation(keyPath: "position")
pathAnimation.path = myPath.CGPath
pathAnimation.calculationMode = kCAAnimationPaced
pathAnimation.timingFunctions = [CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)]
pathAnimation.beginTime = 1e-100
pathAnimation.duration = 1.0
pathAnimation.timeOffset = CFTimeInterval() + Double(progress)
pathAnimation.removedOnCompletion = false
pathAnimation.fillMode = kCAFillModeForwards
imageLayer.addAnimation(pathAnimation, forKey: nil)
imageLayer.position = enterPath.currentPoint
}
再次感谢大家的帮助!
关于ios - 基于scrollView动态改变位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36705072/