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

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

iOS實現點贊動畫特效

瀏覽:8日期: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
相關文章:
主站蜘蛛池模板: 塑胶跑道施工-硅pu篮球场施工-塑胶网球场建造-丙烯酸球场材料厂家-奥茵 | 合金耐磨锤头_破碎机锤头_郑州市德勤建材有限公司 | 北京四合院出租,北京四合院出售,北京平房买卖 - 顺益兴四合院 | 扒渣机,铁水扒渣机,钢水扒渣机,铁水捞渣机,钢水捞渣机-烟台盛利达工程技术有限公司 | 临朐空调移机_空调维修「空调回收」临朐二手空调 | 山东限矩型液力偶合器_液力耦合器易熔塞厂家-淄博市汇川源机械厂 | 丹佛斯压力传感器,WISE温度传感器,WISE压力开关,丹佛斯温度开关-上海力笙工业设备有限公司 | 聚丙烯酰胺_厂家_价格-河南唐达净水材料有限公司 | 广州展览设计公司_展台设计搭建_展位设计装修公司-众派展览装饰 广州展览制作工厂—[优简]直营展台制作工厂_展会搭建资质齐全 | 中山市派格家具有限公司【官网】| 空调风机,低噪声离心式通风机,不锈钢防爆风机,前倾皮带传动风机,后倾空调风机-山东捷风风机有限公司 | 隧道烘箱_隧道烘箱生产厂家-上海冠顶专业生产烘道设备 | 无锡不干胶标签,卷筒标签,无锡瑞彩包装材料有限公司 | 精密机械零件加工_CNC加工_精密加工_数控车床加工_精密机械加工_机械零部件加工厂 | 辐射仪|辐射检测仪|辐射巡测仪|个人剂量报警仪|表面污染检测仪|辐射报警仪|辐射防护网 | 贵州水玻璃_-贵阳花溪闽兴水玻璃厂 | 棉柔巾代加工_洗脸巾oem_一次性毛巾_浴巾生产厂家-杭州禾壹卫品科技有限公司 | 济南展厅设计施工_数字化展厅策划设计施工公司_山东锐尚文化传播有限公司 | 语料库-提供经典范文,文案句子,常用文书,您的写作得力助手 | 圆窗水平仪|伊莉莎冈特elesa+ganter| 暴风影音 | TwistDx恒温扩增-RAA等温-Jackson抗体-默瑞(上海)生物科技有限公司 | 低浓度恒温恒湿称量系统,强光光照培养箱-上海三腾仪器有限公司 | 天然气分析仪-液化气二甲醚分析仪|传昊仪器 | 首页_中夏易经起名网| 鄂泉泵业官网|(杭州、上海、全国畅销)大流量防汛排涝泵-LW立式排污泵 | 青岛侦探_青岛侦探事务所_青岛劝退小三_青岛婚外情取证-青岛王军侦探事务所 | 股票入门基础知识_股票知识_股票投资大师_格雷厄姆网 | 垃圾清运公司_环卫保洁公司_市政道路保洁公司-华富环境 | 打孔器,打孔钳厂家【温州新星德牌五金工具】 | 全国国际学校排名_国际学校招生入学及学费-学校大全网 | 上海小程序开发-小程序制作-上海小程序定制开发公司-微信商城小程序-上海咏熠 | 校服厂家,英伦校服定做工厂,园服生产定制厂商-东莞市艾咪天使校服 | 并网柜,汇流箱,电控设备,中高低压开关柜,电气电力成套设备,PLC控制设备订制厂家,江苏昌伟业新能源科技有限公司 | 茶叶百科网-茶叶知识与茶文化探讨分享平台 | 恒湿机_除湿加湿一体机_恒湿净化消毒一体机厂家-杭州英腾电器有限公司 | 温控器生产厂家-提供温度开关/热保护器定制与批发-惠州市华恺威电子科技有限公司 | 隔离变压器-伺服变压器--输入输出电抗器-深圳市德而沃电气有限公司 | 临时厕所租赁_玻璃钢厕所租赁_蹲式|坐式厕所出租-北京慧海通 | 广州印刷厂_广州彩印厂-广州艺彩印务有限公司 | Trimos测长机_测高仪_TESA_mahr,WYLER水平仪,PWB对刀仪-德瑞华测量技术(苏州)有限公司 |