iOS开发

lottie-ios 对号动画

2024-02-15  本文已影响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()
        }
    }

最终效果:

对号动画
上一篇下一篇

猜你喜欢

热点阅读