Основная панель анимации

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

_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 -> процент по оси x.

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

Спасибо.

P.S. Вот URL значка батареи, который я нашел: Значок батареи

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

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

Таким образом, будет два слоя: один для батареи, которая в основном имеет статический размер, а другой слой представляет собой цветную полосу, возможно, зеленого цвета, чтобы представить количество заполненного изображения БАТАРЕИ.

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

Окончательная анимация

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


objective-c core-animation graphics cabasicanimation cgaffinetransform
person jsetting32    schedule 18.06.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

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

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

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

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

person Duncan C    schedule 18.06.2013