文档章节

iOS动画编程-进阶

hejunbinlan
 hejunbinlan
发布于 2015/06/21 18:21
字数 1831
阅读 438
收藏 7

0、动画基础

  • 主要动画属性

        1、XY坐标属性:Position(左上角为原点)

        2、透明度属性:Opacity(透明:0.0,不透明:1.0)

        3、缩放属性:Scale(调整对象的尺寸,如对话框的显示)

        4、其他属性:Color(颜色属性)、Rotate(旋转属性)、3D属性(如3D翻转)

  • 思考动画是如何形成的

    1、动画开始时对象的属性

    2、动画结束时对象的属性

    3、动画执行的时间

    4、在动画执行过程中会发生什么

    5、动画结束后会发生什么

  • 动画曲线

    1、线性匀速变化(Linear)

    2、以慢速开始:加速变化(Ease In)

    3、先加速后减速的变化(Ease In,Ease Out)

    4、以慢速结束:减速变化(Ease Out)


1、UIKit和Core Animation

  • 架构

                UIKit(iOS) and Appkit(OS X)

                        Core Animation

          OpenGL ES and OpenGL    Core Graphics

                      Graphics Hardware

  • 实例

       //创建

        let redBall = UIView(frame: CGRectMake(50, 50, 100, 100))

        redBall.backgroundColor = UIColor.redColor()

        redBall.layer.cornerRadius = 50

        self.view.addSubview(redBall)

        

        //球的放大动画

        UIView.animateWithDuration(0.5, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in

            redBall.transform = CGAffineTransformMakeScale(2, 2)

            }) { (finished:Bool) -> Void in

                print("finished")

        }

    override func viewDidLoad() {

        super.viewDidLoad()

       //创建

        let redBall = UIView(frame: CGRectMake(50, 50, 100, 100))

        redBall.backgroundColor = UIColor.redColor()

        redBall.layer.cornerRadius = 50

        self.view.addSubview(redBall)

        

        //球的放大动画

        UIView.animateWithDuration(0.5, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in

            

//            redBall.transform = CGAffineTransformMakeScale(2, 2)

            //组合动画,CGAffineTransformConcat

            redBall.transform = CGAffineTransformConcat(CGAffineTransformMakeScale(2.0, 2.0), CGAffineTransformMakeTranslation(150, 50))

            

            }) { (finished:Bool) -> Void in

                print("finished")

        }

    }

组合动画:CGAffineTransformConcat


    override func viewDidLoad() {

        super.viewDidLoad()

       //创建

        let redBall = UIView(frame: CGRectMake(50, 50, 100, 100))

        redBall.backgroundColor = UIColor.redColor()

        redBall.layer.cornerRadius = 50

        self.view.addSubview(redBall)

        

        //球的放大动画

        UIView.animateWithDuration(0.5, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in

            

//            redBall.transform = CGAffineTransformMakeScale(2, 2)

            //组合动画,CGAffineTransformConcat

            redBall.transform = CGAffineTransformConcat(CGAffineTransformMakeScale(2.0, 2.0), CGAffineTransformMakeTranslation(150, 50))

            redBall.backgroundColor = UIColor.greenColor()

            }) { (finished:Bool) -> Void in

                print("finished")

        }

    }

弹性动画(spring Animation),iOS 7.0以后有此动画

       //创建

        let redBall = UIView(frame: CGRectMake(50, 50, 100, 100))

        redBall.backgroundColor = UIColor.redColor()

        redBall.layer.cornerRadius = 50

        self.view.addSubview(redBall)

        

        //弹性动画,iOS 7.0以后有此动画

        UIView.animateWithDuration(2.0, delay: 0, usingSpringWithDamping: 0.3,//弹性阻尼,取值范围是0-1,越接近0,动画的弹性效果就越明显;如果设置为1,则动画不会有弹性效果

            initialSpringVelocity: 0,//视图在动画开始时的速度,通常都应该传入0

            options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in

                redBall.transform = CGAffineTransformConcat(

                    CGAffineTransformMakeScale(2, 2),CGAffineTransformMakeTranslation(150, 50)

                )

                

                redBall.backgroundColor = UIColor.greenColor()

                

            }) { (finished:Bool) -> Void in

                print("finished")

        }


2、JNWSpringAnimation,详细调整参数

前言

CAKeyframeAnimation(关键帧动画)

多个关键帧组成动画

可以设置时间间隔

设置位移,缩放等动画属性

JNW支持的属性

位置:position

边界:bounds

阴影:shadow

圆角:corner

