Animation với CALayer
ios
54
Objective-C
7
Animation
6
Male avatar

knn viết ngày 02/12/2015

CALayer đại diện cho một hình chữ nhật có thể nhìn thấy được trên UI.
Mỗi UIView đều có một layer.

CALayer *myLayer = myView.layer;

Với một layer bạn có thể làm rất nhiều thứ như
- Đổi background color
- Bo góc
- Thêm shadow
Giải thích giới thiệu dài dòng quá. Nói chung là hôm nay mình muốn hướng dẫn làm một animation đơn giản với CALayer. Vậy nhé :smile:

Chuẩn bị :

  1. Tạo một Single View Application project
  2. Đặt một cái tên bất kì, ngôn ngữ Objective-C. Swift cũng được nhưng mình làm Objective-C
  3. Trong Storyboard, thêm một UIView vào giữa màn hình kích thước 200x200 nhé
  4. Kéo outlet cho view đó vào ViewController

Vậy là xong các bước chuẩn bị.
Bắt đầu code nào.
Ở ViewController, viewDidLoad

- (void)viewDidLoad {
    [super viewDidLoad];

    CGFloat radius = 75; // Bán kính của layer
    CGPoint centerPoint = CGPointMake(CGRectGetWidth(self.animationView.frame) / 2, CGRectGetHeight(self.animationView.frame) / 2); // tâm điểm

    // Tạo một layer để vẽ animation
    CAShapeLayer *circleLayer = [CAShapeLayer layer];
    circleLayer.path = [UIBezierPath bezierPathWithArcCenter:centerPoint
                                                      radius:radius
                                                  startAngle:0
                                                    endAngle:2*M_PI
                                                   clockwise:YES].CGPath;
    // Thiết lập các thuộc tính cho layer
    circleLayer.fillColor = [UIColor clearColor].CGColor;
    circleLayer.strokeColor = [UIColor orangeColor].CGColor;
    circleLayer.lineWidth = 10;
    circleLayer.lineCap = kCALineCapRound;
    circleLayer.shouldRasterize = YES;

    // Add circleLayer vào animationView
    [self.animationView.layer addSublayer:circleLayer];
}

UIBezierPath là một cách rất tiện lợi để vẽ hình hoặc vẽ đường trong layer. Các bạn có thể tìm hiểu thêm các method khác của nó.

Đây là kêt quả sau khi tạo layer

alt text

Tiếp theo là add animation vào layer
Cũng trong viewDidLoad

- (void)viewDidLoad {
    //....
    // Thiết lập các thuộc tính của animation
    CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    drawAnimation.duration            = 2.0; 
    drawAnimation.repeatCount         = 1.0;  

    drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    drawAnimation.toValue   = [NSNumber numberWithFloat:1.0f];

    // Thuộc tính về timing: đều, nhanh dần đều, chậm dần đều
    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    // Thêm animation vào layer
    [circleLayer addAnimation:drawAnimation forKey:@"drawCircleAnimation"];
}

Đây là hình ảnh sau khi add animation
alt text

Việc vẽ hình tròn đã xong. Để thêm phần hoành tráng các bạn có thể add thêm một animation nữa. Add đoạn code sau ngay phía dưới drawAnimation

- (void)viewDidLoad {
    //....
    // Tạo animation
    CAKeyframeAnimation *colorsAnimation = [CAKeyframeAnimation animationWithKeyPath:@"strokeColor"];

    // Tạo mảng màu cho animation.
    colorsAnimation.values = @[
                               (id)[UIColor greenColor].CGColor,
                               (id)[UIColor yellowColor].CGColor,
                               (id)[UIColor orangeColor].CGColor,
                               (id)[UIColor redColor].CGColor,
                               ];
    colorsAnimation.calculationMode = kCAAnimationPaced;
    colorsAnimation.removedOnCompletion = NO;
    colorsAnimation.fillMode = kCAFillModeForwards;
    colorsAnimation.duration = 2;
    colorsAnimation.repeatCount = 1;

    // Thêm animation vào layer
    [circleLayer addAnimation:colorsAnimation forKey:@"strokeColor"];
}

Và đây là kết quả cuối cùng
alt text

Và đây là phần cuối cùng cũng là mục đích chính của việc mình làm cái hướng dẫn này. Một custom view mình viết có ứng dụng animation trên. Bạn nào có nhã hứng thì vào rate cho mình phát. Xin cám ơn hehe.
Cocoa Control:
https://www.cocoacontrols.com/controls/kncirclepercentview
GitHub:
https://github.com/knn90/KNCirclePercentView

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

knn

3 bài viết.
11 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
11 4
Trong lúc rãnh rỗi mình custom UISwitch với animation đơn giản. Đây là nguồn của animation: https://dribbble.com/shots/2309834Yetanothertoggleanim...
knn viết gần 3 năm trước
11 4
Male avatar
9 0
Functions function = hàm, phương thức Hàm bao gồm tham số (parameter) và kiểu trả về (return type) Ví dụ về hàm: Swift func sayHello(personN...
knn viết gần 3 năm trước
9 0
Bài viết liên quan
White
12 2
Hồi mới bắt đầu code ObjectiveC, mỗi lần chọn màu không phải màu thông thường thì lại phải dùng 1 tool khác để lấy mã RBG rồi mới chèn vào code: ...
noname viết gần 3 năm trước
12 2
White
7 0
Hướng dẫn dùng fastlane để build, up test tự động Fastlane là 1 công cụ hỗ trợ cho iOS, Android developer trong việc release, build test cực kỳ tố...
Do Khanh Toan viết gần 2 năm trước
7 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
3 bài viết.
11 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!