繁体   English   中英

向 UIPanGestureRecognizer 添加惯性

[英]adding inertia to a UIPanGestureRecognizer

我正在尝试在有效的屏幕上移动子视图,但我也想为对象添加惯性或动量。
我已经拥有的 UIPanGestureRecognizer 代码如下。

提前致谢。

UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc] initWithTarget:self       action:@selector(handlePan:)];
[self addGestureRecognizer:panGesture];

(void)handlePan:(UIPanGestureRecognizer *)recognizer
{

    CGPoint translation = [recognizer translationInView:self.superview];
    recognizer.view.center = CGPointMake(recognizer.view.center.x + translation.x,
                                     recognizer.view.center.y + translation.y);
    [recognizer setTranslation:CGPointMake(0, 0) inView:self.superview];

    if (recognizer.state == UIGestureRecognizerStateEnded) {
        [self.delegate card:self.tag movedTo:self.frame.origin];
    }
}

再次感谢。

看看RotationWheelAndDecelerationBehaviour 有一个示例说明如何对线性平移和旋转运动进行减速。 诀窍是查看当用户结束触摸并以小减速继续在该方向上时的速度是多少。

好吧,我不是专业人士,但是,检查多个答案后,我设法制作了自己满意的代码。

请告诉我如何改进它,以及我是否使用过任何不好的做法。

- (IBAction)handlePan:(UIPanGestureRecognizer *)recognizer {

CGPoint translatedPoint = [recognizer translationInView:self.postViewContainer];
CGPoint velocity = [recognizer velocityInView:recognizer.view];

float bottomMargin = self.view.frame.size.height - containerViewHeight;
float topMargin = self.view.frame.size.height - scrollViewHeight;

if ([recognizer state] == UIGestureRecognizerStateChanged) {

    newYOrigin = self.postViewContainer.frame.origin.y + translatedPoint.y;

    if (newYOrigin <= bottomMargin  && newYOrigin >= topMargin) {
        self.postViewContainer.center = CGPointMake(self.postViewContainer.center.x, self.postViewContainer.center.y + translatedPoint.y);
    }
    [recognizer setTranslation:CGPointMake(0, 0) inView:self.postViewContainer];
}

if ([recognizer state] == UIGestureRecognizerStateEnded) {

    __block float newYAnimatedOrigin = self.postViewContainer.frame.origin.y + (velocity.y / 2.5);

    if (newYAnimatedOrigin <= bottomMargin && newYAnimatedOrigin >= topMargin) {
        [UIView animateWithDuration:1.2 delay:0
                            options:UIViewAnimationOptionCurveEaseOut
                         animations:^ {
                             self.postViewContainer.center = CGPointMake(self.postViewContainer.center.x, self.postViewContainer.center.y + (velocity.y / 2.5));
                         }
                         completion:^(BOOL finished) {
                             [self.postViewContainer setFrame:CGRectMake(0, newYAnimatedOrigin, self.view.frame.size.width, self.view.frame.size.height - newYAnimatedOrigin)];
                         }
         ];
    }
    else {
        [UIView animateWithDuration:0.6 delay:0
                            options:UIViewAnimationOptionCurveEaseOut
                         animations:^ {
                             if (newYAnimatedOrigin > bottomMargin) {
                                 self.postViewContainer.center = CGPointMake(self.postViewContainer.center.x, bottomMargin + self.postViewContainer.frame.size.height / 2);
                             }

                             if (newYAnimatedOrigin < topMargin) {
                                 self.postViewContainer.center = CGPointMake(self.postViewContainer.center.x, topMargin + self.postViewContainer.frame.size.height / 2);
                             }
                         }
                         completion:^(BOOL finished) {
                             if (newYAnimatedOrigin > bottomMargin)
                                 [self.postViewContainer setFrame:CGRectMake(0, bottomMargin, self.view.frame.size.width, scrollViewHeight)];

                             if (newYAnimatedOrigin < topMargin)
                                 [self.postViewContainer setFrame:CGRectMake(0, topMargin, self.view.frame.size.width, scrollViewHeight)];
                         }
         ];
    }
}

}

我使用了两种不同的动画,一种是默认惯性,另一种是当用户高速甩动 containerView 时。

它在 iOS 7 下运行良好。

我从接受的答案的实现中获得了灵感。 这是一个Swift 5.1 版本


逻辑:

  • 您需要计算平移手势结束时的角度变化,并在无休止的计时器中不断旋转轮子,直到速度因减速率而磨损。
  • 在计时器的每次迭代中使用某个因素(例如 0.9)不断降低当前速度。
  • 保持速度的下限以使计时器无效并完成减速过程。

