iOS动画:02-箭头根据半圆路径旋转

两种方式来实现箭头根据路径旋转的动画

第一种(master分支):组合的思想 github地址:ArrowRotationAnimation

一:思想

  1. 让路径旋转的动画
  2. 让箭头图片旋转的动画
  3. 两者组合在一起就能实现

二:实现效果

imageViewMoveWithPath.gif

三:关键代码:

//rotationMode让imageView根据路径自动旋转,这个很神奇了
keyAnimation.rotationMode = "auto"

第二种方法:又一个仓库github地址:XXCycleProcessAnimation

这种方式比第一种方式更加自然

一:思想

  1. 用CADisplayLink定时画图
  2. 根据进度画弧
  3. 根据进度修改箭头角度

二:效果如图:


XXCycleProcessAnimation.gif

三:关键代码:

根据画弧的进度,计算箭头的旋转角度

_displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(progress)];
[_displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
- (void)progress{
    _progress += 0.3/60;
    
    //半径
    CGFloat radius = (100 - 4) * 0.5;
    //旋转角度
    CGFloat rotation = M_PI  * _progress;
    [_path removeAllPoints];
    //画弧(参数:中心、半径、起始角度(3点钟方向为0)、结束角度、是否顺时针)
    [_path addArcWithCenter:(CGPoint){100 * 0.5, 100 * 0.5} radius:radius startAngle:-M_PI  endAngle: -M_PI + rotation clockwise:YES];
    _shapeLayer.path = _path.CGPath;
    
    //根据角度算箭头位置, 求出圆周上的点
    _arrow.transform = CGAffineTransformMakeRotation(rotation);
    _arrow.center = CGPointMake(150 - radius * cos(rotation) , 150 - radius * sin(rotation));
    
    if (_progress >= 1.0) {
        _progress = 0;
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 二月 褚之然 新新的知识, 装在新新的课本里。 新新的同桌, 露出新新的笑脸。 新新的朝阳, 照着新新的小学生...
    然宝空间阅读 991评论 0 0
  • 作为成年人,我们都知道礼貌的重要性。你对别人礼貌,才会有合谐的人际关系。培养孩子礼貌是每个家长都认为重要的事。当孩...
    微风燕子斜阅读 365评论 0 1
  • 昨天老妈的一个电话,让我气不打一出来,二妹明明请了一个月嫂照顾刚出生的小外甥,自己还没有能力照顾他,偏让月嫂去...
    托尼在厦门阅读 1,548评论 1 53