Animation does not work fluent

[confile]

I tried the following animation:

First I created a view:

    self.phoneScreen = UIImageView(image: UIImage(named: "screenBlank")!)
    self.phoneScreen?.frame = CGRectMake(0, 0, self.phoneScreen!.frame.width/2, self.phoneScreen!.frame.height/2)
    self.phoneScreen?.center = self.view.center
    self.scrollView.addSubview(self.phoneScreen!)

Then I created the animation:

let phoneScreenAnimation: IFTTTFrameAnimation = IFTTTFrameAnimation(view: self.phoneScreen!)
    self.animator.addAnimation(phoneScreenAnimation)

    phoneScreenAnimation.addKeyFrame(IFTTTAnimationKeyFrame(time: timeForPage(1), andFrame: self.phoneScreen!.frame))
    phoneScreenAnimation.addKeyFrame(IFTTTAnimationKeyFrame(time: timeForPage(2), andFrame: CGRectOffset(self.phoneScreen!.frame, self.view.frame.size.width, 0)))

The function timeForPage is based on your example.

Here is the problem. The animation is running correctly from page 1 to page 2. The problem is that is not very smooth. It shakes a bit, or lets say it vibrates a bit while running. The shaking is around the x axis while the translation is running. It looks like there is a lot of computation and that the rendering of the view could not handle painting that fast. Is there something wrong with my code or is there a better way to move a view from page 1 to page 2?

[steffimueller]

+1 I have the same problem. Is this a bug or does a workaround exist?

[Jonathan Hersh]

Probably worth trying just doubling your keyframes: multiply your return value from timeForPage by 2 and double the values you pass into -[IFTTTAnimator animate:]

[confile]

Does this mean I should double the pages as well?

[steffimueller]

@jhersh Could you please explain how to solve this issue. I have the same problem. When I make a frame animation, e.g., move a big UIView from page one to page two in a UIScrollView. The animation does not seem to be smooth. How can this be solved?

[confile]

Here is a good example: https://github.com/confile/Intro-Guide-View-for-Talk.ai

Look at the view at the top. When you move from page to page. While the animation is running the view at the top is slightly moving from left to right. The animation appears a bit fuzzy.

[steffimueller]

I still struggle with this issue too. Could anyone from the JazzHands team please make a comment on this.

I also raised a bounty: http://stackoverflow.com/questions/30656470/key-frame-animation-appears-fuzzy-when-moving-frames

[confile]

+1

[steffimueller]

@lauraskelton Could you please take a look at this issue. Thanks!

[Laura Skelton]

@steffimueller I'll look into it!

[Laura Skelton]

@steffimueller The problem is due to Retina screen displays. I'll work on getting JazzHands updated, but in the meantime, you need to double the frame rate that JazzHands is using to animate the scroll view. Here's an example of the changes you'd need to make in the example that @confile posted: https://gist.github.com/lauraskelton/11cec6a14a963a912e7f

(original version demonstrating the jiggling: https://github.com/confile/Intro-Guide-View-for-Talk.ai/blob/master/talkIntro/ViewController.m)

Here are some more details on your StackOverflow question: http://stackoverflow.com/questions/30656470/key-frame-animation-appears-fuzzy-when-moving-frames/30880549#30880549

[steffimueller]

@lauraskelton thanks for help. I look forward to see your update.

[confile]

@lauraskelton You improved it but is is still jiggling a bit.

[Laura Skelton]

@steffimueller @confile I just released JazzHands 2.0, which fixes this issue entirely by using CGFloat values in animate:, and lazily finding the in-between values as they're requested, which should completely eliminate the jiggling.

[confile]

@lauraskelton Thank you. Great job.

[confile]

@lauraskelton Works great.