iOS开发UI篇—核心动画(关键帧动画)

简介: iOS开发UI篇—核心动画(关键帧动画) 一、简单介绍 是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSArray保存这些数值 属性解析: values:就是上述的NSArray对象。

iOS开发UI篇—核心动画(关键帧动画)

一、简单介绍

是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSArray保存这些数值

属性解析:

values:就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧

path:可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path,那么values将被忽略

keyTimes:可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的

说明:CABasicAnimation可看做是最多只有2个关键帧的CAKeyframeAnimation

二、代码示例

第一种方式:

代码:

 1 //
 2 //  YYViewController.m
 3 //  10-核心动画(关键帧动画1)
 4 //
 5 //  Created by apple on 14-6-21.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYViewController.h"
10 
11 @interface YYViewController ()
12 @property (weak, nonatomic) IBOutlet UIView *customView;
13 
14 @end
15 
16 @implementation YYViewController
17 
18 
19 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
20 {
21     //1.创建核心动画
22     CAKeyframeAnimation *keyAnima=[CAKeyframeAnimation animation];
23     //平移
24     keyAnima.keyPath=@"position";
25     //1.1告诉系统要执行什么动画
26     NSValue *value1=[NSValue valueWithCGPoint:CGPointMake(100, 100)];
27     NSValue *value2=[NSValue valueWithCGPoint:CGPointMake(200, 100)];
28     NSValue *value3=[NSValue valueWithCGPoint:CGPointMake(200, 200)];
29     NSValue *value4=[NSValue valueWithCGPoint:CGPointMake(100, 200)];
30     NSValue *value5=[NSValue valueWithCGPoint:CGPointMake(100, 100)];
31     keyAnima.values=@[value1,value2,value3,value4,value5];
32     //1.2设置动画执行完毕后,不删除动画
33     keyAnima.removedOnCompletion=NO;
34     //1.3设置保存动画的最新状态
35     keyAnima.fillMode=kCAFillModeForwards;
36     //1.4设置动画执行的时间
37     keyAnima.duration=4.0;
38     //1.5设置动画的节奏
39     keyAnima.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
40     
41     //设置代理,开始—结束
42     keyAnima.delegate=self;
43     //2.添加核心动画
44     [self.customView.layer addAnimation:keyAnima forKey:nil];
45 }
46 
47 -(void)animationDidStart:(CAAnimation *)anim
48 {
49     NSLog(@"开始动画");
50 }
51 
52 -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
53 {
54     NSLog(@"结束动画");
55 }
56 @end

说明:这个项目在storyboard中拖入了一个view,并和控制器中的custom进行了关联。

效果和打印结果:

   

补充:设置动画的节奏

第二种方式(使用path)让layer在指定的路径上移动(画圆):

代码:

 1 #import "YYViewController.h"
 2 
 3 @interface YYViewController ()
 4 @property (weak, nonatomic) IBOutlet UIView *customView;
 5 
 6 @end
 7 
 8 @implementation YYViewController
 9 