缩放:scale

旋转:rotation

JNW帧率为6帧的动画,1秒6帧

  • 缩放动画

       //创建

        let redBall = UIView(frame: CGRectMake(50, 50, 100, 100))

        redBall.backgroundColor = UIColor.redColor()

        redBall.layer.cornerRadius = 50

        self.view.addSubview(redBall)

        

        //缩放动画

        //创建JNW实例,keyPath跟CALayer一样

        let scale = JNWSpringAnimation(keyPath: "transform.scale")

        

        //阻尼固有频率是指有阻尼的机械系统的自由振动频率。由系统的质量、弹性系数和阻力系数决定,可表示为 式中:K为弹性系数;R为阻力系数,M为质量。

        

        //阻尼,决定动画的衰减,默认为30

        scale.damping = 6

        //弹性系数,弹簧伸缩的难度,决定动画的振幅,默认为300

        scale.stiffness = 100

        //质量,决定动画快慢的效果,默认为5

        scale.mass = 2

        //设置初始值

        scale.fromValue = 1

        //设置结束值

        scale.toValue = 2

        //将JNW赋予redball

        redBall.layer.addAnimation(scale, forKey: scale.keyPath)

        //jnwspring animation默认会还原初始状态,所以要手动设置到结束状态

        redBall.transform = CGAffineTransformMakeScale(2, 2)

  • 旋转动画

       //创建

        let redBall = UIView(frame: CGRectMake(50, 50, 100, 100))

        redBall.backgroundColor = UIColor.redColor()

//        redBall.layer.cornerRadius = 50

        self.view.addSubview(redBall)

        

        //旋转动画

        //创建jnw对象

        let rotation = JNWSpringAnimation(keyPath: "transform.rotation")

        //设置阻尼值

        rotation.damping = 6

        //设置弹性系数

        rotation.stiffness = 100

        //设置质量

        rotation.mass = 2

        

        //设置初始值和结束值

        rotation.fromValue = 0

        rotation.toValue = M_PI_4

        

        redBall.layer.addAnimation(rotation, forKey: rotation.keyPath)

        //防止动画后还原

        redBall.transform = CGAffineTransformMakeRotation(CGFloat(M_PI_4))

  • 位移动画

       //创建

        let redBall = UIView(frame: CGRectMake(50, 50, 100, 100))

        redBall.backgroundColor = UIColor.redColor()

