IOS框架Spring常用的动画效果

Spring

作用：开发中常用的动画效果及自定义转场动画

演示

介绍

SpringView

最重要的一个类，是一个继承自UIView的控件，所有的动画属性，都是围绕着这个类的对象

demo跑起来有一个code按钮，点击这个按钮会出现已经设置的动画属性及其api，自己可以自定义设置，其对应的api这里就不赘述了（上面的gif图片也可以看到）

demo里code按钮点开显示的layer对象是用SpringView创建的对象，不是我们平时说的layer

animateNext(completion: () -> ())，这是动画结束后可以执行的任务的api

关于这个控件响应点击事件的方式1.因为是继承自UIView，所以不能像UIButton那样添加点击的响应事件，可以为这个控件添加手势，用以响应点击事件2.可以在这个控件上覆盖一个UIButton，将它的backgroudcolor设置为clear color，为UIButton添加点击事件（框架作者的demo是这么干的）
测试demo

自己在测试时，直接导入框架的类文件，在控制器中引用时，出现了bug，后来又用的Cocoapod加入的框架，大家在使用或测试时可以避开这个坑（也可能是本人才疏学浅，没处理好）

测试demo演示

测试代码

import UIKit
import Spring

class ViewController: UIViewController {

  override func viewDidLoad() {
    super.viewDidLoad()

    springV.center = view.center
    view.addSubview(springV)
     }

  override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
   //设置动画属性
    springV.animation = "shake"
    springV.curve = "easeIn"
    springV.duration = 1.0
   //label.animate()
    springV.animateToNext({ () -> () in
      print("11")
    })

  }
  //懒加载SpringView
  lazy var springV: SpringView = {

    let springV = SpringView(frame: CGRectMake(0, 0, 100, 100))
    springV.layer.contents = UIImage(named: "appicon@40")?.CGImage
//    springV.backgroundColor = 

    return springV
  }()

}
赞 (0)

