ios气泡动画效果的简单实现

来源：互联网发布：指数补偿算法编辑：程序博客网时间：2024/06/11 23:44

在新浪微博应用中如果要查看附近的人或微博，你会发现查找到的微博会一个一个地弹出来显示在地图上，同时带有一点反弹效果，如下图所示，这样用户体验比较好，这里简单实现一下。

效果图：

其实这个动画实现起来也不难。分两部分，一个是反弹效果。思路就是在动画块中改变视图的scale。首先可以设置其初始状态为alpha ＝ 0，并且长宽都缩小为0.7倍，然后在动画中将alpha设置为1，并且长宽放大为1.1倍。同时这个动画完成以后恢复原来的transform，这样反弹效果就算实现了。

上代码：

for (WeiboAnnotationView *annotation in views) {        CGAffineTransform transform = annotation.transform;        annotation.transform = CGAffineTransformScale(transform, 0.7, 0.7);        annotation.alpha = 0;        [UIView animateWithDuration:0.3 animations:^{            //动画1            annotation.transform = CGAffineTransformScale(transform, 1.2, 1.2);            annotation.alpha = 1;        } completion:^(BOOL finished) {            [UIView animateWithDuration:0.3 animations:^{                annotation.transform = CGAffineTransformIdentity;            }];        }];    }

代码中用一个循环遍历所有地图上的annotation，对每一个都进行这种变换。

接下来实现轮流出现。所谓轮流出现，也就是当前一个出现地比上一个晚，比下一个早。所以用计时器等都可以实现。这里因为是add所有annotation，所以可以用performSelector，在delay中控制时间即可。代码如下

        [self.mapView performSelector:@selector(addAnnotation:) withObject:annotation afterDelay:i * 0.05];

这行代码放在一个for循环中，思路就是“将大头针一个一个地放上去”。

0 0