水波纹图片怎么做-iOS核心动画之图片旋转、脉冲动画、水波纹动画

两张图片规则波浪纹拼接,你想想难度有多高,这种图基本上都是上层图片做了个蒙版,或者是剪切蒙版来完成的,做个波浪形的蒙版应当是横简单的事情。如图

下边有整体效果,希望能帮助到你!

定义一个视图

@property (weak, nonatomic) IBOutlet UIImageView *imageView;

一、图片旋转三种方式:

第一种:根据CGPathAddArc 绘画图片旋转路线:

/*

1、<#CGMutablePathRef  _Nullable path#> 路线

2、确定圆心<#CGFloat x#> <#CGFloat y#>

3、半径<#CGFloat radius#>

4、起点 <#CGFloat startAngle#> 结束 <#CGFloat endAngle#>

*/

CGPathAddArc(path, NULL, .x, .y, 0.1, 0, M_PI *2, 1);

CAKeyframeAnimation * frameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];

= path;

CGPathRelease(path);

=self;

=10;// 持续时间

= -1;// 重复次数 如果为0表示不执行,-1表示不限制次数,默认为0

=NO;

= kCAAnimationRotateAuto;// 样式

= kCAFillModeForwards;

[:frameAnimationforKey:nil];

第二种:

[UIView animateWithDuration:20.0f animations:^{

if () {

= CGAffineTransformMakeRotation(M_PI*5);

}

}];

第三种:

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@".z"];

//默认是顺时针效果,若将fromValue和toValue的值互换,则为逆时针效果

= [NSNumber numberWithFloat:0.f];

= [NSNumber numberWithFloat: M_PI *2];

=30;

=NO;

= kCAFillModeForwards;

= MAXFLOAT; //如果这里想设置成一直自旋转,可以设置为MAXFLOAT,否则设置具体的数值则代表执行多少次

[ addAnimation:animation forKey:nil];

持续旋转:

@property(nonatomic,assign) double angle;

CGAffineTransform endAngle = CGAffineTransformMakeRotation( * (M_PI / 180.0f));

[UIView animateWithDuration:0.01 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{

= endAngle;

}completion:^(BOOLfinished) {

+=10;

[self startAnimation2];// 上边任意一种方法回调

}];

// 当视图停止转动时调用此方法重新转动

-(void)endAnimation {

+=4;

[self startAnimation2];

}

二、水波纹动画

属性定义:几个波纹定义几个X 宽度可以用一个 也可以分开定义

@property (weak, nonatomic) IBOutlet UIView *backView;

@property(nonatomic,strong) CAShapeLayer * waterLayer1;

@property(nonatomic,strong) CAShapeLayer * waterLayer2;

@property(nonatomic,assign) CGFloat x;

@property(nonatomic,assign) CGFloat y;

@property(nonatomic,assign) CGFloat waveHeight;

@property(nonatomic,assign) CGFloat waveWidth;

@property(nonatomic,assign) int speedWave;

@property(nonatomic,assign) CGFloat waveAmplitude;

@property(nonatomic,assign) int speed;

@property(nonatomic,assign) CGFloat speed_H;

@property(nonatomic,assign) CGFloat offsetXT;

-(instancetype)init {// 给个初始值,下边被除数不能为0

if (self == [super init]) {

= 3;

= 3;

=3;

= ;

= ;

_H = -20;

}

return self;

}

-(void)waterAnimation {

//    CGFloat y = _waveHeight*sinf(2.5*M_PI*i/_waveWidth + 3*_offset*M_PI/_waveWidth + M_PI/4) + _h;

1 = [CAShapeLayer layer];

= [UIColor yellowColor].CGColor;

[ addSublayer:1];

2 = [CAShapeLayer layer];

= [UIColor redColor].CGColor;

[ addSublayer: 2];

//创建一个新的 CADisplayLink 对象,把它添加到一个runloop中,并给它提供一个 target 和selector 在屏幕刷新的时候调用

//CADispayLink相当于一个定时器 会一直绘制曲线波纹 看似在运动,其实是一直在绘画不同位置点的余弦函数曲线

CADisplayLink * waveDisplayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(getCurrentWave)];

[waveDisplayLinkaddToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];

}

