iOS 类似亲宝宝app下拉刷新动画效果

iOS 类似亲宝宝app下拉刷新动画效果，最近看了下这种效果，感觉有点意思。于是就实现了一下。

方案一
采用两个背景View1、View2，三个球ball1，ball2，ball3，将ball1，ball2放到View1上，ball3放到View2上。

当动画开始的时候，开始旋转View1，当动画结束后，将ball2放到View2，接着旋转View2，依次循环。

旋转代码

- (CAAnimation *)rotateAnimation {//初始化一个动画CABasicAnimation *animation = [CABasicAnimation animation];//动画运动的方式，现在指定的是围绕Z轴旋转animation.keyPath = @"transform.rotation.z";//动画持续时间animation.duration = 0.35;//开始的角度animation.fromValue = [NSNumber numberWithFloat:0];//结束的角度animation.toValue = [NSNumber numberWithFloat:M_PI];//动画的运动方式animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];//是否反向移动动画
//    animation.autoreverses = YES;animation.repeatCount = 1;//动画的代理animation.delegate = self;//动画结束后的状态//animation.fillMode = kCAFillModeBackwards;animation.removedOnCompletion = YES;return animation;
}

当动画结束后，实现代理animationDidStop方法

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {CAAnimation *rotate1Animate = [self.content1ImageView.layer animationForKey:@"rotate"];CAAnimation *rotate2Animate = [self.content2ImageView.layer animationForKey:@"rotate"];if (!(rotate1Animate == anim || rotate2Animate == anim)) {return;}if (flag) {if (self.animationStoped) {return;}if (self.rotateIndex == 1) {self.rotateIndex = 0;} else {self.rotateIndex = 1;}[self redisplayBall];[self loadAnimation];}
}- (void)redisplayBall {// 1-0-2if (self.rotateIndex == 0) {// 旋转第一个控件[self.content1ImageView addSubview:self.aballImageView];[self.content1ImageView addSubview:self.bballImageView];[self.content2ImageView addSubview:self.cballImageView];} else {// 旋转第二个控件[self.content1ImageView addSubview:self.aballImageView];[self.content2ImageView addSubview:self.bballImageView];[self.content2ImageView addSubview:self.cballImageView];}[self layoutBallFrame];
}// 重新加载动画，效果，依次旋转View1与View2
- (void)loadAnimation {if (self.rotateIndex == 0) {[self.content1ImageView.layer addAnimation:[self rotateAnimation] forKey:@"rotate"];} else {[self.content2ImageView.layer addAnimation:[self rotateAnimation] forKey:@"rotate"];}
}

最终实现该效果。

方案二
采用路径动画来实现，三个球aballImageView，bballImageView，cballImageView，三个球的位置a-c-b。还有四个path，及四个半圆的path，上边两个top1Path、top2Path，下边两个bottom1Path、bottom2Path。

当动画开始是，球aballImageView按照top1Path的路径进行动画；同时球cballImageView按照bottom1Path的路径进行动画；当这次动画结束后，球cballImageView按照top2Path的路径进行动画，同时球bballImageView按照bottom2Path的路径进行动画；依次循环。

- (void)loadAnimation {if (!self.hasRotated) {// 如果是球aballImageView、cballImageView[self.aballImageView.layer addAnimation:[self rotateAnimation:self.top1Path] forKey:@"showPathAnimation"];[self.cballImageView.layer addAnimation:[self rotateAnimation:self.bottom1Path] forKey:@"showPathAnimation"];} else {// 如果是球cballImageView、bballImageView[self.cballImageView.layer addAnimation:[self rotateAnimation:self.top2Path] forKey:@"showPathAnimation"];[self.bballImageView.layer addAnimation:[self rotateAnimation:self.bottom2Path] forKey:@"showPathAnimation"];}
}

路径动画

- (CAAnimation *)rotateAnimation:(UIBezierPath *)path {CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];// 动画时间间隔animation.duration = 0.35f;// 重复次数为最大值animation.repeatCount = 1;animation.removedOnCompletion = NO;//    animation.fillMode = kCAFillModeForwards;animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];animation.calculationMode = kCAAnimationPaced;animation.delegate = self;animation.path = path.CGPath;return animation;
}

动画结束后，重新开始动画

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {CAAnimation *aBallAnimate = [self.aballImageView.layer animationForKey:@"showPathAnimation"];CAAnimation *bBallAnimate = [self.bballImageView.layer animationForKey:@"showPathAnimation"];CAAnimation *cBallAnimate = [self.cballImageView.layer animationForKey:@"showPathAnimation"];if (!(aBallAnimate == anim || bBallAnimate == anim || cBallAnimate == anim)) {return;}if (flag) {if (self.animationStoped) {return;}if (self.hasRotated) {self.hasRotated = NO;[self.bballImageView.layer removeAnimationForKey:@"showPathAnimation"];} else {self.hasRotated = YES;[self.aballImageView.layer removeAnimationForKey:@"showPathAnimation"];}[self loadAnimation];}
}

