首页 > 其他 > 详细

沿着path路径做动画

时间:2016-01-26 23:26:48      阅读:242      评论:0      收藏:0      [点我收藏+]

沿着path路径做动画

技术分享

 

路径

技术分享

 

效果

技术分享

 

源码

//
//  ViewController.m
//  PathAnimation
//
//  Created by YouXianMing on 16/1/26.
//  Copyright © 2016年 YouXianMing. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic) CGPoint startPoint;
@property (nonatomic) CGPoint endPoint;

@end

@implementation ViewController

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    // 起始点 结束点
    self.startPoint = CGPointMake(0, 150);
    self.endPoint   = CGPointMake(160, 150);

    // 初始化view
    UIButton *redButton       = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 10, 10)];
    redButton.center          = self.startPoint;
    redButton.backgroundColor = [UIColor redColor];
    [redButton addTarget:self action:@selector(buttonEvent) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:redButton];
    
    // CAKeyframeAnimation
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.path                 = [self path].CGPath;
    animation.duration             = 2.f;
    animation.timingFunction       = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    redButton.center               = self.endPoint;
    [redButton.layer addAnimation:animation forKey:nil];
}

- (UIBezierPath *)path {

    UIBezierPath* bezierPath = [UIBezierPath bezierPath];
    
    [bezierPath moveToPoint:    self.startPoint];
    [bezierPath addLineToPoint: CGPointMake(68, 150)];
    [bezierPath addLineToPoint: CGPointMake(83, 107)];
    [bezierPath addLineToPoint: CGPointMake(96, 206)];
    [bezierPath addLineToPoint: CGPointMake(102, 150)];
    [bezierPath addLineToPoint: CGPointMake(116, 150)];
    [bezierPath addLineToPoint: CGPointMake(127, 82)];
    [bezierPath addLineToPoint: CGPointMake(143, 213)];
    [bezierPath addLineToPoint: self.endPoint];

    return bezierPath;
}

- (void)buttonEvent {
    
    // todo
}

@end

 

细节

技术分享

 

效果

技术分享

 

源码

//
//  ViewController.m
//  PathAnimation
//
//  Created by YouXianMing on 16/1/26.
//  Copyright © 2016年 YouXianMing. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic) CGPoint startPoint;
@property (nonatomic) CGPoint endPoint;

@end

@implementation ViewController

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    // 起始点 结束点
    self.startPoint = CGPointMake(0, 150);
    self.endPoint   = CGPointMake(160, 150);

    // 初始化view
    UIButton *redButton       = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 10, 10)];
    redButton.center          = self.startPoint;
    redButton.backgroundColor = [UIColor redColor];
    [redButton addTarget:self action:@selector(buttonEvent) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:redButton];
    
    // CAKeyframeAnimation
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.path                 = [self path].CGPath;
    animation.duration             = 2.f;
    animation.autoreverses         = true;
    animation.repeatCount          = CGFLOAT_MAX;
    animation.timingFunction       = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    [redButton.layer addAnimation:animation forKey:nil];
}

- (UIBezierPath *)path {

    UIBezierPath* bezierPath = [UIBezierPath bezierPath];
    
    [bezierPath moveToPoint:    self.startPoint];
    [bezierPath addLineToPoint: CGPointMake(68, 150)];
    [bezierPath addLineToPoint: CGPointMake(83, 107)];
    [bezierPath addLineToPoint: CGPointMake(96, 206)];
    [bezierPath addLineToPoint: CGPointMake(102, 150)];
    [bezierPath addLineToPoint: CGPointMake(116, 150)];
    [bezierPath addLineToPoint: CGPointMake(127, 82)];
    [bezierPath addLineToPoint: CGPointMake(143, 213)];
    [bezierPath addLineToPoint: self.endPoint];

    return bezierPath;
}

- (void)buttonEvent {
    
    // todo
}

@end

 

细节

技术分享

 

沿着path路径做动画

原文:http://www.cnblogs.com/YouXianMing/p/5161792.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!