Блог

Я использую XCode 12, macOS, objective-c, а не iOS.

У меня есть меню (горизонтальный вид стека) с 3 пунктами:

Синее подчеркивание создается программно:

 - (void)viewDidLoad {

    [super viewDidLoad];     
    [self createAnimatedLineAtButton:self.importButton];
}

// Create line
- (void)createAnimatedLineAtButton:(NSButton*)button {

    // This view is layer backed
    SHViewCustomBackground* underlineView = [[SHViewCustomBackground alloc] init];
    
    underlineView.backgroundColor = [NSColor colorNamed:@"color_spot"]; // blue color
    underlineView.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:underlineView];
    self.underlineView = underlineView;    

    [self updateAnimatedLineUnderButton:self.importButton];
}
  

Следующие коды обновляют ограничения (первоначально вызываемые при создании строки выше), а затем при нажатии каждой кнопки.

 - (void)updateAnimatedLineUnderButton:(NSButton *)button {
    
    // Constraints are stored here
    if (self.underlineConstraints) {
        [self.view removeConstraints:self.underlineConstraints];
    }

    [NSAnimationContext runAnimationGroup:^(NSAnimationContext *context){
        context.duration = 1;
        context.allowsImplicitAnimation = YES;
    
        NSView* underlineView = self.underlineView;
        NSDictionary *views = NSDictionaryOfVariableBindings(underlineView, button);
        self.underlineConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:[button]-[underlineView(1)]" options:NSLayoutFormatAlignAllLeading | NSLayoutFormatAlignAllTrailing metrics:nil views:views];
        [self.view addConstraints:self.underlineConstraints];
    
        [self.view layoutSubtreeIfNeeded];
    } completionHandler:nil];    
}
  

Вот действия кнопки

 - (IBAction)buttonClicked:(id)sender {
    
    [self updateAnimatedLineUnderButton:(NSButton*)sender];
}
  

Теперь мой вопрос: когда я нажимаю кнопки в таком порядке «Импорт»> «Экспорт»> «Импорт», строка анимируется, как и ожидалось, от импорта до экспорта и обратно. Всякий раз, когда я нажимаю на «Заполнитель» (средняя кнопка), строка просто прыгает и не анимируется. Когда я нажимаю «Импорт» или «Экспорт», после этого он тоже прыгает.

Я бьюсь головой о том, что здесь не так. Все кнопки подключены правильно, все действия выполняются правильно.

РЕДАКТИРОВАТЬ: после сравнения всех кнопок я обнаружил, что кнопка импорта и экспорта (где она работает) имеют одинаковую ширину.

Вот идея … это работает. Изначально я собирался сделать это по-своему, но, возможно, вам это не понравится, в итоге анимировал два ограничения. Но это работает хорошо.

Идея очень похожа на вашу, но разница здесь в том, что я создаю начальное и конечное ограничение и анимирую их вместо.

 @implementation ViewController

- ( void ) viewDidLoad
{
    super.viewDidLoad;
    [self animateLine:self.longButton];
}

// Animate the line
- ( void ) animateLine:( NSButton * ) button
{
    [NSAnimationContext runAnimationGroup: ^ ( NSAnimationContext * context ) {

        context.duration = 1;
        context.allowsImplicitAnimation = YES;
        self.leadingConstraint.animator.constant = button.frame.origin.x;
        self.trailingConstraint.animator.constant = self.stackView.bounds.size.width - button.frame.origin.x - button.frame.size.width;
        NSLog ( @"Setting leading to %f trailing to %f", self.leadingConstraint.constant, self.trailingConstraint.constant );

        self.lineField.layoutSubtreeIfNeeded;

    }];
}

- ( IBAction ) buttonAction:( id ) sender
{
    [self animateLine:sender];
}

  

Это оно. Остальное происходит в раскадровке. Я установил ограничения так, чтобы расстояния имели смысл, поменяв местами первый и второй элемент по вкусу.