My first jack rabbit demo code#

Add the following code before you declare the pathAnimation:And add after adding it to the bubbleImageViewвЂs layer. We will need to use CATransactions to specify a completion block for our animation. We also want to give the impression that the bubble is popping, so weвЂ™ll slightly increase its size before disappearing.

Next weвЂ™ll want to remove the bubble from our view after it has finished animating. LetвЂ™s test it out! In the words of Penny Hartz, Looks awesome! If you tap the fish quickly, you can clearly see the bezier path that our bubbles are following. For this weвЂ™re going to use CAKeyframeAnimation and itвЂ™s convenient path property. Now we need to get our bubble to animate along that path. If not, it may help to draw it out yourself. вЂ“ ox = some x on the fish вЂ“ oy = top of the fish вЂ“ ex = ox вЂ“ ey = oy + how high we want the bubble to go вЂ“ cp1x = ox вЂ“ some t вЂ“ cp1y = halfway between ox and ex вЂ“ cp2x = ox + t вЂ“ cp2x = ox + t вЂ“ cp2y = cp1y Hopefully that makes sense to you. Here are my notes from when I created the bubble animation for the ATXSC вЂњCheersвЂќ button: (If youвЂ™re an overachiever and want to do it the fancy way, you can read more about these calculations here ). Plus, IвЂ™m a programmer and that means IвЂ™m going to find the quickest and laziest way to do it, in this caseвЂ“pen and paper.

Now, I could impress you by writing out some beautiful polynomial equations to derive these control points, but letвЂ™s face itвЂ“I was on Facebook during my vector and calculus classes and I would just embarrass the both of us by trying. ( Source ) PerfectвЂ“it already looks like the shape of the path we need. You can then use control points to define Bezier curves to your path. An UIBezierPath can be used to create a simple shape point-by-point using the moveToPoint and the addLineToPoint methods. For that, weвЂ™re going to use UIBezierPath. So how can we do this? Well first we need to create our zigzag path.

So letвЂ™s make it float, shall we? We could just make our bubbles move north on the Y-axis, but thatвЂ™s not really how bubbles float, is it? They float in a rounded zigzag motion.

Right now all that method does is add a bubble to the view right above the fish. (I got my fish asset from and my bubble image from here.) This will create a fish in the middle of our view controller with a gesture recognizer that will call createBubble when it is tapped. Create a new Xcode project and in your initial view controller, add the following code: So today IвЂ™m here to share a little of the bubble obsession by showing you how itвЂ™s done. In fact, I was so dedicated to the bubbles cause, I created a small library called JRMFloatingAnimation, which allows you to fully customize вЂњfloatingвЂќ image views to animate whatever your heart desires: The rest of the Jackrabbit team probably fully regrets the decision to put me in charge, as I have talked about nothing other than bubbles for the last three months and have totally turned into that fish from Finding Nemo. In fact, the first review we got was dedicated solely to the bubbles: I was given the task of coming up with an animation to illustrate when people вЂњcheersвЂќ a company.

My first jack rabbit demo professional#

Working with our amazing UI professional Patrick Adiaheno, we designed a вЂњCheersвЂќ button inspired by PeriscopeвЂ™s like functionality. For this yearвЂ™s ATX Startup Crawl, we wanted to do something really fun for our users to give them real-time information about popular stops.