You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

同一UIViewController下实现UILabel移动缩放淡出至另一UILabel位置的动画

实现UILabel位移+缩放+淡出组合动画方案

你只需要修改fadeWelcomeMessage方法,在原有透明度动画的基础上,增加位移和缩放的transform动画即可,无需改动原有布局逻辑,完整修改后的方法如下:

func fadeWelcomeMessage(message: String, color: UIColor, finalAlpha: CGFloat) {
    fadingWelcomeMessageLabel.text                  = message
    fadingWelcomeMessageLabel.alpha                 = 1.0
    fadingWelcomeMessageLabel.isHidden              = false
    fadingWelcomeMessageLabel.textAlignment         = .center
    fadingWelcomeMessageLabel.backgroundColor       = color
    fadingWelcomeMessageLabel.layer.cornerRadius    = 5
    fadingWelcomeMessageLabel.layer.masksToBounds   = true
    fadingWelcomeMessageLabel.font                  = UIFont.systemFont(ofSize: 24.0)
    // 动画开始前重置transform,避免上次动画残留影响
    fadingWelcomeMessageLabel.transform = .identity
    
    // 计算目标位置:获取usernameLabel在当前父视图中的中心点
    let targetCenter = view.convert(usernameLabel.center, from: usernameLabel.superview)
    // 计算位移偏移量
    let offsetX = targetCenter.x - fadingWelcomeMessageLabel.center.x
    let offsetY = targetCenter.y - fadingWelcomeMessageLabel.center.y
    // 计算缩放比例,这里以宽度比为准,你也可以自定义固定缩放值
    let scaleRatio = usernameLabel.bounds.width / fadingWelcomeMessageLabel.bounds.width
    // 组合位移+缩放变换
    let targetTransform = CGAffineTransform(translationX: offsetX, y: offsetY).scaledBy(x: scaleRatio, y: scaleRatio)
    
    UIView.animate(withDuration: 6.0, delay: 0, options: .curveEaseOut) {
        // 同时执行三个动画:透明度变化、位移、缩放
        self.fadingWelcomeMessageLabel.alpha = finalAlpha
        self.fadingWelcomeMessageLabel.transform = targetTransform
    } completion: { _ in
        // 动画结束后复位状态,方便后续再次调用
        self.fadingWelcomeMessageLabel.isHidden = true
        self.fadingWelcomeMessageLabel.transform = .identity
        self.fadingWelcomeMessageLabel.alpha = 1.0
    }
}

可调整参数说明

  • 动画时长:修改animate(withDuration:)的第一个参数即可自定义动画时长,单位为秒
  • 缩放比例:如果不需要完全适配usernameLabel的尺寸,可以把scaleRatio替换为固定值比如0.2、0.3,调整到你需要的缩小效果
  • 动画速率:修改options参数可以调整动画的速度曲线,比如.curveLinear是匀速,.curveEaseIn是先慢后快,.curveEaseInOut是两端慢中间快

内容的提问来源于stack exchange,提问作者Florentin Lupascu

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.30 04:48:03