iOS开发 - 柱状图动态展现动画

简介: iOS开发 - 柱状图动态展现动画

先来看看效果,正反变化都有:

1.png

这里博主用了组动画的方式,通过两种转换来完成:

1.通过bounds和position

2.通过transform.scale.y和position


通过bounds和position


1.创建一个layer

  CALayer *itemLayer = [CALayer layer];
    itemLayer.frame = CGRectMake(50, 100, 50, 200);
    itemLayer.backgroundColor = [UIColor redColor].CGColor;
    [baseView.layer addSublayer:itemLayer];

2.写bounds的动画


  CGRect frame = itemLayer.frame;
    CABasicAnimation *aniBounds = [CABasicAnimation animationWithKeyPath:@"bounds"];
    aniBounds.fromValue = [NSValue valueWithCGRect:CGRectMake(50, 100, 50, 0)];
    aniBounds.toValue = [NSValue valueWithCGRect:CGRectMake(50, 100, CGRectGetWidth(frame), CGRectGetHeight(frame))];

3.写position的动画(position在UIView中类似center)


   CABasicAnimation *aniPosition = [CABasicAnimation animationWithKeyPath:@"position"];
    aniPosition.fromValue = [NSValue valueWithCGPoint:CGPointMake(50 + (CGRectGetMaxX(frame)-50)/2, 100)];
    aniPosition.toValue = [NSValue valueWithCGPoint:CGPointMake(50 + (CGRectGetMaxX(frame)-50)/2,100 + (CGRectGetMaxY(frame)-100)/2)];
//需要反方向延伸的
 aniPosition.fromValue = [NSValue valueWithCGPoint:CGPointMake(220 + (CGRectGetMaxX(frame)-220)/2,CGRectGetMaxY(frame))];
    aniPosition.toValue = [NSValue valueWithCGPoint:CGPointMake(220 + (CGRectGetMaxX(frame)-220)/2, 100 + (CGRectGetMaxY(frame) - 100)/2)];

CGRectGetMaxX

CGRectGetMaxX //解释一下,它的意思是获取到 x坐标+width 的值,Y对应 y坐标+height 的值   max代表最大,min代表最小最小时x,y坐标不变,宽度为原来的宽度,高度为0;

4.将两个动画组合起来


  CAAnimationGroup *anis = [CAAnimationGroup animation];
    anis.animations = @[aniBounds,aniPosition];
    anis.duration = 1;
    anis.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    anis.removedOnCompletion = NO;
    anis.fillMode=kCAFillModeForwards;
    [itemLayer addAnimation:anis forKey:nil];

你也可以尝试不组合,不组合矩形的position是固定的,两端同时延伸,不是我们要的效果,所以用positon来固定位置。


通过transform.scale.y和position


这里和上面的写法是一样的,区别是没有用bounds,改用了transform.scale.y(高的缩放值)

 CABasicAnimation *aniBounds = [CABasicAnimation animationWithKeyPath:@"transform.scale.y"];
    aniBounds.duration = 1;
    aniBounds.fromValue = @0.0;
    aniBounds.toValue = @1.0;
    aniBounds.repeatCount = 1;
    [itemLayer addAnimation:aniBounds forKey:@""];

其他的东西是一样的,也许还有其他的写法,博主暂时想不到了,Demo下载地址:点击下载


如果有其他好的方法欢迎和博主沟通!

