[Swift]iOS动画:登录按钮动画

来源:互联网 发布:网络盗刷信用卡什么罪 编辑:程序博客网 时间:2024/05/30 02:26

Demo:https://github.com/Franzeyang/LoginButtonAnimation.git

简单说下思路:其实方法很简单,如大家所见,动画的上下两部分是一样的,都是先提供两条写好的贝塞尔曲线,再结合核心动画里的路径动画,于是就自动生成了大家看到的边框变成圆弧的动画过程,然后就是让它一直旋转就行了。

核心代码:

    func startAnimation(){        let pathAnim = CABasicAnimation(keyPath: "path")        pathAnim.duration = 0.25        pathAnim.isRemovedOnCompletion = true        bottomBorder.path = getCurvePath(at: "bottom")        topBorder.path = getCurvePath(at: "top")        bottomBorder.add(pathAnim, forKey: nil)        topBorder.add(pathAnim, forKey: nil)                DispatchQueue.main.asyncAfter(deadline: DispatchTime.now()+0.2, execute: {            let rotaionAnim  = CABasicAnimation(keyPath: "transform.rotation")            rotaionAnim.duration = 1            rotaionAnim.fillMode = kCAFillModeForwards            rotaionAnim.repeatCount = MAXFLOAT            rotaionAnim.toValue = -360*RAD            self.bottomBorder.add(rotaionAnim, forKey: "rotaionAnim")            self.topBorder.add(rotaionAnim, forKey: "rotaionAnim")        })    }    

    //获取上下边框路径    private func getBorderPath(at str:String)->CGPath{        let borderPath = UIBezierPath()        switch str {        case "top":            borderPath.move(to: CGPoint(x: bounds.width, y: bounds.height))            borderPath.addLine(to: CGPoint(x: bounds.width, y: 0))            borderPath.addLine(to: .zero)        case "bottom":            borderPath.move(to: .zero)            borderPath.addLine(to: CGPoint(x: 0, y: bounds.height))            borderPath.addLine(to: CGPoint(x: bounds.width, y: bounds.height))        default:()        }        return borderPath.cgPath    }    //获取圆的路径    private func getCurvePath(at str:String)->CGPath{        var curve:UIBezierPath!        let arrow = UIBezierPath()        let arcCenter = CGPoint(x: bounds.width/2, y: bounds.height/2)        let radius:CGFloat = 20        let l:CGFloat = 7//箭头长度        switch str {        case "top":            curve = UIBezierPath(arcCenter: arcCenter, radius: radius, startAngle: -30*RAD, endAngle: -180*RAD, clockwise: false)            curve.addLine(to: CGPoint(x: arcCenter.x-radius-l/2, y: arcCenter.y-l*0.886))            arrow.move(to: CGPoint(x: arcCenter.x-radius, y: arcCenter.y))            arrow.addLine(to: CGPoint(x: arcCenter.x-radius+l/2, y: arcCenter.y-0.866*l))        case "bottom":            curve = UIBezierPath(arcCenter: arcCenter, radius: radius, startAngle: 150*RAD, endAngle: 0, clockwise: false)            curve.addLine(to: CGPoint(x: arcCenter.x+radius-l/2, y:arcCenter.y+l*0.866))            arrow.move(to: CGPoint(x: arcCenter.x+radius, y: arcCenter.y))            arrow.addLine(to: CGPoint(x: arcCenter.x+radius+l/2, y: arcCenter.y+0.866*l))        default:()        }        curve.append(arrow)        return curve.cgPath    }


原创粉丝点击