电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

iOS實現點贊動畫特效

瀏覽:10日期:2022-09-17 08:01:58

本文實例為大家分享了iOS實現點贊動畫特效的具體代碼,供大家參考,具體內容如下

動畫的基本使用

動畫的實現基本上是基于對View控件和View的layer屬性進行操作,對視圖進行移動,尺寸變換,透明度變換,旋轉等一系列操作。

關鍵幀動畫:

動畫的實現可以分為兩個部分,一部分是規定動畫的變化內容,比如view需要把scale從0變化到1,這個數字是相對值,即從尺寸為0變化到正常尺寸。另一個部分是規定動畫的漸變時間。這樣就實現了view在規定時間完成指定變化了,這個變化的過程也可以通過參數設置為非均勻變化的。上面的示例是關鍵幀動畫的實現,實現的方式是把動畫劃分為幾個部分,“第一幀”做一件事,“第二幀”再做另外一件事,這就使得變化連續且可控。Duration參數確定了時間,delay確定了延時多久執行,options確定了關鍵幀動畫布局子控件。completion的參數是一個block,其中的內容是在內容執行結束后才調用。這里做了3幀,前兩幀做了尺寸變為3倍然后恢復,后一幀使得其隱藏。結束后會調用block使其移除。

[UIView animateKeyframesWithDuration:self.animationDurtion * 4 delay:0.0 options:UIViewKeyframeAnimationOptionLayoutSubviews animations:^{ /*參數1:關鍵幀開始時間 參數2:關鍵幀占用時間比例 參數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都有layer參數。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的配置。創建一個layer后設置它的frame和顏色以及邊界,線寬這些屬性。

CAShapeLayer *circleLayer = [[CAShapeLayer alloc] init];circleLayer.frame = giveLikeView.frame;circleLayer.fillColor = [UIColor clearColor].CGColor;circleLayer.strokeColor = [UIColor redColor].CGColor;circleLayer.lineWidth = 1;

幾處聯系:把貝塞爾曲線和layer聯系起來,把layer和view的layer聯系起來。

為layer加動畫(動畫組):

先創建動畫組CAAnimationGroup,它可以容納若干動畫,然后創建若干CABasicAnimation基礎動畫。分別設置屬性,動畫組需要涉及的屬性有時間功能,kCAMediaTimingFunctionEaseIn表示逐漸加快,另外還有設置持續時間,設置kCAFillModeForwards表示動畫在結束后會保持,removedOnCompletion = NO表示最后不移除。在基礎動畫的設置中,一般設置在動畫組中的起始時間和持續時間,還有參數的變化。最后的 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];

點贊動畫的實現原理

下面來介紹demo的實現原理。

controller的尺寸設置為全屏,在其上方也覆蓋一個全屏的view,再在view上添加點擊事件(手勢)。

- (void)addGesture{ UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(creatOneHeart:)]; [self addGestureRecognizer:tap]; }

下面看看點擊后調用的方法:

這里每次點擊都會獲取點擊的位置然后去初始化一個愛心,這是異步任務,放在主隊列中執行。

- (void)creatOneHeart:(UITapGestureRecognizer *)sender{ CGPoint point = [sender locationInView:self]; dispatch_async(dispatch_get_main_queue(),^{ [self initOneNewHeart:point]; });}

這段代碼創建了視圖對象,這里自然用到了事先創建好的心形圖片。這里把創建的imageview存到隊列,顯示到view上,最后調用likeAction:方法執行動畫。

- (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:這個方法,它包括執行心形的變化動畫和繪制六個輻射的三角形動畫,還有輻散的圓的動畫。

- (void)likeAction:(UIImageView *)giveLikeView{ [self giveLikeAction:giveLikeView];}- (void)giveLikeAction:(UIImageView *)giveLikeView{ [self animtionChangeLikeType:giveLikeView]; [self createTrigonsAnimtion:giveLikeView]; [self createCircleAnimation:giveLikeView];}

接下來直接看看輻散的三角形的動畫(愛心的變化動畫在上面已經涉及到了):這段代碼跑了6個循環,做了6個三角形,它們分別有動畫效果。shape.transform = CATransform3DMakeRotation(3.14 / 3 * i, 0, 0, 1);實現了旋轉。[giveLikeView.layer addSublayer:shape];執行layer的添加。因為在循環中,每個layer都有獨立的動畫,動畫組實現的效果是三角形從小變大,最后變成一條直線并消失。下面的兩行代碼用到了__bridge,它的作用是實現類型的轉換,這里把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++) { //創建一個layer并設置位置和填充色 CAShapeLayer *shape = [[CAShapeLayer alloc] init]; shape.position = CGPointMake(giveLikeView.bounds.size.width/2, giveLikeView.bounds.size.height/2); shape.fillColor = [UIColor redColor].CGColor; //設置貝塞爾曲線,執行路徑 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實現的動畫效果

iOS實現點贊動畫特效

demo的GitHub鏈接

最后附上demo鏈接:MYFGiveLikeAnimationDemo

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: IOS
相關文章:
主站蜘蛛池模板: 农业仪器网 - 中国自动化农业仪器信息交流平台 | 合同书格式和范文_合同书样本模板_电子版合同,找范文吧 | 紫外线老化试验箱_uv紫外线老化试验箱价格|型号|厂家-正航仪器设备 | 水冷式工业冷水机组_风冷式工业冷水机_水冷螺杆冷冻机组-深圳市普威机械设备有限公司 | 威廉希尔WilliamHill·足球(中国)体育官方网站 | 车充外壳,车载充电器外壳,车载点烟器外壳,点烟器连接头,旅行充充电器外壳,手机充电器外壳,深圳市华科达塑胶五金有限公司 | ★济南领跃标识制作公司★济南标识制作,标牌制作,山东标识制作,济南标牌厂 | 掺铥光纤放大器-C/L波段光纤放大器-小信号光纤放大器-合肥脉锐光电技术有限公司 | 篮球架_乒乓球台_足球门_校园_竞技体育器材_厂家_价格-沧州浩然体育器材有限公司 | 浙江华锤电器有限公司_地磅称重设备_防作弊地磅_浙江地磅售后维修_无人值守扫码过磅系统_浙江源头地磅厂家_浙江工厂直营地磅 | 专业生产动态配料系统_饲料配料系统_化肥配料系统等配料系统-郑州鑫晟重工机械有限公司 | 有机肥设备生产制造厂家,BB掺混肥搅拌机、复合肥设备生产线,有机肥料全部加工设备多少钱,对辊挤压造粒机,有机肥造粒设备 -- 郑州程翔重工机械有限公司 | 曙光腾达官网-天津脚手架租赁-木板架出租-移动门式脚手架租赁「免费搭设」 | 缓蚀除垢剂_循环水阻垢剂_反渗透锅炉阻垢剂_有机硫化物-郑州威大水处理材料有限公司 | 福建自考_福建自学考试网| 免费B2B信息推广发布平台 - 推发网| 交联度测试仪-湿漏电流测试仪-双85恒温恒湿试验箱-常州市科迈实验仪器有限公司 | 安徽华耐泵阀有限公司-官方网站| 罐体电伴热工程-消防管道电伴热带厂家-山东沃安电气 | ★店家乐|服装销售管理软件|服装店收银系统|内衣店鞋店进销存软件|连锁店管理软件|收银软件手机版|会员管理系统-手机版,云版,App | 背压阀|减压器|不锈钢减压器|减压阀|卫生级背压阀|单向阀|背压阀厂家-上海沃原自控阀门有限公司 本安接线盒-本安电路用接线盒-本安分线盒-矿用电话接线盒-JHH生产厂家-宁波龙亿电子科技有限公司 | 北京模型公司-军事模型-工业模型制作-北京百艺模型沙盘公司 | 硫化罐_蒸汽硫化罐_大型硫化罐-山东鑫泰鑫智能装备有限公司 | 12cr1mov无缝钢管切割-15crmog无缝钢管切割-40cr无缝钢管切割-42crmo无缝钢管切割-Q345B无缝钢管切割-45#无缝钢管切割 - 聊城宽达钢管有限公司 | LZ-373测厚仪-华瑞VOC气体检测仪-个人有毒气体检测仪-厂家-深圳市深博瑞仪器仪表有限公司 | 多功能真空滤油机_润滑油全自动滤油机_高效真空滤油机价格-重庆润华通驰 | 急救箱-应急箱-急救包厂家-北京红立方医疗设备有限公司 | 团建-拓展-拓展培训-拓展训练-户外拓展训练基地[无锡劲途] | 防水试验机_防水测试设备_防水试验装置_淋雨试验箱-广州岳信试验设备有限公司 | 云南丰泰挖掘机修理厂-挖掘机维修,翻新,再制造的大型企业-云南丰泰工程机械维修有限公司 | 缠绕机|缠绕膜包装机|缠绕包装机-上海晏陵智能设备有限公司 | 二次元影像仪|二次元测量仪|拉力机|全自动影像测量仪厂家_苏州牧象仪器 | 恒温恒湿试验箱_高低温试验箱_恒温恒湿箱-东莞市高天试验设备有限公司 | 苏州柯瑞德货架-仓库自动化改造解决方案 | 上海瑶恒实业有限公司|消防泵泵|离心泵|官网 | 联系我们老街华纳娱乐公司官网19989979996(客服) | 南京试剂|化学试剂|分析试剂|实验试剂|cas号查询-专业60年试剂销售企业 | 炭黑吸油计_测试仪,单颗粒子硬度仪_ASTM标准炭黑自销-上海贺纳斯仪器仪表有限公司(HITEC中国办事处) | 便携式XPDM露点仪-在线式防爆露点仪-增强型烟气分析仪-约克仪器 冰雕-冰雪世界-大型冰雕展制作公司-赛北冰雕官网 | 披萨石_披萨盘_电器家电隔热绵加工定制_佛山市南海区西樵南方综合保温材料厂 | 电梯乘运质量测试仪_电梯安全评估测试仪-武汉懿之刻 |