美文网首页iOS开发
lottie-ios 对号动画

lottie-ios 对号动画

作者: _浅墨_ | 来源:发表于2024-02-15 17:51 被阅读0次

    一、集成 lottie-ios

    请参考 lottie-ios官方文档

    二、下载资源文件并引入项目

    lottiefiles.com 网站下载动画资源文件

    eg.
    checkmark 对号资源

    将下载好的 .json 文件导入到项目中

    三、对号动画代码示例

    @objc private func copyResult() {
            if let resultToCopy = resultLabel.text {
                // 将结果复制到剪贴板
                UIPasteboard.general.string = resultToCopy
                
                // 显示自定义的已复制弹框
                showCheckmarkAnimation()
            }
            
        }
        
        private func showCheckmarkAnimation() {
            // 加载不同 "checkmark" 文件,可以调整动画速度
            let animationView = AnimationView(name: "checkmark-0.5-speed")
            animationView.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
            animationView.center = self.view.center
            animationView.contentMode = .scaleAspectFill
    
            view.addSubview(animationView)
    
            animationView.play { [weak self] (finished) in
                // Remove the animation view after it has completed
                animationView.removeFromSuperview()
                
                // Optionally show a label that says "已复制"
                self?.showCopiedLabel()
            }
        }
    
        private func showCopiedLabel() {
            let copiedLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 50))
            copiedLabel.center = self.view.center
            copiedLabel.textAlignment = .center
            copiedLabel.text = "Copied".localized()
            copiedLabel.textColor = .black
            view.addSubview(copiedLabel)
            
            // Fade out the label after 2 seconds
            UIView.animate(withDuration: 2.0, animations: {
                copiedLabel.alpha = 0
            }) { _ in
                copiedLabel.removeFromSuperview()
            }
        }
    

    最终效果:

    对号动画

    相关文章

      网友评论

        本文标题:lottie-ios 对号动画

        本文链接:https://www.haomeiwen.com/subject/mxxyadtx.html