Advertise here




Advertise here

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Using iOS 7 UIView methods with spring damping to model real world motion

Duncan CDuncan C Posts: 9,112Tutorial Authors, Registered Users @ @ @ @ @ @ @
Apple added a new UIView method,
animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:
to iOS 7.

This method lets you easily simulate "springy" motion. It's useful in any situation where you want to create a look like something that moves to a new location and then jiggles a little bit before settling into place.

The world clock app in iOS 6 used a similar effect. Apple's engineers must have had to write custom code to do this.

Now with the new methods it's easy.

I decided to write an analog clock application as a test. As such things usually do, it turned out to be more complicated than just a few lines of code, but I'm quite pleased with the results.

You can download the project from github at this link:

ClockAnimation project on github
https://github.com/DuncanMC/ClockAnimation

The core of the program is this line:
[UIView animateWithDuration: duration
                        delay: 0
       usingSpringWithDamping: damping
        initialSpringVelocity: .8
                      options: 0
                   animations: ^
   {
     theHandView.transform = CGAffineTransformMakeRotation(newAngle);
   }
                   completion: nil
   ];

This method works very much like the other animateWithDuration:animations: family of methods, but it takes 2 new parameters, a dampingRatio and an initial velocity. The documentation on velocity is clear as mud. The way I read it, a value of 1 has the animation start out at "full speed" as if it is a linear animation that runs for the whole duration. Values less than 1 have the animation start at a slower speed. The documentation is written to assume the animation is moving an object to a new pixel position, so it talks in terms of pixels/second.
It takes a little tinkering to get the effect you want. I found a velocity of .8 gave a realistic acceleration of the clock hand.

The use of the damping value is clearer. A value of 1 makes the call revert to normal motion that decelerates smoothly with ease-in, ease-out timing. If you provide a value less than 1, the animation overshoots it's final value, then bounces back. The smaller the value, the more it overshoots, and the more it then overshoots on the way back, making the animation wobble back and forth before settling down to it's final value.

I found a velocity value of .8 and a damping value value of .2 worked well for a clock hand moving one tick. If the clock hand needs to move in a large arc (because you just started the clock) then I found it needed a higher damping value.

The program uses an arbitrary set of numbers for the labels on the clock face. In this implementation, it uses the numbers from 1 to 12. It could just as easily use roman numerals or some other string value. At first I only had the numbers 3, 6, 9, and 12, but my son complained that it needed all 12 positions.

The code steps through angles from 0 to 2•pi, using trig to calculate the positions of each number, so it was trivial to change the number of digits shown on the clock face.

The setup code divides the circle into the correct number of steps to display the number of label strings you provide. See the method awakeFromNib in WTClockView.m for the code that sets up the clock face and adds the labels for each "tick" on the clock face. If you change the array of strings, you can easily create different effects.

I made the clock hands partly transparent so you could see my company's logo through the hands (hey, If I'm gonna post demo code, I'm going to include a little advertising!)
Regards,
Duncan C
WareTo

widehead.gif
Animated GIF created with Face Dancer, available for free in the app store.

I'm available for one-on-one help at CodeMentor

Replies

  • givensurgivensur On the Information SuperhighwayPosts: 541Registered Users @ @ @
    It's interesting to see the numbers you ended up with for damping and initialSpringVelocity. As you say, the documentation doesn't really explain it, so it comes down to trial and error.

    I've been using initialSpringVelocitys anywhere in the range of 3.0 to 14.0, and dampings ranging from 0.45 to 0.8.

    To be honest, picking values for those two fields seems a lot like rolling dice until you get a roll you're happy with :)
    I make cake apps.
  • dev666999dev666999 Posts: 3,525New Users @ @ @ @ @
    givensur wrote: »
    It's interesting to see the numbers you ended up with for damping and initialSpringVelocity. As you say, the documentation doesn't really explain it, so it comes down to trial and error.

    I've been using initialSpringVelocitys anywhere in the range of 3.0 to 14.0, and dampings ranging from 0.45 to 0.8.

    To be honest, picking values for those two fields seems a lot like rolling dice until you get a roll you're happy with :)

    But isn't that always how it works, when finetuning your app? You play with it endlessly, until it looks and feels right.

  • givensurgivensur On the Information SuperhighwayPosts: 541Registered Users @ @ @
    dev666999 wrote: »
    But isn't that always how it works, when finetuning your app? You play with it endlessly, until it looks and feels right.

    To an extent sure, but this method takes that feeling to the extreme. I have about 6 or 7 different animations I've used this method in, and I still don't feel confident in my understanding of the way those two parameters interact. I get the gist of it, but I still feel like I'm completely guessing until I find two values that happen to work well for the particular situation.
    I make cake apps.
  • Duncan CDuncan C Posts: 9,112Tutorial Authors, Registered Users @ @ @ @ @ @ @
    It's not that surprising. It's basically modeling harmonics, which is fiendishly complex.

    I suggest you use velocity values of 1.0 or less. When you crank the velocity up over 1.0 you may get chaotic behavior.

    givensur wrote: »
    dev666999 wrote: »
    But isn't that always how it works, when finetuning your app? You play with it endlessly, until it looks and feels right.

    To an extent sure, but this method takes that feeling to the extreme. I have about 6 or 7 different animations I've used this method in, and I still don't feel confident in my understanding of the way those two parameters interact. I get the gist of it, but I still feel like I'm completely guessing until I find two values that happen to work well for the particular situation.
    Regards,
    Duncan C
    WareTo

    widehead.gif
    Animated GIF created with Face Dancer, available for free in the app store.

    I'm available for one-on-one help at CodeMentor
  • TanderTander South AfricaPosts: 243New Users @ @
    Thanks for this Duncan. This actually worked well for what I had in mind. I wanted to animate a UIView up / down - with a little bounce. This does the trick.
  • emilyhemingemilyheming USAPosts: 7New Users Noob
    Its really interesting and thank you so very much for sharing this this key details of Using iOS 7 UIView methods with spring damping to model real world motion. It is really helpful.
Sign In or Register to comment.