zoukankan      html  css  js  c++  java
  • Swift 实现iOS Animation动画教程

    这是一篇翻译文章。原文出处:http://www.raywenderlich.com/95910/uiview-animation-swift-tutorial

     

    动画( animation)是iOS用户界面中非常重要的知识。动画可以吸引用户的注意力,使程序更加美观生动。

    更值得注意的是,在扁平化设计时代,动画是让优秀程序脱引而出的一个关键因素。

     

     

    举个例子

     

    下载这个开始项目(地址:http://cdn4.raywenderlich.com/wp-content/uploads/2015/02/BahamaAir-Starter.zip),程序是一个虚构的航空公司-“Bahama Air”的登陆界面。后面我门就是通过动画让这个界面更美观点。 

    现在运行效果图:

    开始实现一个简单动画:

     

    1、隐藏界面

    在viewController.swfit的viewWillAppear()方法中添加如下代码:

    heading.center.x  -= view.bounds.width
    
    username.center.x -= view.bounds.width
    
    password.center.x -= view.bounds.width

     

    此时运行,隐藏了三个组建,效果如图:

    在viewDidAppear()中添加如下代码来显示头部label“Bahama Login”

    UIView.animateWithDuration(0.5, animations: {
    
      self.heading.center.x += self.view.bounds.width
    
    })

     

    运行后,头部label“Bahama Login”向右滑动到中心位置,如图:

    延迟动画

    在viewDidAppear()中添加如下代码来显示username 文本输入框:

    UIView.animateWithDuration(0.5, delay: 0.3, options: nil, animations: {
    
      self.username.center.x += self.view.bounds.width
    
    }, completion: nil)

     

    代码解释:

    1.duration:动画时长

    2.delay:延迟时长

    3.option:掩码选项告诉如何显示动画,待会再介绍

    4.animation:显示动画内容的闭包

    5.completion:动画执行完毕后执行的闭包。用语清理工作或者执行更多动画使用

    运行后效果如图: 

    可以用来执行动画的UIView属性

     

    不是所有的UIView属性都可以实现动画效果,下面我们列举可以作为动画的UIView属性。

     

    1.位置和大小(position and size)如bounds、frame、center

    2.显示样式(appearance)。如backgroundColor、alpha

     

     变形( transformation)。如transformation 

     

    动画选项(Animation Options)

     

    1.重复 repeating

    .Repeat:让动画重复循环执行

    .Autoreverse:只能喝.repeat一起使用,让动画来回执行

     

    2.动画自然(Animation Easing)

     

    现实生活中运动时不回突然启动和突然停止,而是缓慢加速启动,平稳运行,缓慢减速停下。如图所示:

     

     

    我们在执行动画的时候四个让动画更自然(easing)的选项:

    .Linear:这个选项让动画平稳运行

    .CurveEaseIn:这个选项让动画加速开始

    .CurveEaseOut:这个选项让动画减速停下

    .CurveEaseInOut:这个选项让动画加速开始,减速结束。

     

    在viewDidAppear()中添加如下代码:

    UIView.animateWithDuration(0.5, delay: 0.4,
    
      options: .Repeat | .Autoreverse | .CurveEaseOut, animations: {
    
        self.password.center.x += self.view.bounds.width
    
    }, completion: nil)

    运行后,password文本框从左侧滑进,然后减速停在中间,效果如图: 

     

     

    基本的动画就介绍到这里。

     

     

  • 相关阅读:
    SQLSERVER查询数据库文件大小
    SQLSERVER 检查内容
    20万DBA都在关注的12个问题 [转载]
    oswbb工具分析主机性能
    Suspending MMON slave action kewrmapsa_ for 82800 seconds
    一次direct path read 故障处理
    Auto Optimizer Stats Collection in 12c
    ORACLE 动态注册和静态注册的区别(转)
    记一次cursor pin s wait on X的处理
    树莓派3b的raspberrypi系统安装pip
  • 原文地址:https://www.cnblogs.com/JackieHoo/p/4420423.html
Copyright © 2011-2022 走看看