用于计算减速度的主要函数:

// deceleration behaviour constants (change these for different deceleration rates)
private let timerDuration = 0.025
private let decelerationSmoothness = 0.9
private let velocityToAngleConversion = 0.0025

private func animateWithInertia(velocity: Double) {
    _ = Timer.scheduledTimer(withTimeInterval: self.timerDuration, repeats: true) { [weak self] timer in
        guard let this = self else {
            return
        }
        let concernedVelocity = this.currentVelocity == 0.0 ? velocity : this.currentVelocity
        let newVelocity = concernedVelocity * this.decelerationSmoothness
        this.currentVelocity = newVelocity
        var angleTraversed = newVelocity * this.velocityToAngleConversion * this.maximumRotationAngleInCircle
        if !this.isClockwiseRotation {
            angleTraversed *= -1
        }
        // exit condition
        if newVelocity < 0.1 {
            timer.invalidate()
            this.currentVelocity = 0.0
        } else {
            this.traverseAngularDistance(angle: angleTraversed)
        }
    }
}

handlePanGesture 函数中包含辅助函数、扩展和上述函数的使用的完整工作代码。

// deceleration behaviour constants (change these for different deceleration rates)
private let timerDuration = 0.025
private let decelerationSmoothness = 0.9
private let velocityToAngleConversion = 0.0025

private let maximumRotationAngleInCircle = 360.0

private var currentRotationDegrees: Double = 0.0 {
    didSet {
        if self.currentRotationDegrees > self.maximumRotationAngleInCircle {
            self.currentRotationDegrees = 0
        }
        if self.currentRotationDegrees < -self.maximumRotationAngleInCircle {
            self.currentRotationDegrees = 0
        }
    }
}
private var previousLocation = CGPoint.zero
private var currentLocation = CGPoint.zero
private var velocity: Double {
    let xFactor = self.currentLocation.x - self.previousLocation.x
    let yFactor = self.currentLocation.y - self.previousLocation.y
    return Double(sqrt((xFactor * xFactor) + (yFactor * yFactor)))
}

private var currentVelocity = 0.0
private var isClockwiseRotation = false

@objc private func handlePanGesture(panGesture: UIPanGestureRecognizer) {
    let location = panGesture.location(in: self)

    if let rotation = panGesture.rotation {
        self.isClockwiseRotation = rotation > 0
        let angle = Double(rotation).degrees
        self.currentRotationDegrees += angle
        self.rotate(angle: angle)
    }

    switch panGesture.state {
    case .began, .changed:
        self.previousLocation = location
    case .ended:
        self.currentLocation = location
        self.animateWithInertia(velocity: self.velocity)
    default:
        print("Fatal State")
    }
}

private func animateWithInertia(velocity: Double) {
    _ = Timer.scheduledTimer(withTimeInterval: self.timerDuration, repeats: true) { [weak self] timer in
        guard let this = self else {
            return
        }
        let concernedVelocity = this.currentVelocity == 0.0 ? velocity : this.currentVelocity
        let newVelocity = concernedVelocity * this.decelerationSmoothness
        this.currentVelocity = newVelocity
        var angleTraversed = newVelocity * this.velocityToAngleConversion * this.maximumRotationAngleInCircle
        if !this.isClockwiseRotation {
            angleTraversed *= -1
        }
        if newVelocity < 0.1 {
            timer.invalidate()
            this.currentVelocity = 0.0
            this.selectAtIndexPath(indexPath: this.nearestIndexPath, shouldTransformToIdentity: true)
        } else {
            this.traverseAngularDistance(angle: angleTraversed)
        }
    }
}

private func traverseAngularDistance(angle: Double) {
    // keep the angle in -360.0 to 360.0 range
    let times = Double(Int(angle / self.maximumRotationAngleInCircle))
    var newAngle = angle - times * self.maximumRotationAngleInCircle
    if newAngle < -self.maximumRotationAngleInCircle {
        newAngle += self.maximumRotationAngleInCircle
    }
    self.currentRotationDegrees += newAngle
    self.rotate(angle: newAngle)
}

上面代码中使用的扩展:

extension UIView {
    func rotate(angle: Double) {
        self.transform = self.transform.rotated(by: CGFloat(angle.radians))
    }
}

extension Double {
    var radians: Double {
        return (self * Double.pi)/180
    }

    var degrees: Double {
        return (self * 180)/Double.pi
    }
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM