CODEWITHSUNDEEP
swiftanimationwatchos-2
Adriana Pineda
Adriana Pineda

Reputation: 9480

watchOS2 animateWithDuration starts slow and speeds up

I'm trying to animate the width of a group in my watchOS2 application by calling animateWithDuration of WKInterfaceController class. The idea is to show the user an horizontal line which decreases its width from right to left over a period of time (something like a timer):

self.timer.setWidth(100)
self.animateWithDuration(NSTimeInterval(duration)) {
    self.timer.setWidth(0)
}

However I'm seeing that as soon as the animation starts the speed is very slow and then it increases. When the animation is about to stop (when the timer width is close to 0) the animation slows down again. I want the speed to be the same over the duration of the animation.

Has anyone had this issue before? Any help is appreciated! Thanks

Upvotes: 0

Views: 68

Answers (2)

Adriana Pineda
Adriana Pineda

Reputation: 9480

I made a simple example of the timer I wanted to animate with Core Graphics in the watchOS2 app. You can find the project here

UPDATE: Here's the code that I made:

func configureTimerWithCounter(counter: Double) {

    let size = CGSizeMake(self.contentFrame.width, 6)
    UIGraphicsBeginImageContext(size)
    let context = UIGraphicsGetCurrentContext()
    UIGraphicsPushContext(context!)

    // Draw line
    let path = UIBezierPath()
    path.lineWidth = 100

    path.moveToPoint(CGPoint(x: 0, y: 0))

    let counterPosition = (self.contentFrame.width/30)*CGFloat(counter)
    path.addLineToPoint(CGPoint(x: counterPosition, y: 0))

    UIColor.greenColor().setStroke()
    UIColor.whiteColor().setFill()
    path.stroke()
    path.fill()

    // Convert to UIImage
    let cgimage = CGBitmapContextCreateImage(context);
    let uiimage = UIImage(CGImage: cgimage!)

    // End the graphics context
    UIGraphicsPopContext()
    UIGraphicsEndImageContext()

    self.timerImage.setImage(uiimage)

}

Upvotes: 0

user4151918
user4151918

Reputation:

WatchOS 2 doesn't provide a way to specify a timing function, so the animation is limited to using the EaseInEaseOut curve (which starts out slow, speeds up, then slows down at the end).

You could try using Core Graphics to render the line, or use a series of WKInterfaceImage frames to smoothly animate the line.

Upvotes: 1

Related Questions