常见的动画效果(二)
使用前
需引入QuartzCore.framework, 并在相关文件中加入 #import "QuartzCore/QuartzCore.h"
定义
shakeFeedbackOverlay为UIImageView
设置
self.shakeFeedbackOverlay.alpha = 0.0;
self.shakeFeedbackOverlay.layer.cornerRadius = 10.0; //设置圆角半径
1、图像左右抖动
CABasicAnimation* shake = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
shake.fromValue = [NSNumber numberWithFloat:-M_PI/32];
shake.toValue = [NSNumber numberWithFloat:+M_PI/32];
shake.duration = 0.1;
shake.autoreverses = YES; //是否重复
shake.repeatCount = 4;
[self.shakeFeedbackOverlay.layer addAnimation:shake forKey:@"shakeAnimation"];
self.shakeFeedbackOverlay.alpha = 1.0;
[UIView animateWithDuration:2.0 delay:0.0 options:UIViewAnimationOptionCurveEaseIn | UIViewAnimationOptionAllowUserInteraction animations:^{ self.shakeFeedbackOverlay.alpha = 0.0; //透明度变0则消失 } completion:nil];
2、图像顺时针旋转
CABasicAnimation* shake = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
shake.fromValue = [NSNumber numberWithFloat:0];
shake.toValue = [NSNumber numberWithFloat:2*M_PI];
shake.duration = 0.8; shake.autoreverses = NO;
shake.repeatCount = 1;
[self.shakeFeedbackOverlay.layer addAnimation:shake forKey:@"shakeAnimation"];
self.shakeFeedbackOverlay.alpha = 1.0;
[UIView animateWithDuration:10.0 delay:0.0 options:UIViewAnimationOptionCurveEaseIn | UIViewAnimationOptionAllowUserInteraction animations:^{ self.shakeFeedbackOverlay.alpha = 0.0; } completion:nil];
3、图像关键帧动画
CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];
CGMutablePathRef aPath =CGPathCreateMutable();
CGPathMoveToPoint(aPath, nil, 20, 20);
CGPathAddCurveToPoint(aPath, nil, 160, 30, 220, 220, 240, 420);
animation.path = aPath;
animation.autoreverses = YES;
animation.duration = 2;
animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
animation.rotationMode = @"auto";
[ballView.layer addAnimation:animationforKey:@"position"];
4、组合动画 CAAnimationGroup
CABasicAnimation *flip = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
flip.toValue = [NSNumbernumberWithDouble:-M_PI];
CABasicAnimation *scale= [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scale.toValue = [NSNumbernumberWithDouble:12];
scale.duration = 1.5;
scale.autoreverses = YES;
CAAnimationGroup *group = [CAAnimationGroup animation];
group.animations = [NSArray arrayWithObjects:flip, scale,nil];
group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
group.duration = 3;
group.fillMode = kCAFillModeForwards;
group.removedOnCompletion =NO;
[ballView.layer addAnimation:groupforKey:@"position"];
5、指定时间内旋转图片
//启动定时器旋转光圈
- (void)startRotate
{
self.rotateTimer = [NSTimer scheduledTimerWithTimeInterval:0.02
target:self
selector:@selector(rotateGraduation)
userInfo:nil
repeats:YES];
}
//关闭定时器
- (void)stopTimer
{
if ([self.rotateTimerisValid])
{
[self.rotateTimerinvalidate];
self.rotateTimer =nil;
}
}
//旋转动画
- (void)rotateGraduation
{
self.timeCount--;
if (self.timeCount == 0)
{
[self stopTimer];
// doSomeThing //旋转完毕 可以干点别的
self.timeCount = 25;
}
else
{
//计算角度 旋转
static CGFloat radian = 150 * (M_2_PI / 360);
CGAffineTransform transformTmp =self.lightImageView.transform;
transformTmp = CGAffineTransformRotate(transformTmp, radian);
self.lightImageView.transform= transformTmp;
};
}
调用方法
self.timeCount = 25; //动画执行25次
[self startRotate];
注:本文部分代码摘抄自《ios5核心框架》一书,原文有改动
6:移动图片到右下角
//向右下角缩小移动 - (IBAction)buttonClick:(id)sender {CGPoint fromPoint = imageView.center;//路径曲线 UIBezierPath *movePath = [UIBezierPath bezierPath];[movePath moveToPoint:fromPoint];CGPoint toPoint = CGPointMake(300, 460);[movePath addQuadCurveToPoint:toPointcontrolPoint:CGPointMake(toPoint.x,fromPoint.y)];//关键帧 CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];moveAnim.path = movePath.CGPath;moveAnim.removedOnCompletion = YES;//旋转变化 CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform"];scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];//x,y轴缩小到0.1,Z 轴不变 scaleAnim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.1, 0.1, 1.0)];scaleAnim.removedOnCompletion = YES;//透明度变化 CABasicAnimation *opacityAnim = [CABasicAnimation animationWithKeyPath:@"alpha"];opacityAnim.fromValue = [NSNumber numberWithFloat:1.0];opacityAnim.toValue = [NSNumber numberWithFloat:0.1];opacityAnim.removedOnCompletion = YES;//关键帧,旋转,透明度组合起来执行 CAAnimationGroup *animGroup = [CAAnimationGroup animation];animGroup.animations = [NSArray arrayWithObjects:moveAnim, scaleAnim,opacityAnim, nil];animGroup.duration = 1;[imageView.layer addAnimation:animGroup forKey:nil]; }
7 :移动图片到右下角
//向右边旋转 - (IBAction)rightRotateBtnClick:(id)sender {CGPoint fromPoint = imageView.center;UIBezierPath *movePath = [UIBezierPath bezierPath];[movePath moveToPoint:fromPoint];CGPoint toPoint = CGPointMake(fromPoint.x +100 , fromPoint.y) ;[movePath addLineToPoint:toPoint];CAKeyframeAnimation *moveAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];moveAnim.path = movePath.CGPath;CABasicAnimation *scaleAnim = [CABasicAnimation animationWithKeyPath:@"transform"];scaleAnim.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];//沿Z轴旋转 scaleAnim.toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation(M_PI,0,0,1)];//沿Y轴旋转// scaleAnim.toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation(M_PI,0,1.0,0)];//沿X轴旋转// scaleAnim.toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation(M_PI,1.0,0,0)]; scaleAnim.cumulative = YES;scaleAnim.duration =1;//旋转2遍,360度 scaleAnim.repeatCount =2;imageView.center = toPoint;scaleAnim.removedOnCompletion = YES;CAAnimationGroup *animGroup = [CAAnimationGroup animation];animGroup.animations = [NSArray arrayWithObjects:moveAnim, scaleAnim, nil];animGroup.duration = 2;[imageView.layer addAnimation:animGroup forKey:nil];}
8:图片旋转360度
//图片旋转360度 - (IBAction)rota360BtnClick:(id)sender {CABasicAnimation *animation = [ CABasicAnimationanimationWithKeyPath: @"transform" ];animation.fromValue = [NSValue valueWithCATransform3D:CATransform3DIdentity];//围绕Z轴旋转,垂直与屏幕 animation.toValue = [ NSValue valueWithCATransform3D: CATransform3DMakeRotation(M_PI, 0, 0, 1.0) ];animation.duration = 1;//旋转效果累计,先转180度,接着再旋转180度,从而实现360旋转 animation.cumulative = YES;animation.repeatCount = 2;//在图片边缘添加一个像素的透明区域,去图片锯齿 CGRect imageRrect = CGRectMake(0, 0,imageView.frame.size.width, imageView.frame.size.height);UIGraphicsBeginImageContext(imageRrect.size); [imageView.image drawInRect:CGRectMake(1,1,imageView.frame.size.width-2,imageView.frame.size.height-2)];imageView.image = UIGraphicsGetImageFromCurrentImageContext();UIGraphicsEndImageContext();[imageView.layer addAnimation:animation forKey:nil]; }
常见的动画效果(二)相关推荐
- Android动画效果(二) 仿QQ点赞动画
近日有看到QQ点赞的动画效果,于是模仿写了一个 要实现图中效果,需要用到属性动画,属性动画利用ValueAnimator来跟踪记录对象属性已经变化了多长时间及当前这个时间点的值. 如果不设置的话,动画 ...
- 用SpriteBuilder简化quot;耕牛遍地走quot;的动画效果(二)
首先使用SpriteBuilder新建一个项目,将之前下载的资源文件夹拖入SpriteBuilder的文件视图. 这里我们只需要一步操作就可以完成原文中在Texture Packer中的那么多操作:即 ...
- 前端 ----jQuery的动画效果
03-jQuery动画效果 jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 显示动画 方式一: $("div"). ...
- 前端实现动画效果的几种方式(有实例)
现在对于前端的要求变大了很多,随着时代进步,人们的审美越来越挑剔,对于用户交互的体验成为了公司竞争的一大助力.而动画效果,可以说是最有效的提高用户体验的方式了.但是对于前端来说,实现动画的方法也有很多 ...
- 使用CSS3实现超炫的Loading(加载)动画效果
SpinKit 是一套网页动画效果,包含8种基于 CSS3 实现的很炫的加载动画.借助 CSS3 Animation 的强大功能来创建平滑,易于定制的动画.SpinKit 的目标不是提供一个每个浏览器 ...
- Android 卡片翻转动画效果
转载请标明出处:http://blog.csdn.net/android_mnbvcxz/article/details/78570594 Android 卡片翻转动画效果 前言 前端时间开发一款应用 ...
- android自定义图片过渡效果,教你做出炫酷的Android动画效果
前言 Android动画也是Android系统中一个很重要的模块, 在平时开发中, 为了做出炫酷的效果, 动画可以说是必不可少的; 本文将总结Android中与动画相关的部分, 文中部分内容整理自文末 ...
- css有哪些动画效果怎么实现的
css常见的动画效果:平移,缩放,旋转 css实现动画主要有三种方式: transition实现渐变动画 transform实现缩放平移效果动画 animation实现自定义动画 transition ...
- 利用MATLAB实现图片切换动画效果详解
内容摘要:本博文介绍MATLAB图片切换动画效果的制作以及GIF文件保存,并结合具体代码详细解释.介绍了利用MATLAB编程进行几幅图片的轮流切换,切换时实现与幻灯片切换相似的炫酷的图片切换特效.其中 ...
最新文章
- 导师:CNN 开山之作 AlexNet 都复现不了,延毕吧!
- 28岁以后,我不抱大腿,我就是大腿
- 对数据可视化的理解_使数据可视化更容易理解
- junit测试spring_使用Spring JUnit规则进行参数化集成测试
- 数据eda_银行数据EDA:逐步
- 【转】Office365完整离线安装包下载及自定义安装教程
- 一个小白如何创建MYSQL数据表_MySQL小白扫盲(二)--建表、添加、查询
- Laravel定时任务的每秒执行
- Mac忘记root密码(Mac OS Sierra忘记root密码如何重置)
- XenApp For Windows 2016 关闭程序后无法结束进程
- 《Linux 鸟哥私房菜》 第一部分 Linux文件、目录与磁盘格式
- B/S---控件属性
- bzoj千题计划278:bzoj4590: [Shoi2015]自动刷题机
- 成员变量和局部变量详解
- python调用canape_基于CCP协议利用CANape进行电控单元标定
- JDK1.8的lib相关jar
- 服务器项目管理软件,项目管理软件-Microsoft Project.pdf
- 原生JS记忆翻牌小游戏
- mysql数据库拒绝访问的解决过程_记一次MySQL数据库拒绝访问的解决过程
- spring 中事物的使用