UI:动画
UIView 层级管理、触摸、检测手机是否横屏、调整设备的方向
动画:为了提高用户的体验
View层的动画、UIlayer层的动画。UIView改变视图效果、UIlayer的绘图框架
#pragma mark-IOS 4之前动画操作
//开始动画
- (IBAction)starAnimation:(id)sender {
//UIview 的一些属性的变化,来实现动画效果
[self handlePropertyAnimation];
}
#pragma mark---UIView Animation---
-(void)handlePropertyAnimation{
//通过改变 UIView 属性(frame bounds center alpha transform旋转 )来达到一些动画
//参数1 参数2
//IOS4之前的动画方式,必须写在动画开始 与 结束之间
[UIView beginAnimations:nil context:nil];//开始动画
//设置动画时长 参数:动画效果类型
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];//设置动画的变化曲线
[UIView setAnimationDuration:5];
//动画是否需要延迟
[UIView setAnimationDelay:0.5];
//设置动画的重复次数
[UIView setAnimationRepeatCount:5];
//改变视图的中心点位置
CGPoint center = self.animationView.center;
center.y += 80;
self.animationView.center = center;
//改变alpha 值
self.animationView.alpha = 0.2;
//动画是否从当前的状态开始
[UIView setAnimationBeginsFromCurrentState:YES];
//是否翻转动画
[UIView setAnimationRepeatAutoreverses:YES];
//翻转参数设置
self.animationView.transform = CGAffineTransformRotate(self.animationView.transform, 0.5);
//旋转的时候改变自身的缩放比
self.animationView.transform = CGAffineTransformScale(self.animationView.transform, 0.5, 0.5);
//改变视图的背景颜色
self.animationView.backgroundColor =[UIColor yellowColor];
//设置动画的代理(这个不用遵循协议)
[UIView setAnimationDelegate:self];
//动画结束的时候出发的方法
[UIView setAnimationDidStopSelector:@selector(animationStop)];
//动画开始的时候触发的方法
[UIView setAnimationWillStartSelector:@selector(animationWillStart)];
[UIView commitAnimations];//结束动画
}
#pragma mark---动画开始与结束的时候触发方法
-(void)animationStop{
NSLog(@"动画结束");
//相应的操作
}
-(void)animationWillStart{
NSLog(@"动画开始");
//相应的操作
}
#pragma mark-IOS 4之后动画操作
-(void)handleBlockAnimation{
//参数1: 动画持续时间 参数2: 动画的属性
[UIView animateWithDuration:5 animations:^{
CGPoint center = self.animationView.center;
center.y += 80;
self.animationView.center = center;
}];
//中级用法 参数1 动画持续时间 参数2 动画属性 参数3 动画之后的效果
[UIView animateWithDuration:5 animations:^{
self.animationView.transform = CGAffineTransformRotate(self.animationView.transform, 0.5);
self.animationView.bounds = CGRectMake(0, 0, 50, 50);
self.animationView.transform = CGAffineTransformMakeTranslation(10, 12);
} completion:^(BOOL finished) {
self.animationView.transform = CGAffineTransformMakeScale(0.4, 0.2);
[self animationStop];
}];
//高级用法 参数1 动画持续时间 参数2 延迟时间 参数3 动画开始与结束后的操作
[UIView animateWithDuration:1 delay:0.2 options:UIViewAnimationOptionAllowUserInteraction animations:^{
CGPoint center = self.animationView.center;
center.x +=100;
self.animationView.center = center;
self.animationView.alpha = 0.1;
} completion:^(BOOL finished) {
[self animationStop];
}];
//弹簧效果 参数1 动画持续时间 参数2 延迟时间 参数3:弹簧强度,范围最大值是1 参数4:开始速度 参数5:动画速度 参数6:动画效果 参数7:结束时候的操作
[UIView animateWithDuration:0.5 delay:0.2 usingSpringWithDamping:0.8 initialSpringVelocity:0.8 options:UIViewAnimationOptionLayoutSubviews animations:^{
CGPoint center = self.bounTf.center;
center.y += 50;
self.bounTf.center = center;
self.bounTf.transform = CGAffineTransformMakeScale(1, 1.2);
//发抖的效果
[self.bounTf shake];
} completion:^(BOOL finished) {
}];
}
动画
使用UIView 的属性操作动画
改变图片的大小:self.imageView.transform = CGAffineTransformMakeScale(1.2,);
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
objective-c 在ios中控件旋转会变长 有什么解决方案CGAffineTransform at =CGAffineTransformMakeRotation((M_PI/)*);at =CGAffineTransformTranslate(at,,);[mainview setTransform:at];
objective-c 在ios中控件旋转会变长 有什么解决方案
CGAffineTransform at =CGAffineTransformMakeRotation((M_PI/)*);
at =CGAffineTransformTranslate(at,,);
[mainview setTransform:at];
/*
UIViewAutoresizingNone // 不自动调整
UIViewAutoresizingFlexibleLeftMargin // 固定左侧宽度
UIViewAutoresizingFlexibleWidth // 控件宽度自动调整
UIViewAutoresizingFlexibleRightMargin // 固定右侧宽度
UIViewAutoresizingFlexibleTopMargin // 固定顶部距离
UIViewAutoresizingFlexibleHeight // 控件高度自动调整
UIViewAutoresizingFlexibleBottomMargin // 固定底部距离
*/
// 以左上角按钮为例,如下设置后在切换横竖屏时将保持左上角的位置并且自动增加/减少按钮的长度
[mainview setAutoresizingMask:UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth]; ————————————————————————————————————————————————————————————————————————————————————————————————————————————
2D仿真变换函数 CGAffineTransformMakeTranslation : 每次都是以最初位置的中心点为参考 CGAffineTransformTranslate 每次都是以传入的transform为参照(既 有叠加效果) CGAffineTransformIdentity 最初位置的中心点 只会走一次的方法 self.imageView.transform=CGAffineTransformMakeTranslation(,); 不停地触发,会接着上一次的位置继续走: self.imageView.transform = CGAffineTransformTranslate(CGAffineTransformIdentity, , );
self.imageView.transform =CGAffineTransformTranslate(self.imageView.transform, , );
下面图片的选装也只能走一次:
CGAffineTransform trans = CGAffineTransformMakeScale(, ); trans = CGAffineTransformRotate(trans, M_PI_2); self.imageView.transform = trans; CGAffineTransform类的方法
一、创建一个Transformations 、CGAffineTransformMake //直接创建变换
CGAffineTransform CGAffineTransformMake (
CGFloat a,
CGFloat b,
CGFloat c,
CGFloat d,
CGFloat tx,
CGFloat ty );
可以看到参数比较多,其实它就是对应矩阵的前两列。据我估计,
可能一般不会直接用这个做变换。 、CGAffineTransformMakeScale //创建一个给定比例放缩的变换 CGAffineTransform CGAffineTransformMakeScale (CGFloat sx, CGFloat sy);
可以看到这个参数就少多了,也比较好理解,假设是一个图片视图引用了这个变换,
那么图片的宽度就会变为 width*sx ,对应高度变为 hight * sy。 、CGAffineTransformMakeRotation //创建一个旋转角度的变化 CGAffineTransform CGAffineTransformMakeRotation ( CGFloat angle);
在这里可以看到参数并不是一个角度,但是它是把参数作为一个弧度,然后把弧度再转换为角度来处理,
其结果就可能是将一个图片视图旋转了多少度。 、CGAffineTransformMakeTranslation //创建一个平移的变化 CGAffineTransform CGAffineTransformMakeTranslation (CGFloat tx,CGFloat ty);
这个就比较好理解了,假设是一个视图,那么它的起始位置 x 会加上tx , y 会加上 ty 二、修改Transformations 、CGAffineTransformTranslate //为一个变换再加上平移 CGAffineTransform CGAffineTransformTranslate (
CGAffineTransform t,
CGFloat tx,
CGFloat ty
);
简单来说就是在变化 t 上在加上平移 、CGAffineTransformScale //为一个Transformation再加上缩放 CGAffineTransform CGAffineTransformScale (
CGAffineTransform t,
CGFloat sx,
CGFloat sy); 、CGAffineTransformRotate //为一个Transformation再加上旋转 CGAffineTransform CGAffineTransformRotate (
CGAffineTransform t,
CGFloat angle
); 、CGAffineTransformInvert //返回Transformation的反向 CGAffineTransform CGAffineTransformInvert (CGAffineTransform t); 、CGAffineTransformConcat //合并两个Transformation CGAffineTransform CGAffineTransformConcat (CGAffineTransform t1, CGAffineTransform t2);
返回一个由 t1 和 t2 合并而成的Transformation 三、运用Transformations 、CGPointApplyAffineTransform //把变化应用到一个点上 CGPoint CGPointApplyAffineTransform (
CGPoint point,
CGAffineTransform t );
这个方法的返回值还是一个CGPoint,在我看来由于是一个点,
这个方法最终也只会影响这个点所在的位置。 、CGSizeApplyAffineTransform //运用到一个区域中 CGSize CGSizeApplyAffineTransform (
CGSize size,
CGAffineTransform t);
只会改变区域的大小 、CGRectApplyAffineTransform //运用到一个带原点的区间 CGRect CGRectApplyAffineTransform (
CGRect rect,
CGAffineTransform t); 这个我亲自试验过,三个属性 放缩、旋转和平移都有的一个Transformation ,
但处理之后只会改变这个区域原点的位置,和宽、高的大小,并不会旋转 四、检测一个Transformation 、CGAffineTransformIsIdentity //检测一个Transformation是不是恒等变换,也就是说不变 bool CGAffineTransformIsIdentity ( CGAffineTransform t);//其结果返回一个BOOL值 、CGAffineTransformEqualToTransform //检测两个Transformation是否相等。 bool CGAffineTransformEqualToTransform (
CGAffineTransform t1, CGAffineTransform t2);
关于2D转换函数的知识
//代码:
#import "ViewController.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *image;
@property (weak, nonatomic) IBOutlet UITextField *boundsTf;
@property (weak, nonatomic) IBOutlet UIImageView *ballon;
@end
/*
UIView 的四个动画样式
UIlayer 的四个动画样式
*/
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
}
- (IBAction)but1:(id)sender {
// CABaseAnimation
CABasicAnimation * baseAnimation = [CABasicAnimation animationWithKeyPath:@"position.x"];
//开始值
baseAnimation.fromValue = @();//需一个对象类型
//结束值
baseAnimation.toValue = @();
baseAnimation.duration = 5.0;//动画持续时长单位秒
baseAnimation.repeatCount = ;//动画持续次数
//添加动画到视图的 layer上
[self.image.layer addAnimation:baseAnimation forKey:nil];//需要添加一个标志
}
- (IBAction)but2:(id)sender {
//使用关键帧动画
CAKeyframeAnimation * keyframe = [CAKeyframeAnimation animationWithKeyPath:@"position"];
CGPoint po1 = self.image.center;
CGPoint po2 = CGPointMake(, );
CGPoint po3 = CGPointMake(, );
NSValue * value1 = [NSValue valueWithCGPoint:po1 ];//将其他类型转化为对应的 Value
NSValue * value2 = [NSValue valueWithCGPoint:po2];
NSValue * value3 = [NSValue valueWithCGPoint:po3];
keyframe.values = @[value1,value2,value3,value1];//存储路径中变化的多个值
keyframe.duration = ;//持续时间
keyframe.repeatCount = ;
[self.image.layer addAnimation:keyframe forKey:nil];
}
- (IBAction)but3:(id)sender {
//动画元素01
CAKeyframeAnimation *keyframe1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];
//贝塞尔曲线
//参数1 绕转的中心点坐标 参数2:圆角设为直径的一半 参数3:开始角度 参数4:结束角度 参数5:环绕的方向 YES就是按照时钟的方向 NO就是时钟的反方向转动
//沿着圆形移动
CGPoint po1 =CGPointMake(, self.view.frame.size.height/);
UIBezierPath * bezierPath = [UIBezierPath bezierPathWithArcCenter:po1 radius:self.view.frame.size.height/ startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:YES];
keyframe1.repeatCount = ;
//以贝塞尔曲线作为移动的路径
keyframe1.path = bezierPath.CGPath;
//动画元素02
//让气球缩放效果
CAKeyframeAnimation * keyframe2 = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];
keyframe2.values = @[@(1.0),@(1.2),@(1.5),@(1.8),@(),@(1.2),@(1.0),@(0.8),@(0.6),];
keyframe2.repeatCount = ;
//创建动画分组
CAAnimationGroup * groupAnimation = [CAAnimationGroup animation];
groupAnimation.animations = @[keyframe1,keyframe2];
groupAnimation.duration = ;//持续时间
groupAnimation.repeatCount = ;//持续次数
//将动画添加到 layer 层
[self.ballon.layer addAnimation:groupAnimation forKey:nil];
}
//CATransition 动画 CALayer 层的过度动画
- (IBAction)but4:(id)sender {
//这对layer 切换效果,可以设置切换动画的样式
CATransition * transition = [CATransition animation];
transition.type = kCATransitionPush;
/*类型有:
cube立方体 pageCurl翻页的类型
下面的类型是文档中的,上面的是OC的字符串,他也能识别
kCATransitionFade ;
kCATransitionMoveIn ;
kCATransitionPush ;
kCATransitionReveal;
*/
transition.subtype = kCATransitionFromLeft;//给一个切换的方向
transition.duration = ;//持续时间
transition.repeatCount = ;
[self.view.layer addAnimation:transition forKey:nil];//添加到要是实现的动画上
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
UILayer 在图层创建的时候创键的动画方法
UI:动画的更多相关文章
- COCOS2D-X中UI动画导致闪退与UI动画浅析
前两天和同事一起查一个游戏的闪退问题,log日志显示最后挂在CCNode* ActionNode::getActionNode()函数中的首行CCNode* cNode = dynamic_cast& ...
- 帧动画 连续播放多张图片动画 以及ui动画 SoundPool
drawable下有很多图片 可以 <?xml version="1.0" encoding="utf-8"?> <animation-li ...
- [译]理解 Windows UI 动画引擎
本文译自 Nick Waggoner 的 "Understand what’s possible with the Windows UI Animation Engine",已获原 ...
- UI动画效果
UI界面的动画效果总结 方式1:头尾式 //开始动画 [UIView beginAnimations:nil context:nil]; //设置动画时间 [UIView setAnimationDu ...
- Win10 UI动画
<Button Content="Ship via Wells, Fargo & Co." HorizontalAlignment="Center" ...
- UI动画优化技巧
知乎上一篇比较好的文章,分享一下: tabs slide 内容过渡动画 好的动画会淡化页面直接的过度. 但更好的做法是使用连续的动画来来过度内容 当我们在设计交互式选项卡或弹出式菜单的时候,尝试将内容 ...
- [UE4]UI动画复用
一.创建一个专门播放动画的Widget,添加一个“Name Slot”,创建动画绑定到这个“Name Slot”. 二.要使用这个动画的widget就添加第一步创建的widget,并把需要执行动画的对 ...
- UI动画的一些制作过程
选中将要制作的3D物体,window----Animation----录制,选中的AddKey在之间的节点前点左键.
- [UE4]判断UI动画播放方向
使用一个变量来记录播放的方向.
- [UE4]UI动画
随机推荐
- Maven项目配置外部依赖(本地依赖)
加入有一些公共jar包只限于公司内部使用,不能暴露在外部时,有如下的方案: 1.搭建私有远程仓库(nexus) 2.使用http.ftp.共享地址,github地址等(主要是通过maven-deplo ...
- 新闻:融资600万 他用一套系统优化15大HR工作场景 精简入转调离 月开通214家 | IT桔子
新闻:融资600万 他用一套系统优化15大HR工作场景 精简入转调离 月开通214家 | IT桔子 功劳说不上
- Matlab多项式拟合測试
x=0:0.2:4; %生成等差数列 rnd=rand(1,size(x,2))*5; %生成一组随机数 y=x.*x.*x+x.*x+6+rnd; %生成y=x^3+x^2+6函数在垂直方向5个尺度 ...
- 【Todo】Java学习笔记 100==100 & Reflection API & Optional类详解 & DIP、IoC、DI & token/cookie/session管理会话方式
为什么1000 == 1000返回为False,而100 == 100会返回为True? Link Java Reflection API:Link Java8 Optional 类深度解析: L ...
- DeepFM
DeepFM integrates the architectures of FM and deep neural networks (DNN). It models low-order featur ...
- python 工具ScreenShoot
环境:windows python3 # -*- coding: UTF-8 -*- import time import os, win32gui, win32ui, win32con, win32 ...
- Java中的反射机制,利用反射访问私有
利用反射,首先是Class对象的获取,之后是Method和Field对象的获取. 以Method为例,从文档中可以看到: getMethod()方法返回的是public的Method对象, 而getD ...
- [HTML5] Show Images of Differing Resolutions Depending on the Viewport Width with srcset
For small viewports, we want to save bandwidth and we may be dealing with slow speeds; so it's very ...
- AAuto如何发布EXE文件
1 如下图所示,谷歌翻译是AAuto提供的源码,我们现在把它做成软件.点击编译,注意看底部状态栏提示,编译之后的谷歌翻译还是aau格式的,双击可以直接运行.但是体积变大了,而且已经是二进制文件,无法再 ...
- weex 项目开发(五)自定义 过滤函数 和 混合 及 自定义 Header 组件
1.自定义 过滤函数 src / filters / index.js /** * 自定义 过滤函数 */ export function host (url) { if (!url) return ...