//        redBall.layer.cornerRadius = 50

        self.view.addSubview(redBall)

        

        

        //位移动画

        //创建jnw对象

        let translation = JNWSpringAnimation(keyPath: "transform.translation.x")

        //设置阻尼值

        translation.damping = 6

        //设置弹性系数

        translation.stiffness = 100

        //设置质量

        translation.mass = 2

        

        //设置初始值和结束值

        translation.fromValue = 0

        translation.toValue = 100

        

        //添加动画

        redBall.layer.addAnimation(translation, forKey: translation.keyPath)

        //防止动画还原

        redBall.transform = CGAffineTransformMakeTranslation(100, 0)

  • 组合动画 :JNW实例+JNW实例=JNW组合动画,即分别加入不同的动画即可。

  • 关于渲染的三棵树

    模型树:静态数据,在执行动画时不会改变

    表现树:记录执行动画时的动画数据

    渲染树:屏幕渲染,私有的

  • 自定义警告框

    1、半透明背景层淡入动画

    2、警告框透明度0-1动画,尺寸由1.2变为1

    3、警告框消失,透明度变为0,缩小尺寸

    4、半透明背景层消失

    func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {

        

        //窗口的代码

        //窗口尺寸

        self.window = UIWindow(frame: UIScreen.mainScreen().bounds)

        //设置窗口背景颜色

        self.window?.backgroundColor = UIColor.whiteColor()

        //激活窗口

        self.window?.makeKeyAndVisible()

        

        self.window?.rootViewController = ViewController()

        

        //灰色的遮挡层

        //遮挡层的frame

        let overlayView = UIView(frame: self.window!.bounds)

        //设置颜色

        overlayView.backgroundColor = UIColor.blackColor()

        //设置透明度,应该为0

        //TODO: 改为0

        overlayView.alpha = 0

        //加入场景

        self.window?.addSubview(overlayView)

        

        //警告框相关代码

        //警告框的宽高

        let alertDimension:CGFloat = 250.0

        //警告框的frame

        let alertViewFrame = CGRectMake(self.window!.bounds.width/2 - alertDimension/2, self.window!.bounds.height / 2 - alertDimension/2, alertDimension, alertDimension)

        //实例化警告框

        let alertView = UIView(frame: alertViewFrame)

        //设置警告框背景

        alertView.backgroundColor = UIColor(patternImage: UIImage(named: "alert_box")!)

        //设置警告框的透明度,应该为0

        //TODO: 改为0

        alertView.alpha = 0

        //设置警告框的初始尺寸为1.2倍

        alertView.transform = CGAffineTransformMakeScale(1.2, 1.2)

        //设置警告框的圆角半径

        alertView.layer.cornerRadius = 10

        

        

        //设置阴影

        //颜色

        alertView.layer.shadowColor = UIColor.blackColor().CGColor

        //阴影偏移

        alertView.layer.shadowOffset = CGSizeMake(0, 0.5)

        //阴影透明度

        alertView.layer.shadowOpacity = 0.3

        //阴影尺寸,跟警告框的圆角半径对应

        alertView.layer.shadowRadius = 10

        

        //将警告框加入当前窗口

        self.window?.addSubview(alertView)

        

        //延时设置

        var minseconds = 1 * Double(NSEC_PER_SEC)

        var dtime = dispatch_time(DISPATCH_TIME_NOW, Int64(minseconds))

        dispatch_after(dtime, dispatch_get_main_queue()) { () -> Void in

            

            //显示动画

            UIView.animateWithDuration(0.3, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in

                //背景和警告框显示出来

                overlayView.alpha = 0.3

                alertView.alpha = 1

                }, completion: nil)

            

            //jnw实例

            let scale = JNWSpringAnimation(keyPath: "transform.scale")

            //阻尼值

            scale.damping = 14

            //弹性系数

            scale.stiffness = 440

            //质量

            scale.mass = 1

            //初始值

            scale.fromValue = 1.2

            //结束值

            scale.toValue = 1

            //执行动画

            alertView.layer.addAnimation(scale, forKey: scale.keyPath)

            //更新一下执行完动画后的scale值,防止还原

            alertView.transform = CGAffineTransformMakeScale(1, 1)

        }

        

        minseconds = 3 * Double(NSEC_PER_SEC)

        dtime = dispatch_time(DISPATCH_TIME_NOW, Int64(minseconds))

        dispatch_after(dtime, dispatch_get_main_queue()) { () -> Void in

            //消失动画

            UIView.animateWithDuration(0.15, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in

                overlayView.alpha = 0

                alertView.alpha = 0

                }, completion: nil)

            

            //jnw实例,变小

            let scaleOut = JNWSpringAnimation(keyPath: "transform.scale")

            scaleOut.damping = 14

            scaleOut.stiffness = 14

            scaleOut.mass = 1

            scaleOut.fromValue = 1

            scaleOut.toValue = 0.7

            

            alertView.layer.addAnimation(scaleOut, forKey: scaleOut.keyPath)

            alertView.transform = CGAffineTransformMakeScale(0.7, 0.7)

            

            let translation = JNWSpringAnimation(keyPath: "transform.translation.y")

            translation.damping = 14

            translation.stiffness = 14

            translation.mass = 1

            translation.fromValue = self.window!.bounds.size.height/2 - alertDimension/2

            translation.toValue = self.window!.bounds.size.height

            alertView.layer.addAnimation(translation, forKey: translation.keyPath)

        }

        return true

    }

3、Facebook Pop(Facebook Paper)

适用所有的对象。

  • 使用pod引入pop

  • 实例

        //添加一个红球

        let redBall = UIView(frame: CGRectMake(100, 100, 100, 100))

        redBall.backgroundColor = UIColor.redColor()

        redBall.layer.cornerRadius = 50

        self.view.addSubview(redBall)

        

        //增加pop动画

        //实例化一个pop对象

        let scale = POPSpringAnimation(propertyNamed: kPOPViewScaleXY)

        //fromValue默认为原来的值

        //设置结束值,放大2倍

        scale.toValue = NSValue(CGPoint:CGPointMake(2, 2))

        //设置弹性,振幅之类的属性,值范围0-20

        scale.springBounciness = 20

        //设置震动速度,值越大动画结束速度越快,范围0-20

        scale.springSpeed = 1

        //加入pop动画,forKey,随便取值,唯一即可

        redBall.pop_addAnimation(scale, forKey: "scaleAnimation")

        //添加一个红球

        let redBall = UIView(frame: CGRectMake(100, 100, 100, 100))

        redBall.backgroundColor = UIColor.redColor()

