Core Animation Bar

Question

В настоящее время у меня есть изображение ... значок батареи ...

_MeterBar = [[UIImageView alloc] initWithFrame:CGRectMake(25, 40, 50, 40)]; 
_MeterBar.image = [UIImage imageNamed:@"battery-empty-icon.png"]; 
_MeterBar.backgroundColor = [UIColor clearColor]; 

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

Получение значения не представляет проблемы, но добавление анимации является проблемой. Я в основном скопировал и вставил код, на который пользователь ответил раньше, но я застрял: /. Когда я добавить анимацию, нет изображений .....

CABasicAnimation *scaleToValue = [CABasicAnimation animationWithKeyPath:@"transform.scale.x"]; 
scaleToValue.toValue = [NSNumber numberWithFloat:100.0f]; 
scaleToValue.fromValue = [NSNumber numberWithFloat:0]; 
scaleToValue.duration = 1.0f; 
scaleToValue.delegate = self; 
_MeterBar.layer.anchorPoint = CGPointMake(0.5, 1); 
[_MeterBar.layer addAnimation:scaleToValue forKey:@"scaleRight"]; 
CGAffineTransform scaleTo = CGAffineTransformMakeScale(1.0f, 50.0f); 
_MeterBar.transform = scaleTo; 

[_PowerNowView addSubview:_MeterBar]; 

значка батареи более широкий, чем высокий, так что я оживляющего от 0 -> процента по оси х.

Если у кого есть какие-либо намеки, подсказки или примеры примеры, что делает эту точную анимацию, я бы очень ценю вашу помощь :)

Спасибо.

P.S. Херес URL аккумуляторной иконы я нашел: Battery Icon

Извините за не ясно, но я хотел бы иметь цветной слой Seperate значка батареи ...

Я хотел бы создать Черт над изображение батареи и динамическое оживление бара относительно размера батареи .... фактически не изменяет размер самого изображения батареи.

Таким образом, было бы два слоя, один для батареи, которая в основном статична а другой слой - цветной BAR, может быть зеленый цвет, чтобы представить количество заполняемого изображения BATTERY.

Хорошая ссылка на то, что я хотел бы сделать, это то, что делает приложение MINT, целью которого является запись ваших банковских выписок.

Окончательные анимированные батареи выше очень хорошо, но я хотел бы, чтобы показать бар внутри батареи и анимировать его по выдвинутому значению данных.

Answer 1

Несколько вещей.

Ваша шкала 100 сделает ваш слой в 100 раз больше обычного. Если это 300 пикселей на стороне, масштаб 100 будет отображать его как 30 000 пикселей на стороне.

Вы хотите, чтобы ваши масштабировать значение до 1,0, а не 100.

Кроме того, я не уверен, если масштабирования умножает преобразование предыдущего масштаба растущего фактора. Если это так, то начальное значение шкалы 0 будет препятствовать тому, чтобы оно постоянно возрастало, поскольку все нулевые значения все равно равны нулю. Попробуйте a от значения .0001 вместо 0.0,

Если вы хотите, чтобы изображение вашей батареи увеличивалось слева направо, не хотите ли вы, чтобы ваша опорная точка была (0, .5), а не (.5, 1)?

И, когда вы меняете опорную точку, она не только изменяет центр преобразований, но и перемещает положение изображения. Вам нужно будет отрегулировать положение для компенсации. Я всегда должен почесать голову и подумать об этом очень сложно (и, как правило, все равно ошибаюсь), но я думаю, что вы захотите сдвинуть положение X вашего взгляда вправо на половину его ширины.

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

Возможно, было бы лучше прикрепить CAShapeLayer к виду в качестве слоя маски и анимировать путь слоя формы из пустого прямоугольника (Width = 0, height = full height of view) к прямоугольнику, который является полным размером представления. Это заставило бы вид оживить анимацию «вытереть», где она будет показана слева направо без растягивания.