Animate Apple Watch using the iphone

(Original: Make animations for APPLE WATCH Using iPhone Andy drizen Translator: xiaoying)

Whether you want to make a small feature like hamburger button or create a new user interface, animations are a very important part of iOS app development. One important reason is that Apple has integrated many of the usual features in Uikit and core animation libraries, making it easy for developers to implement these animations. In real-world development, some parameters can be used to control the properties of these animations (such as duration, easing, delay, repetition, auto Reserve), and Apple also offers many other animations that can be animated (for example, by assigning frame, background color, transparency, Transform), these controls can be used, and we are truly spoiled by them. So, what if we work on a platform that's not so good?

Unfortunately, Apple Watch is not enough to animate. Because of the limitations of the hardware itself (whether it's screen size or battery life), there's no UIView and Calayer on Apple Watch for developers to manipulate, which means there's no dynamic animation API. Instead, we seem to be back in the days when we need to do page flipping. Of course, we can have some control over animations, but it's completely different from what we used to do on the iphone:

Yes, we can decide whether to add animations to Wkinterfaceimage (which is equivalent to Uiimageview in WatchKit) and, if so, to determine the duration of the animation. If there is an animation, it will look for successive named files in your package (for example, Frame0.png, Frame1.png, Frame2.png, ...). ), and then play them repeatedly.

Re-create an activity Indicator for Apple watch

For me there's a problem here, and I've been so used to doing all the basic work (for example, working with animation curves and creating motion tweens) that I've been too accustomed to doing all the basics, which makes me have no experience in creating page-flipping animations. If I want to create a 150-frame animation, and want to do it a little bit more lively, I do not want to waste time to adjust the picture on the hundred frames.

There are some simple things to consider on Apple Watch like activity indicator:

I really like this lovely circle--look closely at how each ball expands and fades, as if they were the fuse that opened your app. As the momentum of each ball increases, the circle slowly accelerates. I also like the illusion that these balls are slowly squashed, like using petals to cover a flower, although in fact they are perfect circles.

Capturing frames with the iphone

As I mentioned before, most of my experience with animations over the last 5 years is on iOS, so I really don't know what else is available outside to help me. Of course, any third party software is unlikely to have a sense of the local library (for example, the elasticity of the animation will match the device, the default animation curve is how). If we can use Uikit and core Animation, we'll be able to take care of this ... Why don't you do it? Obviously in order to be able to do this, our final animation must be 60fps, we will discuss this later.

As a start, I created an animation and put it into an iphone app, which is what it looks like in the iphone simulator.

Next, I created uiviewrecorder--a simple class containing cadisplaylink, and of course some image capture/export code. It starts recording the activity indicator view at the beginning of the animation, and stops recording at the end of the animation.

After stopping, we saw some output

• RECORDED:145 's Photos

• duration:2.41957300901413 seconds

• Frames stored in: ~/library/developer/coresimulator/devices/2520dd5c-03fa-4894-a99f-9bcf5c07bde5/data/containers/ data/application/63f724d7-67fa-4d06-9993-35bf475861b0/documents/

You can see that the frame rate we get is 145/2.42 = 60 frames per second

Here are the top 28 photos of these 145 images-note that we have added the background color (via CSS) so you can see the foreground color; the background of these PNG images is transparent.

Now all we have to do is add these pictures to the images.xcassets of my Watch app, and then I'm adding a wkinterfaceimage point to them. Also, since I don't want this animation to repeat, I'll add a iboutlet to the Interfacecontroller and do this:

123456

@IBOutlet weak varimage: WKInterfaceImage!override func awakeWithContext(context: AnyObject?) {    super.awakeWithContext(context)    image.startAnimatingWithImagesInRange(NSMakeRange(1, 145), duration: 2.41, repeatCount: 1)}

Below you can see that the Apple carousel is spinning when the app starts, and then it's my own turntable-I've painted my turntable red to help you tell.

If the animations look slow or sluggish, believe me, they must be running at 60 frames per second on the device.

Summarize

1. Create animations just like on iphone apps

2. Use UIView recorder to record animations and export frames in PNG or JPG format.

3. Import your frames in the Watch app

You can download WatchKit Spinner PNG footage here.

I am still actively learning watchkit, so I may be updating this method more recently. During this period, I hope that all of you can tell me what you think, so please make positive comments.

In iOS3.0, I often say that development work is so confusing for laymen, because it takes only 5 minutes for a transparent transform or shadow animation to perform multiple transformations, and then to dynamically draw a line under a word or text for a few hours.

Interestingly, developers are not currently able to show or hide the activity indicator in Apple Watch as they wish.

This recorder does not capture the background of the animation, so we will get a good transparent output.

Animate Apple Watch using the iphone