当ios遇上css3动画系列(2) --ios动画之flash 闪烁

当ios遇上css3动画系列(2) --ios动画之flash 闪烁

这篇文章来看下flash闪烁动画的。
上css3动画代码

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }

  25%, 75% {
    opacity: 0;
  }
}

依据css3代码,写出ios动画代码

- (void)flash{
    CAKeyframeAnimation* keyAnim = [CAKeyframeAnimation animationWithKeyPath:@"opacity"];
    float opacity_1 = 1;
    float opacity_2 = 0;
    NSMutableArray *values = [NSMutableArray array];
    [values addObject:[self getNumberWithFloat:opacity_1]];
    [values addObject:[self getNumberWithFloat:opacity_2]];
    [values addObject:[self getNumberWithFloat:opacity_1]];
    [values addObject:[self getNumberWithFloat:opacity_2]];
    [values addObject:[self getNumberWithFloat:opacity_1]];
    [keyAnim setValues:values];
    
    NSMutableArray *keyTimes = [NSMutableArray array];
    [keyTimes addObject:[self getNumberWithFloat:0]];
    [keyTimes addObject:[self getNumberWithFloat:0.25]];
    [keyTimes addObject:[self getNumberWithFloat:0.5]];
    [keyTimes addObject:[self getNumberWithFloat:0.75]];
    [keyTimes addObject:[self getNumberWithFloat:1.0]];
    [keyAnim setKeyTimes:keyTimes];
    [keyAnim setDuration:1.0];
        [keyAnim setFillMode:kCAFillModeBoth];
    [self.TextTest.layer addAnimation:keyAnim forKey:nil];
    
}

gif效果图


当ios遇上css3动画系列(2) --ios动画之flash 闪烁_第1张图片

使用了CABasicAnimation 动画来做,比较简单,opacity值的变化。

-(void)breathingLight{
    CABasicAnimation* animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
    animation.duration = 1;
    animation.repeatCount = HUGE_VALF;
    animation.fromValue= [NSNumber numberWithFloat:1];
    animation.toValue = [NSNumber numberWithFloat:0.2];
    animation.autoreverses = YES;
    [self.TextTest.layer addAnimation:animation forKey:nil];
    
}
当ios遇上css3动画系列(2) --ios动画之flash 闪烁_第2张图片

你可能感兴趣的:(当ios遇上css3动画系列(2) --ios动画之flash 闪烁)