当ios遇上css3动画系列(3) --ios动画之pulse脉冲

这次演示的效果是脉冲效果,像是心脏跳动的效果

看下css3动画的代码

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.25, 1.25, 1.25);
            transform: scale3d(1.25, 1.25, 1.25);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}

其实很简单,就是在50%的时候放大了而已。

所以ios代码也很简单了

- (void)pulse{

    CAKeyframeAnimation* keyAnim = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
    CATransform3D transform3D_1 = CATransform3DMakeScale(1.0, 1.0, 1.0);
    CATransform3D transform3D_2 = CATransform3DMakeScale(1.25, 1.25, 1.25);

    NSMutableArray *transform3Ds = [NSMutableArray array];
    [transform3Ds addObject:[self getValueWithCATransform3D:transform3D_1]];
    [transform3Ds addObject:[self getValueWithCATransform3D:transform3D_2]];
    [transform3Ds addObject:[self getValueWithCATransform3D:transform3D_1]];
    [keyAnim setValues:transform3Ds];
    
    
    NSMutableArray *keyTimes = [NSMutableArray array];
    [keyTimes addObject:[self getNumberWithFloat:0]];
    [keyTimes addObject:[self getNumberWithFloat:0.5]];
    [keyTimes addObject:[self getNumberWithFloat:1.0]];
    [keyAnim setKeyTimes:keyTimes];
    [keyAnim setDuration:1.0];
    [keyAnim setRepeatCount:HUGE_VAL];
    [keyAnim setFillMode:kCAFillModeBoth];
    [self.TextTest.layer addAnimation:keyAnim forKey:nil];        
}

gif的效果图


当ios遇上css3动画系列(3) --ios动画之pulse脉冲_第1张图片

你可能感兴趣的:(当ios遇上css3动画系列(3) --ios动画之pulse脉冲)