在跟随自定义刷新控件(1)之后,做一个自定义类似美团的刷新控件,效果图如下:
首先,自定义一个YWMTRefreshView类 继承YWRefreshView,通过xib把相对应的控件添加到视图,通过序列帧动画完成建筑物、和袋鼠的动画效果
//1.房子 let bImg1 = #imageLiteral(resourceName: "icon_building_loading_1") let bImg2 = #imageLiteral(resourceName: "icon_building_loading_2") buildIV.image = UIImage.animatedImage(with: [bImg1,bImg2], duration: 0.5)
而地球的旋转动画,因为transform无法完成旋转一周的效果,这里使用核心动画的方式:
//2.地球 //创建旋转动画 CABasicAnimation提供了对单一动画的实现 let anim = CABasicAnimation(keyPath: "transform.rotation") //2 * M_PI 旋转一周,- 代表逆时针,默认为顺时针 anim.toValue = -2 * M_PI //不限循环次数 anim.repeatCount = MAXFLOAT //旋转一周的时间 anim.duration = 3 //是否动画完成后,动画效果从设置的layer上移除 anim.isRemovedOnCompletion = false //添加动画 earthIV.layer.add(anim, forKey: nil)
袋鼠向下拉会由小变大,超过临界点保持不变的效果,首先要设置锚点:
锚点决定着CALayer身上的哪个点会在position属性所指的位置
以自己的左上角为原点(0, 0)
它的x、y取值范围都是0~1,默认值为(0.5, 0.5)
kangarooIV.transform = CGAffineTransform(scaleX: 0.2, y: 0.2) //设置锚点 kangarooIV.layer.anchorPoint = CGPoint(x: 0.5, y: 1) //设置center kangarooIV.center = CGPoint(x: self.bounds.width * 0.5, y: self.bounds.height - 25)
由父视图的高度,通过didSet方法实时改变kangarooIV.transform的scale的值,来改变大小。
Demo地址:https://github.com/iosyaowei/refreshDemo/tree/MTRefresh