让动画动起来

要学习ios复杂的动画,要用到很多东西,你需要对一下类都有一定的了解。

1 CAyer以及其各个子类。2    CAAnimation以及其子类  3 UIBezierPath 4 CGContext 5 CATransform3D 5 UIView动画

一:绘制静态的图形

这个主要是我们在绘制一些静态的正方形,长方形,五角星或者更复杂的图形的需求 着我们需要用到CALer类和CGContext来绘制图形。下面的代码是画一个多折线的构成的图形

1 CAyer

我们经常重写UIView,来实现自定义的view,我们可以重写drawrect方法,来实现不同view的变换。layer作为self.view.layer的的子层。这个变换是动画,当然我们可以通过快速的变换不同的alpha,frame等layer的属性,来实现不同的变化。

2 CGContext

CGContextSetStrokeColorWithColor(context, [UIColor
grayColor].CGColor);

CGContextSetLineWidth(context,
1);

CGContextMoveToPoint(context,
0,
self.frame.size.height);

NSInteger count = pointAy.count;

CGPoint  points[count];

for (int i = 0; i<count; i++) {

CGPoint  point  =
CGPointFromString((NSString
*)[pointAy
objectAtIndex:i]);

points[i].x = point.x;

points[i].y
= point.y;

}

CGContextAddLines(context, points, count);

CGContextStrokePath(context);

绘制原型,五角星,网上有很多的代码。不再一一详述。http://blog.csdn.net/rhljiayou/article/details/9919713

3  CATransform3D效果,也是我们常用到的一个效果,我们可以静态的设置某一个layer最后的3D效果是什么样的,通过对layer.Transform3D赋值可以设定layer的3D效果。

CATransform3D transform3d =
CATransform3DIdentity;

transform3d.m34 = 1.0f/700.0f;

transform3d = CATransform3DTranslate(transform3d, 200, 0, 0);

transform3d =
CATransform3DRotate(transform3d,
M_PI/6,
0,
1,
0);

transform3d =
CATransform3DScale(transform3d,
0.8,
0.8,
1);

self.navigationController.view.layer.anchorPoint
= CGPointMake(0.5,
0.5);

self.navigationController.view.layer.transform = transform3d;

二 让动画动起来

下面我们要做的就是让CAyer的绘制有一个过程,让UIBezierPath的路径有个过程,让CATrandform3D的效果从最初始的状态到我们需要的3D效果有一个过程。

让动画动起来,就要熟悉CAAnimation和UIview动画这两个动画的属性。

1   我们先让上面的破折线动起来,这就要用到UIBezierPath,通过UIBezierPath和CAyer的子类相结合,把path赋值给cayer的path

UIBezierPath * bez = [UIBezierPath
bezierPath];

UIColor * color = [UIColor grayColor];

[color
set];

bez.lineWidth =
1;

bez.lineCapStyle =
kCGLineCapRound;

bez.lineJoinStyle =
kCGLineJoinRound;

[bez moveToPoint:CGPointMake(0, self.frame.size.height)];

for (int i = 0 ; i<pointAy.count; i++) {

CGPoint  point  =
CGPointFromString((NSString *)[pointAy
objectAtIndex:i]);

[bez addQuadCurveToPoint:point controlPoint:point];

}

CAShapeLayer * lineLayer = [CAShapeLayer layer];

self.layer.frame
= self.layer.frame;

lineLayer.fillColor = [UIColor clearColor].CGColor;

lineLayer.path = bez.CGPath;

让折线开始绘画

CABasicAnimation * ani = [CABasicAnimationanimationWithKeyPath:NSStringFromSelector(@selector(strokeEnd))];

ani.fromValue =@0;

ani.toValue =
@1;

ani.duration =
3;

[lineLayer addAnimation:ani
forKey:NSStringFromSelector(@selector(strokeEnd))];

[self.layer addSublayer:lineLayer];

2 让3d动画有一个动画效果

我们可以用uiview的动画

[UIView
animateWithDuration:0.5f
animations:^{

CATransform3D transform3d =
CATransform3DIdentity;

transform3d.m34 = 1.0f/700.0f;

transform3d = CATransform3DTranslate(transform3d, 200, 0, 0);

transform3d =
CATransform3DRotate(transform3d,
M_PI/6,
0,
1,
0);

transform3d =
CATransform3DScale(transform3d,
0.8,
0.8,
1);

self.navigationController.view.layer.anchorPoint
= CGPointMake(0.5,
0.5);

self.navigationController.view.layer.transform = transform3d;

} completion:^(BOOL finished) {

}];

};

也可以通过

CATransform3D transform3d =
CATransform3DIdentity;

transform3d.m34 =
1.0f/700.0f;

transform3d = CATransform3DTranslate(transform3d,
100,
0,
0);

transform3d = CATransform3DRotate(transform3d,
M_PI/6,
0,
1,
0);

transform3d = CATransform3DScale(transform3d,
0.5,
0.5,1);

CABasicAnimation * animation = [CABasicAnimation
animation];

animation.fromValue = [NSValue
valueWithCATransform3D:CATransform3DIdentity];