10 
11 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
12 {
13     //1.创建核心动画
14     CAKeyframeAnimation *keyAnima=[CAKeyframeAnimation animation];
15     //平移
16     keyAnima.keyPath=@"position";
17     //1.1告诉系统要执行什么动画
18     //创建一条路径
19     CGMutablePathRef path=CGPathCreateMutable();
20     //设置一个圆的路径
21     CGPathAddEllipseInRect(path, NULL, CGRectMake(150, 100, 100, 100));
22     keyAnima.path=path;
23     
24     //有create就一定要有release
25     CGPathRelease(path);
26     //1.2设置动画执行完毕后,不删除动画
27     keyAnima.removedOnCompletion=NO;
28     //1.3设置保存动画的最新状态
29     keyAnima.fillMode=kCAFillModeForwards;
30     //1.4设置动画执行的时间
31     keyAnima.duration=5.0;
32     //1.5设置动画的节奏
33     keyAnima.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
34     
35     //设置代理,开始—结束
36     keyAnima.delegate=self;
37     //2.添加核心动画
38     [self.customView.layer addAnimation:keyAnima forKey:nil];
39 }
40 
41 -(void)animationDidStart:(CAAnimation *)anim
42 {
43     NSLog(@"开始动画");
44 }
45 
46 -(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
47 {
48     NSLog(@"结束动画");
49 }
50 @end

说明:可以通过path属性,让layer在指定的轨迹上运动。

停止动画:

 1 #import "YYViewController.h"
 2 
 3 @interface YYViewController ()
 4 @property (weak, nonatomic) IBOutlet UIView *customView;
 5 - (IBAction)stopOnClick:(UIButton *)sender;
 6 
 7 @end
 8 
 9 @implementation YYViewController
10 
11 
12 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
13 {
14     //1.创建核心动画
15     CAKeyframeAnimation *keyAnima=[CAKeyframeAnimation animation];
16     //平移
17     keyAnima.keyPath=@"position";
18     //1.1告诉系统要执行什么动画
19     //创建一条路径
20     CGMutablePathRef path=CGPathCreateMutable();
21     //设置一个圆的路径
22     CGPathAddEllipseInRect(path, NULL, CGRectMake(150, 100, 100, 100));
23     keyAnima.path=path;
24     
25     //有create就一定要有release
26     CGPathRelease(path);
27     //1.2设置动画执行完毕后,不删除动画
28     keyAnima.removedOnCompletion=NO;
29     //1.3设置保存动画的最新状态
30     keyAnima.fillMode=kCAFillModeForwards;
31     //1.4设置动画执行的时间
32     keyAnima.duration=5.0;
33     //1.5设置动画的节奏
34     keyAnima.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
35     
36     //2.添加核心动画
37     [self.customView.layer addAnimation:keyAnima forKey:@"wendingding"];
38 }
39 
40 - (IBAction)stopOnClick:(UIButton *)sender {
41     //停止self.customView.layer上名称标示为wendingding的动画
42     [self.customView.layer removeAnimationForKey:@"wendingding"];
43 }
44 @end

点击停止动画,程序内部会调用  [self.customView.layer removeAnimationForKey:@"wendingding"];停止self.customView.layer上名称标示为wendingding的动画。

三、图标抖动

代码示例:

 1 //
 2 //  YYViewController.m
 3 //  12-图标抖动
 4 //
 5 //  Created by apple on 14-6-21.
 6 //  Copyright (c) 2014年 itcase. All rights reserved.
 7 //
 8 
 9 #import "YYViewController.h"
10 #define angle2Radian(angle)  ((angle)/180.0*M_PI)
11 
12 @interface YYViewController ()
13 @property (weak, nonatomic) IBOutlet UIImageView *iconView;
14 
15 @end
16 
17 
18 @implementation YYViewController
19 
20 -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
21 {
22     //1.创建核心动画
23     CAKeyframeAnimation *keyAnima=[CAKeyframeAnimation animation];
24     keyAnima.keyPath=@"transform.rotation";
25     //设置动画时间
26     keyAnima.duration=0.1;
27     //设置图标抖动弧度
28     //把度数转换为弧度  度数/180*M_PI
29     keyAnima.values=@[@(-angle2Radian(4)),@(angle2Radian(4)),@(-angle2Radian(4))];
30     //设置动画的重复次数(设置为最大值)
31     keyAnima.repeatCount=MAXFLOAT;
32     
33     keyAnima.fillMode=kCAFillModeForwards;
34     keyAnima.removedOnCompletion=NO;
35     //2.添加动画
36     [self.iconView.layer addAnimation:keyAnima forKey:nil];
37 }
38 
39 @end

说明:图标向左向右偏转一个弧度(4),产生抖动的视觉效果。

程序界面:

目录
相关文章
|
编译器 iOS开发 异构计算
读iOS核心动画笔记
读iOS核心动画笔记
70 0
|
3月前
|
Swift iOS开发 UED
如何使用Swift和UIKit在iOS应用中实现自定义按钮动画
本文通过一个具体案例,介绍如何使用Swift和UIKit在iOS应用中实现自定义按钮动画。当用户点击按钮时,按钮将从圆形变为椭圆形,颜色从蓝色渐变到绿色;释放按钮时,动画以相反方式恢复。通过UIView的动画方法和弹簧动画效果,实现平滑自然的过渡。
90 1
|
4月前
|
Swift iOS开发 UED
如何使用Swift和UIKit在iOS应用中实现自定义按钮动画
【10月更文挑战第18天】本文通过一个具体案例,介绍如何使用Swift和UIKit在iOS应用中实现自定义按钮动画。当用户按下按钮时,按钮将从圆形变为椭圆形并从蓝色渐变为绿色;释放按钮时,动画恢复原状。通过UIView的动画方法和弹簧动画效果,实现平滑自然的动画过渡。
75 5
|
5月前
|
Swift iOS开发 UED
揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【9月更文挑战第5天】本文通过具体案例介绍如何在iOS应用中使用Swift与UIKit实现自定义按钮动画,当用户点击按钮时,按钮将从圆形变为椭圆形并从蓝色渐变到绿色,释放后恢复原状。文中详细展示了代码实现过程及动画平滑过渡的技巧,帮助读者提升应用的视觉体验与特色。
87 11
|
5月前
|
前端开发 图形学 开发者
【独家揭秘】那些让你的游戏瞬间鲜活起来的Unity UI动画技巧:从零开始打造动态按钮,提升玩家交互体验的绝招大公开!
【9月更文挑战第1天】在游戏开发领域,Unity 是最受欢迎的游戏引擎之一,其强大的跨平台发布能力和丰富的功能集让开发者能够迅速打造出高质量的游戏。优秀的 UI 设计对于游戏至关重要,尤其是在手游市场,出色的 UI 能给玩家留下深刻的第一印象。Unity 的 UGUI 系统提供了一整套解决方案,包括 Canvas、Image 和 Button 等组件,支持添加各种动画效果。
294 3
|
6月前
|
Swift iOS开发 UED
【绝妙创意】颠覆你的视觉体验!揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【8月更文挑战第13天】本文通过一个具体案例,介绍如何使用Swift与UIKit在iOS应用中创建独特的按钮动画效果。当按钮被按下时,其形状从圆形变化为椭圆形,颜色则从蓝色渐变为绿色;释放后,动画反向恢复原状。利用UIView动画方法及弹簧动画效果,实现了平滑自然的过渡。通过调整参数,开发者可以进一步优化动画体验,增强应用的互动性和视觉吸引力。
71 7
|
6月前
|
开发者 图形学 前端开发
绝招放送:彻底解锁Unity UI系统奥秘,五大步骤教你如何缔造令人惊叹的沉浸式游戏体验,从Canvas到动画,一步一个脚印走向大师级UI设计
【8月更文挑战第31天】随着游戏开发技术的进步,UI成为提升游戏体验的关键。本文探讨如何利用Unity的UI系统创建美观且功能丰富的界面,包括Canvas、UI元素及Event System的使用,并通过具体示例代码展示按钮点击事件及淡入淡出动画的实现过程,助力开发者打造沉浸式的游戏体验。
168 0
|
6月前
|
测试技术 Swift iOS开发
探索iOS自动化测试:使用Swift编写UI测试
【8月更文挑战第31天】在软件开发的海洋中,自动化测试是保证船只不偏离航线的灯塔。本文将带领读者启航,深入探索iOS应用的自动化UI测试。我们将通过Swift语言,点亮代码的灯塔,照亮测试的道路。文章不仅会展示如何搭建测试环境,还会提供实用的代码示例,让理论知识在实践中生根发芽。无论你是新手还是有经验的开发者,这篇文章都将是你技能提升之旅的宝贵指南。
|
9月前
|
iOS开发
iOS设备功能和框架: 如何使用 Core Animation 创建动画效果?
iOS设备功能和框架: 如何使用 Core Animation 创建动画效果?
154 0
|
JavaScript
Vue框架Element UI教程-出现和隐藏动画(三)
Vue框架Element UI教程-出现和隐藏动画(三)
122 0

热门文章

最新文章

  • 1
    用自然语言控制电脑,字节跳动开源 UI-TARS 的桌面版应用!内附详细的安装和配置教程
  • 2
    UI-TARS:字节跳动开源专注于多平台 GUI 自动化交互的视觉语言模型
  • 3
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 4
    SpringBoot整合Flowable【03】- 通过Flowable-UI体验一个简单流程
  • 5
    移动端UI名词 - AxureMost
  • 6
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
  • 7
    不要再责怪你的UI设计师为什么没有用rp?ps?figma?sketch?xd?如何免费转换非在线工具收费转换-本文将教会你常规ui设计源文件格式相互之间如何转换并且保持矢量图和标注注释问题-优雅草央千澈
  • 8
    【05】2025年1月首发完整版-篇幅较长-苹果app如何上架到app store完整流程·不借助第三方上架工具的情况下无需花钱但需仔细学习-优雅草央千澈详解关于APP签名以及分发-们最关心的一篇来了-IOS上架app
  • 9
    unity判断鼠标在不在UI上
  • 10
    uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决