iOS中关于动画效果的要点

在系统并深入学习iOS动画的过程中,不得不说是个痛苦的过程。没有任何书系统的讲解这方面的知识,网上的文章都讲的支离破碎;很幸运的看到了http://objccn.io这个网站;即使如此,还是花了三天时间;这个是对整体概念模糊到不断清晰,再逐步理顺,最后总结归纳为几个关键点。我想这辈子应该都忘记不了了。

iOS上的动画效果绝对赞;最常见的uitable动态效果,当手指在屏幕上下滑动时,列表会跟随其一起上下活动;如果猛的往上一推,还可以看到列表的惯性作用下,还会不断滚动,同时慢慢减速。这个过程根本不需要我们写一行代码。我们用“animat”作为关键在工程中搜索一下,就会明白我们是多么频繁的,直接或间接的在使用动画效果。

在UIViewController,UICollectionView,UIView,CALayer中使用动画

在push和pop视图控制器的时候,就有一个animated的选项。甚至从iOS7开始允许开发者自定义视图转场效果,具体来说,你可以定义pop和push时的动画效果,还可以定义子视图控制之间切换时的动画效果。对于子视图之间切换效果也可以用之前的transitionFromViewController:toViewController:duration:options:animations:completion:。具体看自定义ViewController容器转场 ,以及View Controller转场 。

UICollectionView是个比UITableView更灵活的组件,当然使用起来也更复杂;iOS7开始,为其定制了更炫的动画效果。更具体的内容见:Collection View动画 。

UIView的动画是最常见的了,iOS4之前的调用方式:

[UIViewbeginAnimations:nilcontext:NULL];

[UIViewsetAnimationDuration:0.3];

// Set the new transform

self.view.layer.affineTransform=newTransform;

// Fix the view origin

self.view.frame= (CGRect){ { f.origin.x, f.origin.y},self.view.frame.size};

[UIViewcommitAnimations];

现在都用block的方式进行调用:

[UIViewanimateWithDuration:0.3animations:^{

UIEdgeInsetsinsets =

scrollView.scrollIndicatorInsets;

//insets.top = kStatusBarHeight;

insets.bottom=52;

scrollView.scrollIndicatorInsets= insets;

[self.viewlayoutIfNeeded];

}];

所有的动画实现,归根结底都是基于CALayer,调用方式如下,更多请见动画解释 :

CAKeyframeAnimation*anim = [CAKeyframeAnimationanimationWithKeyPath:@"transform.rotation"];

anim.values= forward [email protected][@0,@(M_PI)]:@[@(M_PI),@0];

[indicatoraddAnimation:animforKey:anim.keyPath];

CALayer是基于了Core Animation之上;而从iOS7开始,提供了更加有趣的模拟物理世界动态的框架,UIKit Dynamics。

隐式动画vs显式动画

当改变CALayer的某个属性如x坐标,默认就会产生动画效果,这就是隐式动画;你可以使用矩阵变化CGAffineTransform*实现更复杂的外形变化的效果。显式动画就是类似如下代码:

[indicatoraddAnimation:animforKey:anim.keyPath];

关于它们的更详细解释请见,Layer中自定义属性的动画

UIView是如何和CALayer进行协作的:

UIView其实是CALayer的一个的代理,也就说我们看到界面上的东西,其实还是由CALayer来负责展示。CALayer是有隐形动画,可是为什么我们修改一个UIView的外形时,没有看到动态效果。详细的解释请看,View-Layer协作

交互式动画技术的实现

交互式动画的特点是随时响应外部的触控时间;这包含两方面:

1,随手势而动:当我们向右侧滑动时,可以看到上层页面逐步向右推,下层页面逐步显示出来;如果继续往右边滑动时,到一定程度上层页面完全消失,而下层页面完全显示出来。但也有可能性,用户往回滑动,下层页面又回到了之前的位置。

2,随时撤销动画:这是就比较复杂了。比方我们一个方块从左到右滑动,滑动到一半,我们想撤回让方块回到原来位置;虽然我们可以撤销动画,但是看到的效果是;突然方块出现在了原来位置,而不是从现在的位置被拖回来。要完美实现动画撤销的效果就得理解,Present layer/Model Layer,Present Layer用于保存图层的实时属性,与当前动画进行有关,而Model Layer只是保持了最终属性值。所以解决方案是,在撤回时获取其实时属性,在添加其返回的动画。详见:交互式动画 。当然我们也可以使用Pop框架,它是完全的交互动画框架。

总结:

照例总结一下,学习就是先把书读厚,然后再把书读薄的过程:

1,Core Animation是iOS上动画的关键人物;所有看到CA*的类,一定和动画有关,比方CALayer。

2,只要改变CALayer的动画相关属性,比方位置,大小就会触发隐性动画。UIView是CALayer的代理而已,所有也天然有隐形动画,触发的方式就是动画属性的变化代码放到类似animateWithDuration的block中。

3,位置,大小,外形,颜色,透明度都是动画属性。

学的越多,做的越快;学的越多,做的越好。

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

时间: 2024-12-28 21:09:10

iOS中关于动画效果的要点的相关文章

ios中layer动画和UIView动画代码总结

kCATransitionFade淡出 kCATransitionMoveIn覆盖原图 kCATransitionPush推出 kCATransitionReveal底部显出来 pageCurl   向上翻一页 pageUnCurl 向下翻一页 rippleEffect 滴水效果 suckEffect 收缩效果,如一块布被抽走 cube 立方体效果 oglFlip 上下翻转效果 #pragma mark UIView 动画 - (IBAction)pressClick1:(id)sender {

iOS中的动画

什么是动画,动画其实就是我们看到的画面变化的一个过程 那么在iOS中,实现一个最简单的动画需要几步呢? a Simple animation { // 1.开启动画 [UIViewbeginAnimations:nilcontext:nil]; [UIViewsetAnimationDuration:2.0]; // 2.修改属性 CGRect tempF = self.head.frame; tempF.origin.x += 50; tempF.origin.y += 100; tempF.

​android第十一期 - SmoothSwitchLibrary仿IOS切换Activity动画效果

项目已经从git上独立出来,各个效果已经分好类别,页面new调用就可以了,不会卡顿. 效果如下图: ​android第十一期 - SmoothSwitchLibrary仿IOS切换Activity动画效果

CSS3中的动画效果记录

今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform 属性允许你修改CSS可视化模型的坐标控件.使用transform,元素可以安装设定的值变形.旋转.缩放.倾斜. 语法: transform : none | <transform-function> [ <transform-function> ]* 也就是: transform: r

iOS中Animation 动画 UI_22

1.iOS中我们能看到的控件都是UIView的子类,比如UIButton UILabel UITextField UIImageView等等 2.UIView能够在屏幕的显示是因为在创建它的时候内部自动添加一个CALayer图层,通过这个图层在屏幕上显示的时候会调用一个drawRect: 的方法,完成绘图,才能在屏幕上显示 3.CALayer 本身就具有显示功能,但是它不能响应用户的交互事件,如果只是单纯的显示一个图形,此时你可以使用CALayer创建或者是使用UIView创建,但是如果这个图形

iOS的GIF动画效果实现

引言:GIF图像格式是常见的一种动态图片格式,无论是在Web端还是在移动端都经常遇到,但是考虑目前iOS还无法原生展现GIF图片,而对于GIF的原生支持暂时也没有像JPG.PNG等图像格式支持得这么全面,因此本文从图片的合成与分解角度来为大家讲解GIF的知识,结合ImageIO框架可以更方便地实现GIF图片的合成与分解. 本文选自<iOS动画--核心技术与案例实战>. GIF在iOS中的使用场景 GIF在iOS中的使用场景有以下三个方面. (1)GIF图片分解为单帧图片. (2)一系列单帧图片

angular中的动画效果

用angular来形成动画效果的代码如下 <!DOCTYPE html> <html lang="en" ng-app="app"> <head> <meta charset="UTF-8"> <title></title> <style> .box { width: 100px; height: 100px; background: red; } </st

JQuery中的动画效果

JQUERY DAY03: * 动画效果 * 显示与隐藏 * show() - 显示 * 无参版本 - 不具有动画效果 * show(speed,callback)有参版本 - 具有动画效果 * speed - 设置动画执行的时长,单位为毫秒 * 三个预定义值 - slow|normal|fast * callback - 当动画执行完毕后执行的函数 * hide() - 隐藏 * 无参版本 - 不具有动画效果 * hide(speed,callback)有参版本 - 具有动画效果 * spee

CSS3中的动画效果-------Day72

还记得么,在前面也曾实现过"仅仅用css让div动起来",还记得当时是怎么实现的么,是的,transition,针对的也比較局限,仅仅有旋转角度啊,长宽啊之类的,所以说,与其说是动起来,倒真不如说成是过渡.当然它另一个局限性,仅仅有当鼠标放上后才干够触发,仅仅是一个样式变成另一个样式,变化也比較单调,而真正的实现动画效果,css3中另一个很有效的方法:@keyframes. 首先.要知道它的规范和使用方法 还记得transition的使用方法么:在初始的样式中增加div{transit