NSValue * toValue = [NSValue
valueWithCATransform3D:transform3d];

[animation setToValue:toValue];

animation.timingFunction = [CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

[animation setDuration:0.5];

animation.removedOnCompletion =
YES;

[self.navigationController.view.layer addAnimation:animation forKey:@"transform"];

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-10 08:50:52

让动画动起来的相关文章

css3常用动画+动画库

一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡出淡出效果,如果你想快速的整合各种CSS3动画特效的话,使用它即可方便的实现. 查看演示: https://daneden.github.io/animate.css/ github地址: https://github.com/daneden/animate.css 二.magic.css动画库 查

animation写动画

最近,接到项目需求,需要写大量的动画,那么怎么写呢? 动画是使元素从一种样式逐渐变化为另一种样式的效果.可以用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%.0% 是动画的开始,100% 是动画的完成.为了得到最佳的浏览器支持,应该始终定义 0% 和 100% 选择器. 我们知道CSS3的Animation有八个属性 animation-name animation-duration animation-delay a

IOS动画实现(2)ImageView自带动画

UIImageView官方文档(https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIImageView_Class/index.html#//apple_ref/doc/uid/TP40006889)里面有说明 相关属性如下: @property(nonatomic, copy) NSArray*animationImages; //需要动画动起来的几帧图片,这里存放一个循环所有的图片 @property

Android中的动画学习总结

android中动画可分为三种:帧动画,补间动画,和属性动画.其中属性动画是google推荐的,它可以实现前面两种动画的效果,运用起来更加灵活. 帧动画:顾名思义,就是一帧一帧的图片,快速播放形成的动画. 具体实现步骤如下: 第一:新建一个drawable资源 以animation-list 为根节点创建资源文件. 第二:给ImageView或者其他View设置关联drawable.可以作为background或者src. 第三:在java代码中,通过View.getBackground():或

2016九大前端必备动画库

进入2016年,随着各种类型网络技术的快速发展,动画库能为我们的网页设计增添很多视觉趣味.作为前/后端的开发人员来说,熟悉及掌握好各种动画 库(甚至抽取搭建成自己优化的动画库)代码,便能轻松省时省力地完成各种工作需求.即使客户或用户的UI设计需求越来越多,再加上设计大神们提交的动画动 效DEMO,本文推荐的这些动画库基本都能在浏览器里面实现出来咯.希望对各位开发童鞋来说能有所帮助. 1. Animate.css 创建者:Daniel Eden 发布日期:2013年 最新版本:3.4.0 关注人气

基于HTML5的高性能动画与游戏

其实这篇文章类似版本早在12年就在网上各处出现了,也随着HTML5的兴起,HTML的新特性也是倍受开发者们追捧,自然相关HTML5的高性能动画与游戏的相关文章也是层出不穷的,笔者也是在12年接触的相关技术,不过俗话说"隔行如隔山",随着大前端时代的到来,前端的工作范围和知识疆界也在不断的扩展,需要的知识结构和知识体系也在不断的丰富,最近也基于所在团队不断需要有新人有这方面的知识储备,于是就有了此文.当然本文并不会提供任何一段完整可用的代码,伸手党也请耐下心来看吧,理解了原理实现其实是一

关于Cocos Creator用js脚本代码播放骨骼动画的步骤和注意事项

1.用cc.find()方法找到相应的骨骼动画节点,并把这个对象赋值给一个var出来的新对象. 具体代码:var spineboy_anim = cc.find("UI_Root/anchor_lb/spineboy"); 2.用getComponent()方法找到相应骨骼动画节点的骨骼动画组件,并把这个对象赋值给一个var出来的新对象. 具体代码:var ske_anim_comp = spineboy_anim.getComponent(sp.Skeleton); 3.把第二点的新

android中Animation动画的连续播放与播放完毕后停留在最后的状态

我们做安卓应用的苦逼程序员们常常会需要用到Animation也就是动画.比如做地图功能的时候.我们在手机旋转时需要根据手机重力感应来调整地图的角度,让它上面的“北”一直指向地球的北面...好多人做动画的时候会遇到这么两个难题(我也曾经遇到过):1:动画执行完了一遍后又立刻恢复到了初始状态,或者动画只能不断循环动作.[问题:我想让动画动到某个位置或转到某个角度后停在那里,该如何做呢?]2:点击按钮一.动画从0度转到了10度,我再点击按钮二.需要动画从之前的10度位置再继续转到20度.再点击按钮三.

(转) 如何在Excel和Word文档中插入GIF动画

Office Excel 和Word文档中插入图片很容易做到,但是要插入GIF动画,并且还要能让这个动画动起来,就不能依照普通的“插入 → 图片 → 来自文件”的方法了,否则的话即便是把GIF插入进去,也只是个静态的画面,并不能够动起来.要想实现动画的目的,就得借助VB中的一个特殊的插件 —— AniGIF.ocx(在PPT中无需这个插件).本文就以Excel 2003为例,对如何安装及使用这个插件做一介绍(在Word中的情况类同,可参考). 1. 下载.破解及安装AniGIF.ocx 首先到C