-(void)getCurrentWave {

// x位置

self.x+=;

//声明第一条波曲线的路径

CGMutablePathRef path = CGPathCreateMutable();

//设置起始点

CGPathMoveToPoint(path,nil,0,);

CGFloaty =0.f;

//第一个波纹的公式

for(floatx =0.f; x <=; x++) {

y =*sin((200/) * (x *M_PI/70) -self.x*M_PI/170) +_H*1;

CGPathAddLineToPoint(path,nil, x, y);

x++;

}

//把绘图信息添加到路径里

CGPathAddLineToPoint(path, nil, , );

CGPathAddLineToPoint(path, nil, 0, );

//结束绘图信息

CGPathCloseSubpath(path);

= path;

//释放绘图路径

CGPathRelease(path);

[self    X2];

}

/// 第二条水波

-(void)X2 {

+= ;

CGMutablePathRef pathT = CGPathCreateMutable();

CGPathMoveToPoint(pathT,nil,0,+50);

CGFloatyT =0.f;

for(floatx =0.f; x <=; x++) {

yT =*1.6*sin((200/) * (x *M_PI/100) -*M_PI/170) +;

CGPathAddLineToPoint(pathT,nil, x, yT-10);

}

CGPathAddLineToPoint(pathT, nil, , );

CGPathAddLineToPoint(pathT, nil, 0, );

CGPathCloseSubpath(pathT);

= pathT;

CGPathRelease(pathT);

}

三、脉冲效果动画

@property (weak, nonatomic) IBOutlet UIView *pulseView;

@property(nonatomic,strong) CAShapeLayer * pulseLayer;

-(void)pulseAnimation {

CGFloat width = ;

= [CAShapeLayer layer];

=CGRectMake(0,0, width, width);

=CGPointMake(width/2, width/2);

= [UIColor clearColor].CGColor;

= [UIBezierPath bezierPathWithOvalInRect:].CGPath;

= [UIColor colorWithRed: 0.3490196078 green:0.737254902 blue:0.8039215686 alpha:1].CGColor;

= 0.0;

CAReplicatorLayer * replicatorLayer = [CAReplicatorLayer layer];

=CGRectMake(0,0, width, width);

=CGPointMake(width/2, width/2);

=4;// 复制层

=1;/// 频率

[replicatorLayeraddSublayer:];

[:replicatorLayer];

[:replicatorLayeratIndex:0];

}

-(void)startPulseAnimation {

CABasicAnimation * opacityAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];

=@20;// 起始值 (strong 修饰的id值)

=@30;// 结束值(strong 修饰的id值)

CABasicAnimation * scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];

= [NSValue valueWithCATransform3D:CATransform3DScale(CATransform3DIdentity, 0.0, 0.0, 0.0)];

=[NSValue valueWithCATransform3D:CATransform3DScale(CATransform3DIdentity, 1.0, 1.0, 1.0)];

CAAnimationGroup * groupAnimation = [CAAnimationGroup animation];

=@[opacityAnimation, scaleAnimation];

=20;

=NO;

=HUGE;

[:groupAnimationforKey:nil];

}

在此附上效果:

听说有好得三方库,我还没有去找过,欢迎各位大佬推荐一个优质的三方。。。。。

喜欢的朋友点个赞呗!

一,主要原因:

魅族MX3是高速的感光摄像头,支持25张/秒的高速连拍。0延时拍照技术。

二,“水波纹”原因和原理:

我们平时用手机拍摄电脑和电视屏幕的时候或者在日光灯下拍照总会发现会拍下一些影响画面的“水波纹”,那么这些“水波纹”到底是怎么产生的呢?我们又能怎样去消灭它呢?

其实这些“水波纹”产生是因为屏幕刷新频率低于手机的快门速度才会生成的,刷新频率就是我们常说的屏幕的赫兹(Hz)。我们平常的旧式电视机刷新频率一般为 50Hz,比较新式的是 60Hz,现在我们多数使用的液晶显示器也多数默认为 60Hz。

日光灯为50Hz。

因为屏幕或者日光灯不是一直在发光的,而是更隔一段时间就会刷新一次,例如那个 50Hz,就代表每秒刷新50次,人类肉眼是完全察觉不出屏幕有什么闪动的。而手机拍摄屏幕的时候,多数也会有比较快的快门速度。当快门速度比刷新频率快的时候,就能捕捉到我们肉眼看不到的屏幕刷新过程,这就会产生“水波纹”。

三,如何消灭:

要消灭水波纹,其实很简单的就是把快门速度调慢。

魅族MX3的相机设置里有快门速度的选项的:

1/8就是0.125秒的意思,1/4 是0.25秒,最慢的是1.5秒。1.5秒可以用来延时拍照了。

PS:延时拍照进光量会增大的,需要在曝光补偿先设置为负值。

如果您的相机没有快门速度选项的,请更新固件:MX3 Flyme 3.5.2