iOS實現(xiàn)點贊動畫特效
本文實例為大家分享了iOS實現(xiàn)點贊動畫特效的具體代碼，供大家參考，具體內容如下
動畫的基本使用
動畫的實現(xiàn)基本上是基于對View控件和View的layer屬性進行操作，對視圖進行移動，尺寸變換，透明度變換，旋轉等一系列操作。
關鍵幀動畫：
動畫的實現(xiàn)可以分為兩個部分，一部分是規(guī)定動畫的變化內容，比如view需要把scale從0變化到1，這個數(shù)字是相對值，即從尺寸為0變化到正常尺寸。另一個部分是規(guī)定動畫的漸變時間。這樣就實現(xiàn)了view在規(guī)定時間完成指定變化了，這個變化的過程也可以通過參數(shù)設置為非均勻變化的。上面的示例是關鍵幀動畫的實現(xiàn)，實現(xiàn)的方式是把動畫劃分為幾個部分，“第一幀”做一件事，“第二幀”再做另外一件事，這就使得變化連續(xù)且可控。Duration參數(shù)確定了時間，delay確定了延時多久執(zhí)行，options確定了關鍵幀動畫布局子控件。completion的參數(shù)是一個block，其中的內容是在內容執(zhí)行結束后才調用。這里做了3幀，前兩幀做了尺寸變?yōu)?倍然后恢復，后一幀使得其隱藏。結束后會調用block使其移除。
[UIView animateKeyframesWithDuration:self.animationDurtion * 4 delay:0.0 options:UIViewKeyframeAnimationOptionLayoutSubviews animations:^{
/*參數(shù)1:關鍵幀開始時間
參數(shù)2:關鍵幀占用時間比例
參數(shù)3:到達該關鍵幀時的屬性值 */
[UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 * self.animationDurtion animations:^{
giveLikeView.transform = CGAffineTransformMakeScale(3, 3);;
}];
[UIView addKeyframeWithRelativeStartTime:0.5 * self.animationDurtion relativeDuration:0.5 * self.animationDurtion animations:^{
giveLikeView.transform = CGAffineTransformIdentity;
}];
[UIView addKeyframeWithRelativeStartTime:self.animationDurtion relativeDuration:self.animationDurtion * 3 animations:^{
giveLikeView.alpha = 0;
}];
} completion:^(BOOL finished) {
giveLikeView.hidden = YES;
[giveLikeView removeFromSuperview];
}];
CAShapeLayer和UIBezierPath：
當不滿足于view的變化，還需要在view的表面繪制一些圖案，就要對layer進行操作，layer可以理解為是view的表面，每個view都有l(wèi)ayer參數(shù)。UIBezierPath是貝塞爾曲線，它用于設置繪圖的路徑，沒有了它，layer的繪制也是無效的，因為沒有邊界呀。
如下代碼繪制了一個圓形的曲線，設置了它的中心，半徑，起始終止角這些屬性。
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(giveLikeView.bounds.size.width/2, giveLikeView.bounds.size.height/2) radius:giveLikeView.bounds.size.width startAngle:-1.57 endAngle:-1.57+3.14*2 clockwise:YES]; circleLayer.path = bezierPath.CGPath; [self.layer addSublayer:circleLayer];
在最后我們可以看到：circleLayer.path = bezierPath.CGPath; [self.layer addSublayer:circleLayer];
它的作用是設置layer的路徑，并把layer添加到view的表面。下面來看看layer的配置。
創(chuàng)建一個layer后設置它的frame和顏色以及邊界，線寬這些屬性。
CAShapeLayer *circleLayer = [[CAShapeLayer alloc] init]; circleLayer.frame = giveLikeView.frame; circleLayer.fillColor = [UIColor clearColor].CGColor; circleLayer.strokeColor = [UIColor redColor].CGColor; circleLayer.lineWidth = 1;
幾處聯(lián)系：把貝塞爾曲線和layer聯(lián)系起來，把layer和view的layer聯(lián)系起來。
為layer加動畫（動畫組）：
先創(chuàng)建動畫組CAAnimationGroup，它可以容納若干動畫，然后創(chuàng)建若干CABasicAnimation基礎動畫。分別設置屬性，動畫組需要涉及的屬性有時間功能，kCAMediaTimingFunctionEaseIn表示逐漸加快，另外還有設置持續(xù)時間，設置kCAFillModeForwards表示動畫在結束后會保持，removedOnCompletion = NO表示最后不移除。在基礎動畫的設置中，一般設置在動畫組中的起始時間和持續(xù)時間，還有參數(shù)的變化。最后的 group.animations = @[scaleAnimtion,widthStartAnimtion,widthEndAnimtion];[circleLayer addAnimation:group forKey:nil];
兩句表示在動畫組中添加動畫然后為layer添加動畫組，這樣layer就有動畫特效了。
//動畫 CAAnimationGroup *group = [CAAnimationGroup animation]; group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]; NSTimeInterval groupInterval = self.animationDurtion * 0.8; group.duration = groupInterval; group.fillMode = kCAFillModeForwards; group.removedOnCompletion = NO; CABasicAnimation * scaleAnimtion = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; scaleAnimtion.beginTime = 0; scaleAnimtion.duration = groupInterval * 0.8; scaleAnimtion.fromValue = @(0); scaleAnimtion.toValue = @(1); CABasicAnimation * widthStartAnimtion = [CABasicAnimation animationWithKeyPath:@"lineWidth"]; widthStartAnimtion.beginTime = 0; widthStartAnimtion.duration = groupInterval * 0.8; widthStartAnimtion.fromValue = @(1); widthStartAnimtion.toValue = @(2); CABasicAnimation * widthEndAnimtion = [CABasicAnimation animationWithKeyPath:@"lineWidth"]; widthEndAnimtion.beginTime = groupInterval * 0.8; widthEndAnimtion.duration = groupInterval * 0.2; widthEndAnimtion.fromValue = @(2); widthEndAnimtion.toValue = @(0); group.animations = @[scaleAnimtion,widthStartAnimtion,widthEndAnimtion]; [circleLayer addAnimation:group forKey:nil];
點贊動畫的實現(xiàn)原理
下面來介紹demo的實現(xiàn)原理。
controller的尺寸設置為全屏，在其上方也覆蓋一個全屏的view，再在view上添加點擊事件（手勢）。
- (void)addGesture
{
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(creatOneHeart:)];
[self addGestureRecognizer:tap];
}
下面看看點擊后調用的方法：
這里每次點擊都會獲取點擊的位置然后去初始化一個愛心，這是異步任務，放在主隊列中執(zhí)行。
- (void)creatOneHeart:(UITapGestureRecognizer *)sender
{
CGPoint point = [sender locationInView:self];
dispatch_async(dispatch_get_main_queue(),^{
[self initOneNewHeart:point];
});
}
這段代碼創(chuàng)建了視圖對象，這里自然用到了事先創(chuàng)建好的心形圖片。這里把創(chuàng)建的imageview存到隊列，顯示到view上，最后調用likeAction:方法執(zhí)行動畫。
- (UIImageView *)createGiveLikeView
{
UIImageView *giveLikeView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 40, 40)];
giveLikeView.backgroundColor = [UIColor clearColor];
UIImage *image = [UIImage imageNamed:@"icon_home_like_after"];
giveLikeView.userInteractionEnabled = YES;
giveLikeView.tag = GiveType;
giveLikeView.image = image;
giveLikeView.hidden = NO;
_giveLikeView = giveLikeView;
return _giveLikeView;
}
- (void)initOneNewHeart:(CGPoint)point
{
UIImageView *giveLikeView = [self createGiveLikeView];
giveLikeView.center = point;
[self.array addObject:giveLikeView];
[self addSubview:giveLikeView];
[self likeAction:giveLikeView];
}
我們看看giveLikeAction：這個方法，它包括執(zhí)行心形的變化動畫和繪制六個輻射的三角形動畫，還有輻散的圓的動畫。
- (void)likeAction:(UIImageView *)giveLikeView
{
[self giveLikeAction:giveLikeView];
}
- (void)giveLikeAction:(UIImageView *)giveLikeView
{
[self animtionChangeLikeType:giveLikeView];
[self createTrigonsAnimtion:giveLikeView];
[self createCircleAnimation:giveLikeView];
}
接下來直接看看輻散的三角形的動畫（愛心的變化動畫在上面已經(jīng)涉及到了）：
這段代碼跑了6個循環(huán)，做了6個三角形，它們分別有動畫效果。
shape.transform = CATransform3DMakeRotation(3.14 / 3 * i, 0, 0, 1);實現(xiàn)了旋轉。
[giveLikeView.layer addSublayer:shape];執(zhí)行l(wèi)ayer的添加。
因為在循環(huán)中，每個layer都有獨立的動畫，動畫組實現(xiàn)的效果是三角形從小變大，最后變成一條直線并消失。
下面的兩行代碼用到了__bridge，它的作用是實現(xiàn)類型的轉換，這里把CGPathRef類型“橋接”轉化為了id類型，如果沒有它，會報錯。
pathAnimation.fromValue = (__bridge id)startPath.CGPath;
pathAnimation.toValue = (__bridge id)endPath.CGPath;
- (void)createTrigonsAnimtion:(UIImageView *)giveLikeView
{
for(int i=0;i<6;i++) {
//創(chuàng)建一個layer并設置位置和填充色
CAShapeLayer *shape = [[CAShapeLayer alloc] init];
shape.position = CGPointMake(giveLikeView.bounds.size.width/2, giveLikeView.bounds.size.height/2);
shape.fillColor = [UIColor redColor].CGColor;
//設置貝塞爾曲線，執(zhí)行路徑
UIBezierPath *startPath = [[UIBezierPath alloc] init];
[startPath moveToPoint:CGPointMake(-2, 30)];
[startPath addLineToPoint:CGPointMake(2, 30)];
[startPath addLineToPoint:CGPointMake(0, 0)];
[startPath addLineToPoint:CGPointMake(-2, 30)];
shape.path = startPath.CGPath;
//旋轉
shape.transform = CATransform3DMakeRotation(3.14 / 3 * i, 0, 0, 1);
[giveLikeView.layer addSublayer:shape];
//動畫組
CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
groupAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
groupAnimation.duration = self.animationDurtion;
groupAnimation.fillMode = kCAFillModeForwards;
groupAnimation.removedOnCompletion = NO;
//基礎動畫1
CABasicAnimation *scaleAnimtion = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
//縮放時間占20%
scaleAnimtion.duration = self.animationDurtion * 0.2;
scaleAnimtion.fromValue = @(0);
scaleAnimtion.toValue = @(1);
//繪制三角形結束 一條直線
UIBezierPath *endPath = [UIBezierPath bezierPath];
[endPath moveToPoint:CGPointMake(-2, 30)];
[endPath addLineToPoint:CGPointMake(2, 30)];
[endPath addLineToPoint:CGPointMake(0, 30)];
//基礎動畫2
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"path"];
pathAnimation.beginTime = self.animationDurtion * 0.2;
pathAnimation.duration = self.animationDurtion * 0.8;
pathAnimation.fromValue = (__bridge id)startPath.CGPath;
pathAnimation.toValue = (__bridge id)endPath.CGPath;
groupAnimation.animations = @[scaleAnimtion,pathAnimation];
[shape addAnimation:groupAnimation forKey:nil];
}
}
demo實現(xiàn)的動畫效果
demo的GitHub鏈接
最后附上demo鏈接：MYFGiveLikeAnimationDemo
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
iOS中UIScrollView嵌套UITableView的實踐教程
在UIScrollView嵌套UITableView的問題相信大家都遇到過，小編最近在工作中就遇到了這個問題，所以這篇文章主要介紹了iOS中UIScrollView嵌套UITableView的相關資料，文中介紹的方法是通過自己的實踐所得來的，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
這篇文章主要為大家詳細介紹了iOS音樂播放器實現(xiàn)代碼完整版，包括音頻列表、播放器、后臺播放、鎖屏播放，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-05-05
UITableViewCell在編輯狀態(tài)下背景顏色的修改方法
這篇文章主要給大家介紹了關于UITableViewCell在編輯狀態(tài)下背景顏色的修改方法，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編一起來學習學習吧。2017-07-07
iOS程序開發(fā)之使用PlaceholderImageView實現(xiàn)優(yōu)雅的圖片加載效果
這篇文章主要介紹了ioS程序開發(fā)之使用PlaceholderImageView實現(xiàn)優(yōu)雅的圖片加載效果的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-09-09
這篇文章主要介紹了iOS 委托與文本輸入（內容根據(jù)iOS編程編寫） 的相關資料,需要的朋友可以參考下2016-09-09
這篇文章主要為大家詳細介紹了iOS實現(xiàn)支付寶螞蟻森林隨機按鈕及抖動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
現(xiàn)今已有越來越多的APP需要橫向刷新的需求，而橫向刷新加載的控件卻寥寥無幾，即使有也是集成起來非常的麻煩，恰巧最近項目中又用到了這個功能，所以干脆自己來造個輪子，方便大家使用。2016-08-08
iOS實現(xiàn)UITableView數(shù)據(jù)為空時的提示頁面
最近工作中遇到一個需求，當UITableView數(shù)據(jù)為空的時候，給出一個簡單的提示頁面，通過從網(wǎng)上查找解決的方法，發(fā)現(xiàn)了兩種實現(xiàn)的方法，現(xiàn)在分享給大家，有需要的朋友們可以參考借鑒，下面感興趣的朋友們來一起學習學習吧。2016-11-11
這篇文章主要為大家介紹了iOS?StoreKit?2?新特性盤點及要點解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了iOS撥打電話的3種實現(xiàn)方式 ,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-06-06