iOS渐变填充文字动画

Posted 2023-03-15

【中文标题】iOS渐变填充文字动画

【英文标题】：iOS gradient fill in text animation

【发布时间】：2020-10-19 04:13:51

【问题描述】：

在 ios Objective C 中，我需要带有渐变的文本填充动画，动画将从下到上（垂直）填充渐变。我不擅长 iOS 中的核心图形或动画。 以前有人做过这种任务吗？

任何帮助将不胜感激。

【参考方案1】：

这是一个想法。使用两个标签并为第二个设置动画。这有其局限性，要更进一步，您需要使用标签的图层或将其转换为 UIImage 的图层，然后对其进行动画处理。这从中心向外进行动画处理，这并不完全是什么您正在寻找，但现在只是一个想法。

故事板只包含一个按钮，您需要连接它来启动动画。

编辑

以前它从中心向外动画，但我已将其更改为从底部到顶部动画。

- ( void ) viewDidLoad

    [super viewDidLoad];

    // Start label
    UILabel * label = [[UILabel alloc] initWithFrame:CGRectMake ( 10, 50, 100, 20 )];
    
    // Configure
    label.text = @"Label";
    label.textColor = UIColor.redColor;
    label.sizeToFit;
    [self.view addSubview:label];

    // The label we animate in
    UILabel * label1 = [[UILabel alloc] initWithFrame:CGRectMake ( 10, 50, 100, 20 )];
    
    // Configure
    label1.text = @"Label";
    label1.textColor = UIColor.blueColor;
    label1.clipsToBounds = YES;
    label1.contentMode = UIViewContentModeBottom;
    label1.sizeToFit;

    // We keep a weak reference to it
    [self.view addSubview:label1];
    self.label1 = label1;


- ( IBAction ) buttonAction:( id ) sender

    CGRect f = self.label1.frame;
    CGRect b = self.label1.bounds;

    // Need to animate both the bounds and the frame's position
    self.label1.frame = CGRectMake( f.origin.x, f.origin.y + f.size.height / 2, f.size.width, f.size.height );
    self.label1.layer.bounds = CGRectMake( 0, 0, b.size.width, 0 );

    [UIView animateWithDuration:2
             animations:^

        self.label1.frame = f;
        self.label1.layer.bounds = b;

    ];

请注意，您需要向视图控制器添加一个弱属性，例如

@property (nonatomic,weak) UILabel * label1;

因为您稍后需要它才能制作动画。