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下载地址:点击下载


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

目录
相关文章
|
29天前
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台策略
在移动应用开发的战场上,安卓和iOS两大阵营各据一方。随着技术的演进,跨平台开发框架成为开发者的新宠,旨在实现一次编码、多平台部署的梦想。本文将探讨跨平台开发的优势与挑战,并分享实用的开发技巧,帮助开发者在安卓和iOS的世界中游刃有余。
|
6天前
|
iOS开发 开发者 MacOS
深入探索iOS开发中的SwiftUI框架
【10月更文挑战第21天】 本文将带领读者深入了解Apple最新推出的SwiftUI框架,这一革命性的用户界面构建工具为iOS开发者提供了一种声明式、高效且直观的方式来创建复杂的用户界面。通过分析SwiftUI的核心概念、主要特性以及在实际项目中的应用示例,我们将展示如何利用SwiftUI简化UI代码,提高开发效率,并保持应用程序的高性能和响应性。无论你是iOS开发的新手还是有经验的开发者,本文都将为你提供宝贵的见解和实用的指导。
88 66
|
16天前
|
开发框架 Android开发 iOS开发
安卓与iOS开发中的跨平台策略:一次编码,多平台部署
在移动应用开发的广阔天地中,安卓和iOS两大阵营各占一方。随着技术的发展,跨平台开发框架应运而生,它们承诺着“一次编码,到处运行”的便捷。本文将深入探讨跨平台开发的现状、挑战以及未来趋势,同时通过代码示例揭示跨平台工具的实际运用。
|
21天前
|
Java 调度 Android开发
安卓与iOS开发中的线程管理差异解析
在移动应用开发的广阔天地中,安卓和iOS两大平台各自拥有独特的魅力。如同东西方文化的差异,它们在处理多线程任务时也展现出不同的哲学。本文将带你穿梭于这两个平台之间,比较它们在线程管理上的核心理念、实现方式及性能考量,助你成为跨平台的编程高手。
|
22天前
|
存储 前端开发 Swift
探索iOS开发:从新手到专家的旅程
本文将带您领略iOS开发的奇妙之旅,从基础概念的理解到高级技巧的掌握,逐步深入iOS的世界。文章不仅分享技术知识,还鼓励读者在编程之路上保持好奇心和创新精神,实现个人成长与技术突破。
|
25天前
|
安全 IDE Swift
探索iOS开发之旅:从初学者到专家
在这篇文章中,我们将一起踏上iOS开发的旅程,从基础概念的理解到深入掌握核心技术。无论你是编程新手还是希望提升技能的开发者,这里都有你需要的指南和启示。我们将通过实际案例和代码示例,展示如何构建一个功能齐全的iOS应用。准备好了吗?让我们一起开始吧!
|
1月前
|
安全 Swift iOS开发
Swift 与 UIKit 在 iOS 应用界面开发中的关键技术和实践方法
本文深入探讨了 Swift 与 UIKit 在 iOS 应用界面开发中的关键技术和实践方法。Swift 以其简洁、高效和类型安全的特点,结合 UIKit 丰富的组件和功能,为开发者提供了强大的工具。文章从 Swift 的语法优势、类型安全、编程模型以及与 UIKit 的集成,到 UIKit 的主要组件和功能,再到构建界面的实践技巧和实际案例分析,全面介绍了如何利用这些技术创建高质量的用户界面。
30 2
|
1月前
|
vr&ar Android开发 iOS开发
安卓与iOS开发中的用户界面设计原则
【10月更文挑战第41天】探索移动应用开发的精髓,本文将深入分析安卓和iOS平台上用户界面设计的核心原则。通过比较两大操作系统的设计哲学,我们将揭示如何打造直观、易用且美观的应用程序界面。无论你是初学者还是资深开发者,这篇文章都将为你提供宝贵的见解和实用的技巧,帮助你在竞争激烈的应用市场中脱颖而出。
|
1月前
|
设计模式 Swift iOS开发
探索iOS开发:从基础到高级,打造你的第一款App
【10月更文挑战第40天】在这个数字时代,掌握移动应用开发已成为许多技术爱好者的梦想。本文将带你走进iOS开发的世界,从最基础的概念出发,逐步深入到高级功能实现,最终指导你完成自己的第一款App。无论你是编程新手还是有志于扩展技能的开发者,这篇文章都将为你提供一条清晰的学习路径。让我们一起开始这段旅程吧!
|
1月前
|
iOS开发 开发者
探索iOS开发中的SwiftUI框架
【10月更文挑战第39天】在苹果的生态系统中,SwiftUI框架以其声明式语法和易用性成为开发者的新宠。本文将深入SwiftUI的核心概念,通过实际案例展示如何利用这一框架快速构建用户界面,并探讨其对iOS应用开发流程的影响。