TKSubmitTransition核心组件深度解析：TransitionSubmitButton与SpinerLayer实现原理

TKSubmitTransition核心组件深度解析TransitionSubmitButton与SpinerLayer实现原理【免费下载链接】TKSubmitTransitionAnimated UIButton of Loading Animation and Transition Animation. Inspired by https://dribbble.com/shots/1945593-Login-Home-Screen项目地址: https://gitcode.com/gh_mirrors/tk/TKSubmitTransitionTKSubmitTransition是一个专注于提供加载动画和过渡动画效果的UIButton组件库其核心功能在于通过TransitionSubmitButton与SpinerLayer的协同工作实现流畅且富有视觉吸引力的用户交互体验。本文将深入剖析这两个核心组件的实现原理帮助开发者理解其内部机制并灵活应用于实际项目中。TransitionSubmitButton动画按钮的核心控制器TransitionSubmitButton作为整个组件的核心控制器继承自UIButton并实现了UIViewControllerTransitioningDelegate和CAAnimationDelegate协议从而具备了丰富的动画控制能力。核心属性与初始化在TransitionSubmitButton的定义中我们可以看到其包含了多个关键属性lazy var spiner: SpinerLayer! { let s SpinerLayer(frame: self.frame) return s }() IBInspectable open var spinnerColor: UIColor UIColor.white { didSet { spiner.spinnerColor spinnerColor } } open var didEndFinishAnimation : (()-())? nil let springGoEase CAMediaTimingFunction(controlPoints: 0.45, -0.36, 0.44, 0.92) let shrinkCurve CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear) let expandCurve CAMediaTimingFunction(controlPoints: 0.95, 0.02, 1, 0.05) let shrinkDuration: CFTimeInterval 0.1这些属性定义了动画的时间曲线、持续时间以及与SpinerLayer的关联。在初始化方法中setup()函数负责基本的视图配置包括开启clipsToBounds和设置spinnerColor。动画控制流程TransitionSubmitButton提供了完整的动画生命周期控制startLoadingAnimation()启动加载动画包括按钮收缩和 spinner 动画startFinishAnimation()启动完成动画包括按钮扩展和 spinner 停止animate()组合加载和完成动画的便捷方法setOriginalState()恢复按钮原始状态以startLoadingAnimation()为例其实现流程如下open func startLoadingAnimation() { self.isAnimating true self.cachedTitle title(for: UIControl.State()) self.setTitle(, for: UIControl.State()) self.layer.addSublayer(spiner) // Animate self.cornerRadius() self.shrink() _ Timer.schedule(delay: self.shrinkDuration - 0.25) { timer in self.spiner.animation() } }该方法首先缓存当前标题并清空按钮文本然后添加spiner子图层接着执行cornerRadius()和shrink()动画并通过定时器延迟启动spiner动画。关键动画实现TransitionSubmitButton实现了三种关键动画效果cornerRadius()通过CABasicAnimation实现按钮圆角变化shrink()实现按钮宽度收缩的动画效果expand()实现按钮扩展的动画效果以shrink()为例其实现如下func shrink() { let shrinkAnim CABasicAnimation(keyPath: bounds.size.width) shrinkAnim.beginTime CACurrentMediaTime() 0.1 shrinkAnim.fromValue frame.width shrinkAnim.toValue frame.height shrinkAnim.duration shrinkDuration shrinkAnim.timingFunction shrinkCurve shrinkAnim.fillMode CAMediaTimingFillMode.forwards shrinkAnim.isRemovedOnCompletion false layer.add(shrinkAnim, forKey: shrinkAnim.keyPath) }这段代码创建了一个基础动画将按钮宽度从原始值收缩到与高度相同形成一个圆形按钮为后续的加载动画做准备。SpinerLayer加载动画的视觉实现SpinerLayer继承自CAShapeLayer负责实现圆形加载动画的视觉效果。初始化与路径绘制在SpinerLayer的初始化方法中首先计算了圆形路径的参数并创建了一个贝塞尔曲线路径init(frame:CGRect) { super.init() let radius:CGFloat (frame.height / 2) * 0.5 self.frame CGRect(x: 0, y: 0, width: frame.height, height: frame.height) let center CGPoint(x: frame.height / 2, y: bounds.center.y) let startAngle 0 - (Double.pi / 2) let endAngle Double.pi * 2 - (Double.pi / 2) let clockwise: Bool true self.path UIBezierPath(arcCenter: center, radius: radius, startAngle: CGFloat(startAngle), endAngle: CGFloat(endAngle), clockwise: clockwise).cgPath self.fillColor nil self.strokeColor spinnerColor.cgColor self.lineWidth 1 self.strokeEnd 0.4 self.isHidden true }这段代码创建了一个圆形路径并设置了描边颜色、线宽等属性其中strokeEnd设为0.4使得初始状态下只显示圆形的40%形成一个圆弧。旋转动画实现SpinerLayer的核心动画功能通过animation()方法实现func animation() { self.isHidden false let rotate CABasicAnimation(keyPath: transform.rotation.z) rotate.fromValue 0 rotate.toValue Double.pi * 2 rotate.duration 0.4 rotate.timingFunction CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear) rotate.repeatCount HUGE rotate.fillMode CAMediaTimingFillMode.forwards rotate.isRemovedOnCompletion false self.add(rotate, forKey: rotate.keyPath) }该方法创建了一个围绕Z轴旋转的基础动画设置旋转角度从0到2π360度持续时间0.4秒并设置无限重复从而实现了持续旋转的加载动画效果。实际应用效果展示下图展示了TKSubmitTransition在实际应用中的效果。左侧为登录界面包含了Submit按钮右侧为登录成功后的主界面。当用户点击登录按钮时按钮会收缩为圆形并显示旋转动画登录成功后按钮会扩展并过渡到主界面。组件协作流程解析TransitionSubmitButton与SpinerLayer的协作是实现整个动画效果的关键。其主要协作流程如下当调用startLoadingAnimation()时TransitionSubmitButton将SpinerLayer添加到自身图层TransitionSubmitButton执行收缩动画同时通过定时器启动SpinerLayer的旋转动画当调用startFinishAnimation()时TransitionSubmitButton执行扩展动画同时停止SpinerLayer的旋转动画动画完成后TransitionSubmitButton移除SpinerLayer并恢复原始状态这种协作方式将动画控制与视觉呈现分离使代码结构更加清晰便于维护和扩展。快速集成指南要在项目中使用TKSubmitTransition首先需要克隆仓库git clone https://gitcode.com/gh_mirrors/tk/TKSubmitTransition然后将以下核心文件添加到项目中SubmitTransition/Classes/TransitionSubmitButton.swiftSubmitTransition/Classes/SpinerLayer.swift通过这两个核心组件开发者可以轻松实现具有专业级动画效果的提交按钮提升应用的用户体验。总结TKSubmitTransition通过TransitionSubmitButton与SpinerLayer的精妙设计实现了按钮从正常状态到加载状态再到完成状态的流畅过渡。其核心在于利用Core Animation框架实现属性动画并通过组件化设计将动画控制与视觉呈现分离。这种设计不仅使代码结构清晰也为开发者提供了灵活的定制能力可以根据实际需求调整动画参数实现个性化的交互效果。无论是开发登录界面、表单提交还是其他需要加载反馈的场景TKSubmitTransition都能为应用增添专业且富有吸引力的动画效果提升整体用户体验。通过深入理解其实现原理开发者可以更好地利用这一组件并将其设计思想应用到其他动画场景中。【免费下载链接】TKSubmitTransitionAnimated UIButton of Loading Animation and Transition Animation. Inspired by https://dribbble.com/shots/1945593-Login-Home-Screen项目地址: https://gitcode.com/gh_mirrors/tk/TKSubmitTransition创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考