注意点：
当使用CAKeyframeAnimation动画时，我们需要设置animation.fillMode = kCAFillModeRemoved;
动画结束后，回到原先状态，这样的，三个球的位置依然是a-c-b，这个时候开始后面的动画就可以对c、b球进行动画。

fillMode可以的值
定义定时对象在其活动持续时间之外的行为方式，本地时间可以限制在活动持续时间的任何一端，或者可以从演示文稿中删除元素。值分别是“后退”、“前进”、“两者”和“删除”。默认为移除

大意:fillMode的作用就是决定当前对象过了非active时间段的行为. 比如动画开始之前,动画结束之后
kCAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态
kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态
kCAFillModeBackwards 这个和kCAFillModeForwards是相对的,就是在动画开始前,你只要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始.你可以这样设定测试代码,将一个动画加入一个layer的时候延迟5秒执行.然后就会发现在动画没有开始的时候,只要动画被加入了layer,layer便处于动画初始状态
kCAFillModeBoth 理解了上面两个,这个就很好理解了,这个其实就是上面两个的合成.动画

所以默认就是kCAFillModeRemoved，恢复动画开始前的状态。

iOS 类似亲宝宝app下拉刷新动画效果相关推荐

iOS用Sketch制作APP下拉刷新的GIF动画
一.用Sketch结合MJRefresh来自定义刷新动画今天分享一下iOS关于自定义下拉刷新动画的实现.我们平时看到很多APP的下拉刷新都是菊花在转的样式,因为很多APP都是用 MJRefresh ...
php仿boss直聘,仿BOSS直聘APP下拉刷新动画实现
转自微信公众号:iOS面向编码 BOSS直聘APP的下拉刷新动画蛮有趣的,我们来尝试实现一下. 先来看看最终效果: 关于实现思路: 实现思路这东西,并不是一成不变的,每个人心中都有自己喜欢的思想和套路 ...
android下拉刷新动画效果代码_vue项目实录：下拉刷新组件的开发及slot的使用
"下拉刷新"和"上滑加载更多"功能在前端.尤其是移动端项目中非常重要,这里笔者由曾经做过的vue项目中的"blink"功能和各位探讨下[下拉 ...
慕课网app下拉刷新图标填充效果的实现
之前看到一种下拉刷新的效果,与以往的下拉效果都不一样,大多数下拉刷新都是一个圆形进度条在旋转,而这个下拉刷新则是一个不断填充的效果.本以为这是个自定义View,后来反编译慕课网的app后提取资源的时候 ...
美团、点评、猫眼App下拉加载效果的源码分享
今天我准备拿大众点评.美团.猫眼电影三款App的实例来分享一下APICloud下拉加载这个模块的效果. 美团App下拉加载效果以美团中的下拉酷似动画的萌萌着小人儿效果作为参考,来实现的一个加载模块. ...
Android自定义下拉刷新动画--仿百度外卖下拉刷新
好久没写博客了,小编之前一段时间一直在找工作,从天津来到了我们的大帝都,感觉还不错.好了废话不多说了,开始我们今天的主题吧.现如今的APP各式各样,同样也带来了各种需求,一个下拉刷新都能玩出花样了,前 ...
android 文字fly动画,超好看的下拉刷新动画Android代码实现
最近看到了好多高端.大气.上档次的动画效果,如果给你的项目中加上这些动画,相信你的app一定很优秀,今天给大家分析一下来自Yalantis的一个超好看的下拉刷新动画. 首先我们看一下效果如何: 怎么样 ...
Android源码解析－－超好看的下拉刷新动画
本篇博客代码下载地址:https://github.com/Yalantis/Taurus 最近在github上看到了好多高端.大气.上档次的动画效果,如果给你的项目中加上这些动画,相信你的app一定 ...
android listview下拉动画效果,Android开发中利用ListView实现一个渐变式的下拉刷新动画...
Android开发中利用ListView实现一个渐变式的下拉刷新动画发布时间:2020-11-23 16:50:31 来源:亿速云阅读:80 作者:Leah 本篇文章给大家分享的是有关Androi ...

iOS 类似亲宝宝app下拉刷新动画效果

iOS 类似亲宝宝app下拉刷新动画效果相关推荐

最新文章

热门文章