相关推荐

  • iOS仿支付宝芝麻信用分数仪表盘动画效果

    iOS仿支付宝芝麻信用分数仪表盘动画效果

    先看看效果图: 仪表盘动画效果.jpg 1.圆环上绿点的旋转 2.分数值及提示语的变化 3.背景色的变化 直接上主要代码: 1.自定义ZLDashboardView仪表盘文件: .h 文件: /** * 根据跃动数字 * * 确定百分比 * 现在的跳动数字-->背景颜色变化 * */ #import <UIKit/UIKit.h> @interface ZLDashboardView : UIView @property (nonatomic, strong) UIImage *bgIm

  • iOS点击查看大图的动画效果

    iOS点击查看大图的动画效果

    对于图片来说,除了表情包,几乎都会被点击查看大图.今天就讲解一个查看和收起大图的动画效果,先直接看效果图: 如图所示,最开始是一个小图,点击小图可以查看大图.大图会从小图的位置和大小"弹"出来,同时背景变成半透明的阴影.点击大图或者阴影后,收起大图,同样地弹回到小图去,同时去掉阴影背景,就像是一张图片在伸大缩小一样. 现在看看这是怎么实现的.在思考一个动画的实现方法时,把动画的动作进行分解然后再一个个去思考怎么实现是一个好的习惯,我们稍微分解一下,这个动画在显示大图和收起大图的时候做了

  • IOS等待时动画效果的实现

    IOS等待时动画效果的实现

    查询时间或长或短,为了提升用户体验,目前用的比较多的手段之一就是查询等待时添加一个动态等待效果.当我们在请求网络时加载页面时有个动作效果,效果图如下: 源代码可以网上找开源项目Coding.net,上面的效果原理为两张图片组合,外面那个则为动画转动,里面的图标则是透明度的变化:主要代码如下: 1:把它封装在EaseLoadingView里面 @interface EaseLoadingView : UIView @property (strong, nonatomic) UIImageView

  • iOS中给自定义tabBar的按钮添加点击放大缩小的动画效果

    之前想过一些通过第三方的方式实现动画,感觉有点麻烦,就自己写了一个 不足之处还望大家多多指出 // 一句话,写在UITabBarController.m脚本中,tabBar是自动执行的方法 // 点击tabbarItem自动调用 -(void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item { NSInteger index = [self.tabBar.items indexOfObject:item]; [self a

  • IOS实现视频动画效果的启动图

    IOS实现视频动画效果的启动图

    先上效果图 实现思路 主要思路就是用一个控制器来作为播放视频的载体,然后在让这个控制器作为根视图,视频播放完成之后那就该干嘛干嘛了. 话不多说了,下面就放代码好了 先新建一个控制器AnimationViewController在控制器中新建一个属性moviePlayer,记得要先引入系统库<MediaPlayer/MediaPlayer.h> @property (nonatomic, strong) MPMoviePlayerController *moviePlayer; 设置movieP

  • iOS 屏幕解锁文字动画效果

    iOS 屏幕解锁文字动画效果

    CAGradientLayer相信大家都比较熟悉,关于其如何使用,我就不在这里废话了,网上有很多介绍,想详细了解的话,可以去看看.我只简单说下如何利用CAGradientLayer制作屏幕解锁文字动画效果. 1.创建一个CAGradientLayer对象gradLayer,设置它的frame和label.bounds一样(这里要注意一下是Label的bounds不是frame); 2.这里我给gradLayer.colors一共设置了三个颜色值,首尾颜色透明度设置成0.3,中间的颜色值透明度保持

  • iOS实现知乎和途家导航栏渐变的文字动画效果

    iOS实现知乎和途家导航栏渐变的文字动画效果

    效果图如下 分析如下: 1.导航栏一开始是隐藏的,随着scrollView滚动而渐变 2.导航栏左右两边的navigationItem是一直显示的 3.导航栏参考了途家app,使用了毛玻璃效果,背景是一张图片 4.下拉放大图片效果 5.title文字动画效果 通过简单分析,系统的导航栏实现以上效果有点困难,直接自定义一个假的导航栏更容易点 分布拆解实现以上效果 一.下拉放大header图片 - (void)viewDidLoad { [super viewDidLoad]; [self.view

  • iOS自带动画效果的实例代码

     1.普通动画: [UIView beginAnimations:nil context:nil]; [UIView setAnimationDuration:2]; frame.origin.x += 150; [img setFrame:frame]; [UIView commitAnimations]; 2.连续动画(一系列图像): NSArray *myImages = [NSArray arrayWithObjects: [UIImage imageNamed:@"myImage1.p

  • 基于JS实现Android,iOS一个手势动画效果

    基于JS实现Android,iOS一个手势动画效果

    废话不多说了,先给大家展示下效果图: 这是iOS下的效果,android下完全一致.通过do_GestureView组件和do_Animation组件,deviceone能很容易实现复杂的跨平台纯原生动画效果,这个示例就是通过手势控制图片上下动画滑动实现开合效果,还支持声音效果. 下面是主要的代码 //index.ui.js var do_Animator1 = mm("do_Animator"); do_Animator1.append(500, { y: -1334, curve:

  • iOS使用UICountingLabel实现数字变化的动画效果

    iOS使用UICountingLabel实现数字变化的动画效果

    在大多数金融类 app 上或者其他 app 需要数字展示的地方, 经常会有如下的动画效果: 动画效果 怎么做呢? 一.下载UICountingLabel 下载地址: http://xiazai.jb51.net/201612/yuanma/UICountingLabel-master_jb51.rar UICountingLabel只支持整形和浮点数样式, 像大部分金融类app里面显示的金额(带有千分位分隔符)的样式是无法显示的, 但是后面会给出解决方案, 实现这些的效果! 二.使用UICoun

  • Android UI设计系列之自定义SwitchButton开关实现类似IOS中UISwitch的动画效果（2）

    Android UI设计系列之自定义SwitchButton开关实现类似IOS中UISwitch的动画效果（2）

    做IOS开发的都知道,IOS提供了一个具有动态开关效果的UISwitch组件,这个组件很好用效果相对来说也很绚丽,当我们去点击开关的时候有动画效果,但遗憾的是Android上并没有给我们提供类似的组件(听说在Android4.0的版本上提供了具有动态效果的开关组件,不过我还没有去看文档),如果我们想实现类似的效果那该怎么办了呢?看来又得去自定义了. 公司的产品最近一直在做升级,主要做的就是把界面做的更绚丽更美观给用户更好的体验(唉,顾客是上帝......),其中的设置功能中就有开关按钮,原来的开

随机推荐