用 Swift 语言写一个地图坐标弹跳动画

模仿“一号专车”写一个坐标图标弹跳动画,实现效果如下:(录制有点闪小心狗眼)

分析这个动画如下:
1.easeIn或者linear被抬高约30像素
2.被弹性放下

然后开始了狗血的 Swift animation 之旅。

注意:因为我刚刚开始学习 iOS 开发,动画亦是刚刚接触,下面的方式仅仅是为了完成需求,下面的文章并没有解释动画实现的细节,也不太可能是实现这个需求的最好方式,仅仅是“实现了”而已,只作为一个参考。我还会继续探索里面的细节,以后在博客里更新。

第一步,实现

先抛开那些蛋疼的物理效果不谈,先把它抬起,然后放下吧。。。(渣渣博客园竟然没有 Swift 语法高亮)

let animation = CABasicAnimation(keyPath: "position.y")
animation.autoreverses = true // 跑上去之后,给我滚回来
animation.duration = 0.2
animation.byValue = -30
locateImage.layer.addAnimation(animation, forKey: "bounce")

效果如下:

恭喜我已经完成了“嘀嘀打车”的效果模拟,万里长征第一步。

第二步,美化

直上直下意思虽然到了,但是感觉不对,我首先非常逗比地加了这么一行代码:

animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)

这显然是。。没有任何卵用的。。典型的撞大运编程。。

于是我开始潜心修炼。。。

其实我们刚才已经很冷静的分析过了,一个linear动画,一个弹性放下,linear自然是好实现,关键问题在于后面那个。

一番 Google 无果后,开始认真学起了 CABasicAnimation,发现有个开源类库叫做 RBBAnimation。

如同孙猴子发现了大蟠桃,赶紧通过 CocoaPods 放入项目。在 pod install 完成后,创建了 xx-Bridging-Header.h 文件,内容如下:

#include <RBBAnimation/RBBAnimation.h>

然后在 .swift 文件中引入:

import RBBAnimation

再写弹跳下坠的动画

let animationDown = RBBTweenAnimation(keyPath: "position.y")
animationDown.fromValue = self.locateImage.layer.position.y
animationDown.toValue = self.locateImage.layer.position.y + 30
animationDown.easing = RBBEasingFunctionEaseOutBounce;
animationDown.duration = 0.7
self.locateImage.layer.addAnimation(animationDown, forKey: "bounceDown")

效果如下:

请不要在意最后一秒小标又滚回原位,是 CABasicAnimation 的正常表现。。

第三步,整合完善

现在把两段动画站在一起,并且加上位移的代码

CATransaction.begin()

let animationUp = CABasicAnimation(keyPath: "position.y")
animationUp.duration = 0.2
animationUp.fromValue = locateImage.layer.position.y
animationUp.toValue = locateImage.layer.position.y - 30

CATransaction.setCompletionBlock({
    let animationDown = RBBTweenAnimation(keyPath: "position.y")
    animationDown.fromValue = self.locateImage.layer.position.y
    animationDown.toValue = self.locateImage.layer.position.y + 30
    animationDown.easing = RBBEasingFunctionEaseOutBounce;
    animationDown.duration = 0.7
    self.locateImage.layer.addAnimation(animationDown, forKey: "bounceDown")
    self.locateImage.layer.position.y += 30
})

locateImage.layer.addAnimation(animationUp, forKey: "bounceUp")
locateImage.layer.position.y -= 30

CATransaction.commit()

效果如下:

参考:

动画解释:
http://objccn.io/issue-12-1/

RBBAnimation:
https://github.com/robb/RBBAnimation

Animation End Callback for CALayer?
http://stackoverflow.com/questions/296967/animation-end-callback-for-calayer

时间: 2024-10-09 21:29:09

用 Swift 语言写一个地图坐标弹跳动画的相关文章

Swift语言编写一个简单的条形码扫描APP

swift语言编写一个简单的条形码扫描APP 原文地址:appcoda 在处理职员在杂货店的收银台排了很长的队伍,在机场帮助检查背包和旅客,或者在主要的食品供应商,协助处理乏味的存货清单过程,条形码扫描是很简单的处理工具.实际上,他们已经用了这个办法来解决消费者在智能购物,图书分类,等其他目的.因此,让我们来制作一个iPhone版本的条形码扫描工具吧! 对我们来说幸运的是,苹果已经制作了条形码扫描的程序,实现它是一件很简单的事情.我们将要研究进入AV Foundation框架的世界,组建APP,

用C语言写一个“事件”的模拟程序

源:用C语言写一个“事件”的模拟程序 Example.c //定义一个函数指针 func int (*func) (void); //调用该函数相当于触发了事件. //该事件触发后,会检查函数指针func是否为NULL,如果不为NULL,说明该指针已被赋值(相当于该事件被注册). //如果事件已被注册,则执行之. void fireTheEvent() { if(func != NULL) { func(); } } void registerTheEvent(int (*function) (

如何用 Swift 语言构建一个自定控件

(via:破船之家,原文:How To Make a Custom Control in Swift) 用户界面控件是所有应用程序重要的组成部分之一.它们以图形组件的方式呈现给用户,用户可以通过它们与应用程序进行交互.苹果提供了一套控件, 例如 UITextField,UIButton,UISwitch.通过工具箱中的这些已有控件,我们可以创建各式各样的用户界面. 然而,有时候你希望界面做得稍微的与众不同,那么此时苹果提供的这些控件就无法满足你的需求. 自定义控件,除了是自己构建二外,与苹果提供

用js写一个鼠标坐标实例

HTML代码 写一个div来作为鼠标区域 div中写一个span显示坐标信息 <body> <div id=""> <span></span> </div> </body> 给div和span增加样式并定位 <style type="text/css"> div{ position: relative;/* 定位信息 */ background-color: #398439; /*

使用OC和Swift两种语言写一个发射烟花的小项目

OC与Swift两种实现方式基本上区别不大,主要是在一些对象或方法的调用方式不同 OC代码样式: self.view.backgroundColor = [UIColor blackColor]; //加载颗粒状的火花图片 CAEmitterLayer *emitterLa = [CAEmitterLayer layer]; emitterLa.emitterPosition = CGPointMake(self.view.bounds.size.width/2, self.view.bound

用html语言写一个功课表

今天在网上看了一个关于html的教程,主要是讲表格,看完之后觉得有必要上机试试,于是就写了下面的一段代码. <!DOCTYPE html><!--貌似5.0的可以这样写,课本的声明老长老长了--> <html> <head> <title>功课表</title> <meta http-equiv="Content-Type" content="text/html; charset=GB2312&qu

用C语言写一个函数返回参数二进制中1的个数

首先,给出正确的C语言代码如下: #include <stdio.h> int count_one_bits(unsigned int value) { int count =0; while(value) { if(value%2==1) { count++; } value=value/2; } return count; } int main() { unsigned int num=0; int ret=0; scanf("%d",&num); ret=co

用c语言写一个函数把十进制转换成十六进制(转)

#include "stdio.h" int main() { int num=0;int a[100]; int i=0; int m=0;int yushu; char hex[16]={'0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'};printf("请输入一个十进制整数:"); scanf("%d",&num); while(num>0) { y

怎样用C语言写一个有界面的简单的计算器

c5rryu悦诶凹瓷夷费<http://weibo.com/20180414p/230927983141232861519873> o5wpwo垂猿汕棵仗托<http://weibo.com/p444p878p/230927983197414674407424> 687dvn堵手韵忠彩仓<http://weibo.com/p856p257p/230927983243473530396672> a0fb2w期收饶么恿唾<http://weibo.com/201804