POP简单动画简单使用 (入门级别)
动画可以让APP“更友好”的与用户交互,苹果提供很多的好看的动画供开发者使用,不过简单的平移、旋转、缩放.......使用起来很简单,但是想要进行一些比较复杂的动画效果,使用起来就比较难以实现,俗话说需求促进开发,facebook提供的开源的框架供我们免费使用,底层使用的是c++去实现,流畅度不输苹果的动画效果,甚至有的动画效果看起来比苹果提供的动画更“流畅”。。。。。。
这篇文章介绍大名鼎鼎的POP动画的使用
POP: https://github.com/facebook/pop
POP有四种动画:
一:POPBasicAnimation 基础动画 与苹果的 Core Animation 一样
二:POPSpringAnimation 弹簧动画
三:POPDecayAnimation 减速动画(阻尼动画)
四:POPCustomAnimation 自定义动画 (自己实现动画效果),使用很简单不要害怕!!!
第一步:安装
推荐使用Cocoa pods安装 (不会使用Cocoa pods的自行百度吧!以下代码是基于1.0.9版本的!!!)
pod 'pop', '~> 1.0.9'
第二部:编写代码
#pragma mark----------------POPBasicAnimation(基础动画)--------------------
#pragma mark--平移
一:X轴移动
#import "ViewController.h"
#import <POP.h> @interface ViewController () @property (nonatomic, weak) UIView * redView; @end @implementation ViewController - (void)viewDidLoad {
[super viewDidLoad]; UIView * view = [[UIView alloc]
initWithFrame:CGRectMake(, , , )];
view.backgroundColor = [UIColor redColor];
[self.view addSubview:view];
self.redView = view; } - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
[super touchesBegan:touches withEvent:event]; [self eyBasic_kPOPLayerPositionX];
} - (void)eyBasic_kPOPLayerPositionX
{
// kPOPLayerPositionX 这个参数决定了执行什么动画
POPBasicAnimation * basic = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPositionX]; // 不设置默认从当前位置开始执行动画
// basic.fromValue = @(self.redView.center.x); //移动后的位置 一定要包装为NSValue类型
basic.toValue = @(self.redView.center.x + ); //开始动画的时间 相当于延迟 (当前时间+1.0秒)一般不设置
basic.beginTime = CACurrentMediaTime() + 1.0f; // 动画从开始到结束执行的时间 默认为0.4S 根据需要修改
basic.duration = 0.5; // 字符串@"positionX" 是自己起的名字可以传nil,
// 有时候需要移除动画的时候才用到,一般很少用到
[self.redView pop_addAnimation:basic forKey:@"positionX"];
} @end
二: y轴移动
- (void)eyBasic_kPOPLayerPositionY
{
POPBasicAnimation * basic = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPositionY];
basic.toValue = @(self.redView.center.y + );
[self.redView pop_addAnimation:basic forKey:nil];
}
三:x和y轴同时移动
- (void)eyBasic_kPOPLayerPosition
{
POPBasicAnimation * basic = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPosition]; // 一定要包装为NSValue类型
basic.toValue = [NSValue valueWithCGPoint:CGPointMake(self.redView.center.x + , self.redView.center.y + )];
[self.redView pop_addAnimation:basic forKey:nil];
}
#pragma mark-----------------POPSpringAnimation(弹簧动画)-------------------
#pragma mark--平移
一:X轴移动
- (void)eySpring_kPOPLayerPositionX
{
POPSpringAnimation * spring = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionX]; spring.toValue = @(self.redView.center.x + ); // 动画执行的速度 0~20 默认12
spring.springSpeed = ; // 弹簧的范围 0~20 默认为4 默认效果非常不明显
spring.springBounciness = ; [self.redView pop_addAnimation:spring forKey:nil];
}
二: y轴移动
- (void)eySpring_kPOPLayerPositionY
{
POPSpringAnimation * spring = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPositionY]; spring.toValue = @(self.redView.center.y + ); spring.springBounciness = ; [self.redView pop_addAnimation:spring forKey:nil];
}
三:x和y轴同时移动
- (void)eySpring_kPOPLayerPosition
{
POPSpringAnimation * spring = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerPosition]; spring.toValue = [NSValue valueWithCGPoint:CGPointMake(self.redView.center.x + , self.redView.center.y + )];
spring.springBounciness = ; [self.redView pop_addAnimation:spring forKey:@"positionX"];
}
#pragma mark----------------POPDecayAnimation(减速动画)------------------
#pragma mark--平移
一:X轴移动
- (void)eyDecay_kPOPLayerPosition
{
POPDecayAnimation * decay = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];
// 速度
decay.velocity = @(); // 衰减系数(越小则衰减得越快) 默认为0.998
decay.deceleration = 0.99; [self.redView pop_addAnimation:decay forKey:nil];
}
二:y轴移动
- (void)eyDecay_kPOPLayerPositionY
{
POPDecayAnimation * decay = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionY];
// 速度
decay.velocity = @(); [self.redView pop_addAnimation:decay forKey:nil];
}
三:x和y轴同时移动
- (void)eyDecay_kPOPLayerPosition
{
POPDecayAnimation * decay = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPosition];
// 速度
decay.velocity = [NSValue valueWithCGPoint:CGPointMake(self.redView.center.x + , self.redView.center.y + )]; [self.redView pop_addAnimation:decay forKey:nil];
}
更多内容--> 博客导航 每周一篇哟!!!
有任何关于iOS开发的问题!欢迎下方留言!!!或者邮件 lieryangios@126.com 虽然我不一定能够解答出来,但是我会请教iOS开发高手!!!解答您的问题!!!
POP简单动画简单使用 (入门级别)的更多相关文章
- UI设计篇·入门篇·简单动画的实现,透明动画/旋转动画/移动动画/缩放动画,混合动画效果的实现,为动画设置监听事件,自定义动画的方法
基本的动画构成共有四种:透明动画/旋转动画/移动动画/缩放动画. 配置动画的方式有两种,一种是直接使用代码来配置动画效果,另一种是使用xml文档配置动画效果 相比而言,用xml文档写出来的动画效果,写 ...
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- jquery添加光棒效果的各种方式以及简单动画复杂动画
过滤器.绑定事件.动画 一.基本过滤器 语法 描述 返回值 :first 选取第一个元素 单个元素 :last 选取最后一个元素 单个元素 :not(selector) 选取去除所有与给定选择器匹 ...
- UIView简单动画
UIView动态实现的效果有以下几种: 1.动态改变frame 2.动态改变color 3.动态改变alpha 4.动态改变bounds 首先,我们先看几种BasicView动画 #pragma ma ...
- IOS 简单动画 首尾式动画
首尾式动画 首尾式动画即通过实现控件由初始状态到结束状态的过程.(主要表现在控件的Frame 透明度 ) // // ViewController.m // CX 简单动画 // // Created ...
- jQuery中自定义简单动画的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- canvas制作简单动画
在画布元素<canvas>中,除了绘制图形.图像.文字外,还可以制作一些简单的动画,制作过程十分简单,主要分为两步操作: 1.自定义一个函数,用于图形的移动或其他动作. 2.使用setIn ...
- Cocos2d-x 2.1.5 简单动画
Cocos2d新版本函数更改了一些. 下面的代码可以产生一个简单动画. //第一步:生成动画需要的数据 CCTexture2D *texture=CCTextureCache::sharedTextu ...
- python实现简单动画——生命游戏
生命游戏 生命游戏的宇宙是一个无限的,其中细胞的二维正交网格,每个细胞处于两种可能的状态之一,即*活着*或*死亡*(分别是*人口稠密*和*无人居住*).每个细胞与它的八个邻居相互作用,这八个邻居是水平 ...
随机推荐
- 洛谷P1602 Sramoc问题
P1602 Sramoc问题 题目描述 话说员工们整理好了筷子之后,就准备将快餐送出了,但是一看订单,都傻眼了:订单上没有留电话号码,只写了一个sramoc(k,m)函数,这什么东西?什么意思?于是餐 ...
- Python学习笔记(正则表达式)
\b - 表示以什么开头或结尾 \d - 匹配数字 \w - 匹配字母或数字或下划线或汉字(我试验下了,发现3.x版本可以匹配汉字,但2.x版本不可以) \s - 匹配任意的空白符 ^ - 匹配字符串 ...
- mysql-5.5.56免安装版配置方法
1. 下载mysql-5.5.56-winx64 网址:dev.mysql.com/downloads/mysql/ 2. 解压MySQL压缩包 将以下载的MySQL压缩包解压到自定义目录下,我 ...
- Jquery基本教程(背还是要背的)
Jquery入门学习 一.简介 1.Jquery是基于JavaScript的一种框架,兼容主流浏览器,提供了dom,animate(JQ+CSS),ajax; 2.Jquery2.0后版本不支持IE6 ...
- 1366 - Incorrect string value:'\xE5\xBC\xA0\xE4\xB8\x89' for column 'name' a 错误修改
把name的字符集修改成 utf8 ,然后把表关了从新打开,就可以了 如果还不行,就从新创表,在创表的时候修改name的字符集 如果还不行,就修改my.ini 它在你的mysql安装路径里 [mysq ...
- 《机器学习实战》-k近邻算法
目录 K-近邻算法 k-近邻算法概述 解析和导入数据 使用 Python 导入数据 实施 kNN 分类算法 测试分类器 使用 k-近邻算法改进约会网站的配对效果 收集数据 准备数据:使用 Python ...
- Java - 一道关于Arrays.asList的题目
题目 有这样一道有趣的题目: final int[] test = new int[]{1,2,3,4}; final Integer[] test2 = new Integer[]{1,2,3,4} ...
- uoj207共价大爷游长沙
话说我可能还没有调出魔法森林呢...说好的lct第一题呢... 又是一个随机化的方法,毕竟又是判定性的问题 上次是判断无向图联通 这次是判断一些路径是否经过一条定边 若把路径上的边全部异或上一个路径的 ...
- eShopOnContainers(一)
微软微服务架构eShopOnContainers(一) 为了推广.Net Core,微软为我们提供了一个开源Demo-eShopOnContainers,这是一个使用Net Core框架开发的,跨平台 ...
- 064 Minimum Path Sum 最小路径和
给定一个只含非负整数的 m x n 网格,找到一条从左上角到右下角的可以使数字之和最小的路径.注意: 每次只能向下或者向右移动一步.示例 1:[[1,3,1], [1,5,1], [4,2,1]]根据 ...