iOS简单动画
知识架构
- CALayer 图层类
- CABasicAnimation 基础动画
- CAKeyFrameAnimation 帧动画
- CATransition 转场动画
- CAAnimationGroup 动画组
- layer的基本概念
其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图层,在创建UIView对象时,UIView内部会自动创建一个图层(CALyer对象),通过UIView的layer属性可以访问这个层。
- 基本属性
Bounds;position;frame;backgroundColor; opacity;cornerRadius;borderWidth; borderColor;shadowOffset; shadowColor; shadowOpacity;
我写了一些简单的demo,大家可以看看.......
//
// ViewController.m
// 简单的动画
//
// Created by 李盼盼 on 16/5/16.
// Copyright © 2016年 李盼盼. All rights reserved.
//
#import "ViewController.h"
@interface ViewController ()
@property (strong, nonatomic) CALayer *subLayer;
@property (strong, nonatomic) UIView *redView;
@property (strong, nonatomic) CALayer *subLayer2;
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@property (assign, nonatomic) NSInteger currentIndex;
@end
@implementation ViewController
- (void)viewDidLoad {
self.view.backgroundColor = [UIColor colorWithRed:234/255.0f green:234/255.0f blue:234/255.0f alpha:1];
[super viewDidLoad];
// 行走的方块
_subLayer = [[CALayer alloc]init];
_subLayer.frame = CGRectMake(50, 50, 50, 50);
_subLayer.backgroundColor = [UIColor redColor].CGColor;
[self.view.layer addSublayer:_subLayer];
// 旋转放大的方块
_redView = [[UIView alloc]initWithFrame:CGRectMake(200, 100, 50, 50)];
_redView.backgroundColor = [UIColor yellowColor];
[self.view addSubview:_redView];
// 慢慢放大的方块
_subLayer2 = [[CALayer alloc]init];
_subLayer2.frame = CGRectMake(50, 250, 50, 50);
_subLayer2.backgroundColor = [UIColor grayColor].CGColor;
[self.view.layer addSublayer:_subLayer2];
// 仿真翻页
_imageView.image = [UIImage imageNamed:@"a0.jpg"];
_currentIndex = 0;
}
#pragma mark ---- 上一张
- (IBAction)Last:(UIButton *)sender {
if (_currentIndex == 0) {
_currentIndex = 12;
}else{
_currentIndex--;
}
_imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"a%ld.jpg",_currentIndex]];
// 转场动画
CATransition *anim = [CATransition animation];
// 过度类型
anim.type = @"pageUnCurl";
// 动画过渡方向
anim.subtype = @"fromTop";
anim.duration = 0.8;
[_imageView.layer addAnimation:anim forKey:nil];
}
#pragma mark ---- 下一张
- (IBAction)next:(UIButton *)sender {
if (_currentIndex == 12) {
_currentIndex = 0;
}else{
_currentIndex++;
}
_imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"a%ld.jpg",_currentIndex]];
CATransition *anim = [CATransition animation];
anim.type = @"pageCurl";
anim.subtype = kCATransitionFromBottom;
anim.duration = 0.8;
[_imageView.layer addAnimation:anim forKey:nil];
}
-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
#pragma mark ---- 旋转放大的动画
CABasicAnimation *rotationAnim = [CABasicAnimation animation];
// rotationAnim.duration = 2;
rotationAnim.keyPath = @"transform.rotation.z";
rotationAnim.toValue = @(3.14);
rotationAnim.repeatCount = MAXFLOAT;
CABasicAnimation *scaleAnim = [CABasicAnimation animation];
scaleAnim.duration = 2;
scaleAnim.keyPath = @"transform";
scaleAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(2, 2, 0)];
scaleAnim.repeatCount = MAXFLOAT;
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = @[rotationAnim,scaleAnim];
group.duration = 5;
group.fillMode = kCAFillModeForwards;
group.removedOnCompletion = NO;
[_redView.layer addAnimation:group forKey:nil];
}
-(void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
#pragma mark ---- 行走的方块
CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
anim.keyPath = @"position";
anim.duration = 5.0;
NSValue *value = [NSValue valueWithCGPoint:CGPointMake(50, 50)];
NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(50, 100)];
NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(100, 150)];
NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(100, 150)];
NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(50, 50)];
anim.values = @[value,value1,value2,value3,value4,value5];
// 设置动画的执行节奏
// kCAMediaTimingFunctionEaseInEaseOut:开始较慢,中间会加速,结束会减速
anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
[self.subLayer addAnimation:anim forKey:nil];
#pragma mark ---- 慢慢放大的方块
CABasicAnimation *anim1 = [CABasicAnimation animation];
// 动画执行是我时候修改属性
anim1.keyPath = @"bounds";
// 起始值
// anim1.fromValue = [NSValue valueWithCGRect:CGRectMake(50, 250, 50, 50)];
// 目标值
anim1.toValue = [NSValue valueWithCGRect:CGRectMake(50, 250, 100, 100)];
anim1.delegate = self;
anim1.duration = 5;
[_subLayer2 addAnimation:anim1 forKey:@"animation"];
/**不删除动画,同时保存动画最终效果**/
// 动画结束后自动删除动画
anim.removedOnCompletion = NO;
// 默认保存原来的样式:设置为使用最新的样式
anim.fillMode = kCAFillModeForwards;
}
- (IBAction)removeAnim:(UIButton *)sender {
[_subLayer2 removeAnimationForKey:@"animation"];
}
#pragma mark ---- 动画的代理
-(void)animationDidStart:(CAAnimation *)anim{
NSLog(@"%s",__func__);
}
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
NSLog(@"%s",__func__);
}
@end
效果如下:
iOS简单动画的更多相关文章
- IOS 简单动画 首尾式动画
首尾式动画 首尾式动画即通过实现控件由初始状态到结束状态的过程.(主要表现在控件的Frame 透明度 ) // // ViewController.m // CX 简单动画 // // Created ...
- iOS 简单动画 序列帧动画
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ NSLog(@"旭宝爱吃 ...
- iOS 简单动画 block动画
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ UIView * view = [ ...
- iOS简单动画效果:闪烁、移动、旋转、路径、组合
#define kDegreesToRadian(x) (M_PI * (x) / 180.0) #define kRadianToDegrees(radian) (radian*180.0)/(M_ ...
- iOS CAReplicatorLayer 简单动画
代码地址如下:http://www.demodashi.com/demo/11601.html 写在最前面,最近在看学习的时候,偶然间发现一个没有用过的Layer,于是抽空研究了下,本来应该能提前记录 ...
- iOS block-base 动画简单用法+关键帧动画设置线性变化速度的问题
本文转载至 http://www.tuicool.com/articles/aANBF3m 时间 2014-12-07 20:13:37 segmentfault-博客原文 http://segm ...
- IOS 核心动画之CAKeyframeAnimation - iBaby
- IOS 核心动画之CAKeyframeAnimation - 简单介绍 是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation ...
- Swift 实现iOS Animation动画教程
这是一篇翻译文章.原文出处:http://www.raywenderlich.com/95910/uiview-animation-swift-tutorial 动画( animation)是iOS用 ...
- iOS 开发--动画
在iOS开发中,制作动画效果是最让开发者享受的环节之一.一个设计严谨.精细的动画效果能给用户耳目一新的效果,吸引他们的眼光 —— 这对于app而言是非常重要的.我们总是追求更为酷炫的实现,如果足够仔细 ...
随机推荐
- ibatis #于 $区别
系统框架用ibatis,开发中ibatis配置文件中执行order by #orderByClause# ,怎么搞都没有效果, 后面改成 order by $orderByClause$,OK,问题解 ...
- 【Alpha】Daily Scrum Meeting第九次
一.本次Daily Scrum Meeting主要内容 汇报情况. 上次提到的数据库字段问题,已经和合作队伍统一完毕. 在服务器上解析Json数据仍在解决中,现在直接使用手机发过去的数据进行解析. 二 ...
- js--敏感词屏蔽
<!doctype html><html><head><meta charset="utf-8"><meta name=&qu ...
- javaScript中其他类型的值转换为Boolean类型
将javaScript中其他任意类型的值转换为对应Boolean类型的值. 一 将number类型的值转换为Boolean类型 数值为0: var myBoolean = new Boolean(0 ...
- 一起来做chrome扩展《可配置的代理》
一.本文主要涉及相关内容: chrome.proxy pacScript browser_action popup localStroage 二.预览 (代理运行截图,图中的代理服务器有防火墙,暂不对 ...
- 使用git@osc管理现有项目
首先安装git和powershell集成git工具 参考 http://www.cnblogs.com/kreo/p/4685988.html 打开windows powershell,进入项目目录, ...
- 【转】c#处理3种json数据的实例
http://www.jb51.net/article/48027.htm http://json2csharp.chahuo.com/ 网络中数据传输经常是xml或者json,现在做的一个项目之前调 ...
- Spring Data JPA
转自: http://www.cnblogs.com/WangJinYang/p/4257383.html Spring 框架对 JPA 的支持 Spring 框架对 JPA 提供的支持主要体现在如下 ...
- Smokeping安装教程
Smokeping安装教程 #Smokeping2.6.8安装教程 #2016.3.6 改编v1.0 #Linux运维技术交流 347163978 环境 CentOS release 6.4 (F ...
- Nginx+uwsgi安装配置
一.安装基础开发包 yum groupinstall "Development tools" yum install zlib-devel bzip2-devel pcre-dev ...