目录
相关文章
|
7天前
|
安全 数据处理 Swift
深入探索iOS开发中的Swift语言特性
本文旨在为开发者提供对Swift语言在iOS平台开发的深度理解,涵盖从基础语法到高级特性的全面分析。通过具体案例和代码示例,揭示Swift如何简化编程过程、提高代码效率,并促进iOS应用的创新。文章不仅适合初学者作为入门指南,也适合有经验的开发者深化对Swift语言的认识。
24 9
|
6天前
|
Android开发 Swift iOS开发
探索安卓与iOS开发的差异和挑战
【10月更文挑战第37天】在移动应用开发的广阔舞台上,安卓和iOS这两大操作系统扮演着主角。它们各自拥有独特的特性、优势以及面临的开发挑战。本文将深入探讨这两个平台在开发过程中的主要差异,从编程语言到用户界面设计,再到市场分布的不同影响,旨在为开发者提供一个全面的视角,帮助他们更好地理解并应对在不同平台上进行应用开发时可能遇到的难题和机遇。
|
4天前
|
iOS开发 开发者
探索iOS开发中的SwiftUI框架
【10月更文挑战第39天】在苹果的生态系统中,SwiftUI框架以其声明式语法和易用性成为开发者的新宠。本文将深入SwiftUI的核心概念,通过实际案例展示如何利用这一框架快速构建用户界面,并探讨其对iOS应用开发流程的影响。
|
7天前
|
JSON 前端开发 API
探索iOS开发之旅:打造你的第一个天气应用
【10月更文挑战第36天】在这篇文章中,我们将踏上一段激动人心的旅程,一起构建属于我们自己的iOS天气应用。通过这个实战项目,你将学习到如何从零开始搭建一个iOS应用,掌握基本的用户界面设计、网络请求处理以及数据解析等核心技能。无论你是编程新手还是希望扩展你的iOS开发技能,这个项目都将为你提供宝贵的实践经验。准备好了吗?让我们开始吧!
|
12天前
|
设计模式 前端开发 Swift
探索iOS开发:从初级到高级的旅程
【10月更文挑战第31天】在这篇文章中,我们将一起踏上iOS开发的旅程。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的信息和技巧。我们将从基础开始,逐步深入到更高级的技术和概念。让我们一起探索iOS开发的世界吧!
|
15天前
|
设计模式 前端开发 Swift
探索iOS开发:从初级到高级的旅程
【10月更文挑战第28天】在这篇技术性文章中,我们将一起踏上一段探索iOS开发的旅程。无论你是刚入门的新手,还是希望提升技能的开发者,这篇文章都将为你提供宝贵的指导和灵感。我们将从基础概念开始,逐步深入到高级主题,如设计模式、性能优化等。通过阅读这篇文章,你将获得一个清晰的学习路径,帮助你在iOS开发领域不断成长。
46 2
|
16天前
|
Swift iOS开发 UED
如何使用Swift和UIKit在iOS应用中实现自定义按钮动画
本文通过一个具体案例,介绍如何使用Swift和UIKit在iOS应用中实现自定义按钮动画。当用户点击按钮时,按钮将从圆形变为椭圆形,颜色从蓝色渐变到绿色;释放按钮时,动画以相反方式恢复。通过UIView的动画方法和弹簧动画效果,实现平滑自然的过渡。
31 1
|
20天前
|
安全 API Swift
探索iOS开发中的Swift语言之美
【10月更文挑战第23天】在数字时代的浪潮中,iOS开发如同一艘航船,而Swift语言则是推动这艘船前进的风帆。本文将带你领略Swift的独特魅力,从语法到设计哲学,再到实际应用案例,我们将一步步深入这个现代编程语言的世界。你将发现,Swift不仅仅是一种编程语言,它是苹果生态系统中的一个创新工具,它让iOS开发变得更加高效、安全和有趣。让我们一起启航,探索Swift的奥秘,感受编程的乐趣。
|
22天前
|
Swift iOS开发 开发者
探索iOS开发中的SwiftUI框架
【10月更文挑战第21天】在苹果生态系统中,SwiftUI的引入无疑为iOS应用开发带来了革命性的变化。本文将通过深入浅出的方式,带领读者了解SwiftUI的基本概念、核心优势以及如何在实际项目中运用这一框架。我们将从一个简单的例子开始,逐步深入到更复杂的应用场景,让初学者能够快速上手,同时也为有经验的开发者提供一些深度使用的技巧和策略。
45 1
|
10天前
|
存储 数据可视化 Swift
探索iOS开发之旅:从新手到专家
【10月更文挑战第33天】在这篇文章中,我们将一起踏上一场激动人心的iOS开发之旅。无论你是刚刚入门的新手,还是已经有一定经验的开发者,这篇文章都将为你提供宝贵的知识和技能。我们将从基础的iOS开发概念开始,逐步深入到更复杂的主题,如用户界面设计、数据存储和网络编程等。通过阅读这篇文章,你将获得成为一名优秀iOS开发者所需的全面技能和知识。让我们一起开始吧!