//        redBall.layer.cornerRadius = 50

        self.view.addSubview(redBall)

        

        //旋转动画

        //x坐标位移动画,PositionX从100->300

        let move = POPSpringAnimation(propertyNamed: kPOPLayerPositionX)

        move.toValue = 300

        move.springBounciness = 20

        move.springSpeed = 5

        redBall.layer.pop_addAnimation(move, forKey: "moveAnimation")

        

        //旋转动画

        let rotation = POPSpringAnimation(propertyNamed: kPOPLayerRotation)

        rotation.toValue = M_PI * 4 //2圈

        rotation.springBounciness = 20

        rotation.springSpeed = 5

        redBall.layer.pop_addAnimation(rotation, forKey: "rotationAnimation")

        

        //背景颜色变化

        let color = POPSpringAnimation(propertyNamed: kPOPViewBackgroundColor)

        color.toValue = UIColor.greenColor()

        color.springBounciness = 20

        color.springSpeed = 5

        redBall.pop_addAnimation(color, forKey: "colorAnimation")

更多POP的实例参考网址:https://github.com/facebook/pop

© 著作权归作者所有

共有 人打赏支持
hejunbinlan
粉丝 41
博文 584
码字总数 21362
作品 0
浦东
高级程序员
如何判断你是合格的高级iOS开发工程师?

前言 随着移动互联网的高速发展泄洪而来,有意学习移动开发的人越来越多了,竞争也是越来越大,需要学习的东西很多。如何才能在激烈的移动开发者竞争中一枝独秀,成为一名真正合格的高级iOS...

_小迷糊
05/26
0
0
iOS三维菜单、调试工具、封装通讯录、网络框架、多种控件和动画等源码

iOS精选源码 一个调用系统通讯录和获取通讯录所有联系人的封装(http://www.code4app.com/thread-29726-1-1.html) ios scrollview嵌套tableview同向滑动(初级、进阶), 支持OC / Swift(http...

sunnyaigd
05/15
0
0
fir.im Weekly - 30 天从 0 开始学 Swift

最近一周看到很多很好用的的轮子,忍不住推荐给大家。此外,本期 fir.im Weekly 还精选了一些实用的 iOS , Android , UI 动画的干货文章。让我们一起来看下: Hacking with Swift 由@稀土圈...

风起云飞fir_im
2015/11/05
0
0
微软提供移植iPhone应用到Windows Phone 7上的工具

windows phone 7 iphone5 微软发布了一个API映射工具、指导手册和一组分享经验的视频,帮助简化移植iPhone/iOS应用程序到Windows Phone 7(WP 7)上的工作。 微软Windows Phone互操作组创建了...

junwong
2012/03/09
0
0
UIView Animations 学习笔记(二)定制动画效果及切换效果

目录 UIView Animations 学习笔记(一)简介及API说明 UIView Animations 学习笔记(二)定制动画效果及切换效果 UIView Animation 学习笔记 应用示例 二、视图切换定制 2.1 基础说明 要创建...

灰大羊
2015/08/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

为什么Java大神,都在看Spring Boot和Spring Cloud的书?

如果你是一名Java开发人员,并且最近正打算学习Spring Boot和Spring Cloud框架并寻找一些关于它们的最好的书籍,那么,你今天就来对地方了。 本文,我们将讨论一些学习Spring Boot和Spring ...

Java小铺
16分钟前
6
0
springboot logback日志配置

springboot 如果不使用外部tomcat的话,日志是需要自己配置的,不然的话就只有控制台的日志,但是日志又是我们在项目上了生产环境,出问题时,检查问题的唯一途径,所以我们要配置详细的日志...

曾大大胖
16分钟前
2
0
Linux服务器集体篡改时间的方法

Red Hat 虚拟化课程RH318,中小型公司使用的话,感觉可以匹敌OpenStack。手头上有一个VMware的映像,RHEV 3.5版的,只能把系统时间调整到2016年才能使用。Red Hat的RHEV已经更新到4.1版,不过...

大别阿郎
17分钟前
1
0
Tomcat启动异常:java.lang.ClassNotFoundException

警告: Name = mysqlDataSource Property maxActive is not used in DBCP2, use maxTotal instead. maxTotal default value is 8. You have set value of "100" for "maxActive" property, wh......

hengbao5
18分钟前
1
0
GO错误的一些处理(defer,recover,panic)

package main import("fmt""errors")func main() {num := 10fmt.Printf("num的类型%T, num的值%v, num的地址%v\n", num, num, &num)num2 := new(int) //返回一个指针//num...

汤汤圆圆
27分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部