澳门威利斯人_威利斯人娱乐「手机版」

来自 澳门威利斯人 2020-04-02 07:04 的文章
当前位置: 澳门威利斯人 > 澳门威利斯人 > 正文

动画分享,类似淘宝个人信息状态栏

相同Tmall个人音信状态栏,京东经济等双波浪动漫

关键情势:通过自定义View,利用正弦函数与余弦函数的效果.

补上:Demo地址

效果如下:

一.相关概念解释

正弦函数: y =Asin CA 表示振幅,也便是应用这么些变量来调动波浪的中度ω表示周期,也正是运用这么些变量来调节在显示器内显示的波浪的数据φ表示波浪横向的偏移,也便是应用那些变量来调度波浪的流动C表示波浪纵向的岗位,也便是运用那一个变量来调动波浪在显示器中竖直的地点。

利用CADisplayLink,进行UI的刷新.

@property (nonatomic,strong)CADisplayLink *wavesDisplayLink;@property (nonatomic,strong)CAShapeLayer *firstWavesLayer;

iOS设备的显示器刷新频率是60Hz,因而CADisplayLink的selector 私下认可调用周期是每秒五十六遍,那几个周期能够经过frameInterval属性设置, CADisplayLink的selector每秒调用次数=60/ frameInterval。举个例子当 frameInterval设为2,每秒调用就形成34回。

关于CADisplayLink,此处用NSTimer亦可.

CAShapeLayerCAShapeLayer 的目的是多个自己并未形状,他的造型来源于你加以的Path,它借助于path,所以必得给定path,就算path不完全也会自动终止相接,strokeStart乃至stroleEnd代表着那几个path中所占的百分比(可以采纳storkeStart和stroleEnd来做曲线进度的动漫片卡塔尔.

一.关键帧动漫

效果如下(模仿推特(TWTR.US卡塔尔(قطر‎的启航动漫)

图片 1

22211.gif

图片 2

二.入眼代码

正弦与余弦函数

//创建一个路径CGMutablePathRef path = CGPathCreateMutable();CGFloat y = currentK;//将点移动到 x=0,y=currentK的位置CGPathMoveToPoint(path, nil, 0, y);for (NSInteger i =0.0f; i<=WavesWidth; i  ) { //正弦函数波浪公式 y = waveA * sin(waveW * i  offsetX) currentK; //第二个View中:使用余弦函数波浪公式 //y = waveA * cos(waveW * i  offsetX) currentK; //将点连成线 CGPathAddLineToPoint(path, nil, i, y);}CGPathAddLineToPoint(path, nil, WavesWidth, 0);CGPathAddLineToPoint(path, nil, 0, 0);CGPathCloseSubpath;self.firstWavesLayer.path = path;//使用layer 而没用CurrentContextCGPathRelease;

亟需通晓的

12345.gif

三.相关成效

1.正弦函数与余弦函数:相像速度/振幅/周期/非震荡效果

图片 3一致速度:振幅:周期:非震荡.gif2.正弦函数与余弦函数:*同一速度/振幅/周期/震荡效果,那就象是天猫商城个人新闻状态栏,余弦函数中加π/2便是峰顶与峰底对应效果图片 4相像速度:振幅:周期:颠荡.gif

什么是CAKeyframeAnimation

看名称就能够想到其意义,CAKeyframeAnimation 就一定于 Flash 里的器重帧动漫 ,如若你用过 Flash 制作动漫的话你就驾驭,假若我们要得以达成贰个大约的职位平移、大小缩放、形状调换,我们只须要使用补间动画就足以兑现。具体操作正是给出动漫的起头状态和竣事状态五个关键帧,中间的动漫进度只必要设置一个补间就可以,剩下的业务软件会活动完结。而那边的开场状态和竣事状态的概念,也被沿用到了 CAKeyframeAnimation 里所说的根本帧 。

代码中,设置了3个关键帧,

[transAnimation setValues:@[[NSValue valueWithCGRect:firstBounds],[NSValue valueWithCGRect:secondBounds],[NSValue valueWithCGRect:finalBounds]]];

並且安装相应的时刻点

transAnimation.keyTimes = @[@0,@0.5,@1];

也便是卡通片一从头时 bounds 处于 firstBounds 状态;duration 50%时刻时处于 secondBounds 状态;动漫结束时处于 finalBounds 状态。

  • 补充

当你给一个 CALayer 增添动漫的时候,动漫其实并从未改良这一个 layer 的实际上质量。代替他的,系统会制造一个原始 layer 的正片。在文书档案中,苹果称那一个原始 layer 为 Model Layer ,而以此复制的 layer 则被称为 Presentation Layer 。 Presentation Layer 的习性会趁机动漫的快慢实时改造,而 Model Layer 中对应的属性则并不会改革。这里就足以引出 removedOnCompletionfillMode 了。

removedOnCompletion 的官方解释是:

/* When true, the animation is removed from the render tree once its
 * active duration has passed. Defaults to YES. */

约等于暗中认可情形下系统会在 duration 时间后活动移除那一个CAKeyframeAnimation。当 remove 了有些动漫,那么系统就能够活动销毁这一个layer 的 Presentation Layer ,只留下 Model Layer 。 而前面提到 Model Layer 的品质其实并不曾成形,所以也就有了你前面见到的结果,视图在转手赶回了动画的开端状态。要清除这种气象,你要求先把 removedOnCompletion 设置为 no ,然后设置 fillMode 为kCAFillModeForwards 。关于 fillMode ,它有多个值:

  • kCAFillModeRemoved 这么些是暗中认可值,也等于说当动漫肇始前和动漫片甘休后,动漫对layer都并未有影响,动漫结束后,layer会苏醒到前边的景况。

  • kCAFillModeForwards 当动漫截止后,layer会一向保持着卡通末了的景况。

  • kCAFillModeBackwards 那一个和 kCAFillModeForwards 是相持的,正是在动漫起初前,你只要将动漫片加入了叁个layer,layer便任何时候进入动漫的起来状态并等待动漫起首。你能够那样设定测量检验代码,将七个卡通加入贰个layer的时候延迟5秒实行。然后就能够发觉在动漫未有起来的时候,只要动漫被投入了 layer , layer 便处于动漫起首状态, 动漫结束后,layer 也会恢复到事前的处境。

  • kCAFillModeBoth 了解了下边多个,那几个就很好掌握了,那么些其实就是地点五个的合成。动漫参加后旋即开首,layer便处在动漫起首状态,动漫结束后layer保持动画最后的情形。

贯彻那么些水波动漫首要如故要采纳下初中的学问:正弦函数

当速度/振幅/周期等转移时,会发生越多的遵从:

3.正弦函数与余弦函数:不一样速度/振幅,相通周期/非震荡效果,那几个效应用起来也特别不利那边安装为:正弦与余弦函数参数分化等时,会发出交错效果;此处自行尝试改良就能够发生不相同动漫效果.

正弦函数: //设置波浪流动速度wavesSpeed = 0.02;//设置振幅waveA = 12;//设置周期waveW = 0.5/30.0余弦函数: //设置波浪流动速度wavesSpeed = 0.04;//设置振幅waveA = 13;//设置周期waveW = 0.5/30.0;

图片 5今非昔比速度:振幅,相像周期非颠簸.gif4.正弦函数与余弦函数:不等速度/振幅,雷同周期/颠簸效果图片 6差别速度:振幅,相仿周期:震荡.gif

5.正弦函数与余弦函数:差别速度/振幅,相近周期/,峰顶与峰底对应效果,可机关开启颠荡更动余弦函数公式为:

//如果需要正弦函数的峰顶和余弦函数的峰底对应,可以替换成下方公式均可//y = waveA * cos(waveW*i   offsetX M_PI_2) currentK; //y = waveA * sin(-(waveW*i   offsetX)) currentK;

图片 7同速度:振幅:周期,峰顶与峰底对应.gif

6.正弦函数与余弦函数:比如急需让双波浪在显示屏下方彰显改善代码为:以率先个波浪为例,第二个同理改过就可以.

//第一个波浪self.firstWare = [[FirstWaves alloc]initWithFrame:CGRectMake(0, self.view.frame.size.height-200, self.view.frame.size.width, 220)];//波浪公式下方更改CGPathAddLineToPoint(path, nil, WavesWidth, self.frame.size.height);CGPathAddLineToPoint(path, nil, 0, self.frame.size.height);

图片 8荧屏下方展现.png

什么是mask(蒙版)

CALayer有四本性质叫做mask,经常被叫作蒙版图层,那天性情本人也是CALayer类型,有和其他图层相通的绘图和布局属性。它雷同于三个子视图,相对于父图层(即怀有该属性的图层)布局,然而它却不是二个家常的子视图。差别于日常的subLayer,mask定义了父图层的可以预知区域,轻易点说正是终极父视图显示的形制是父视图本身和它的属性mask的名不副实部分。

图片 9

5.jpg

 //mask 蒙版
    CALayer *maskLayer = [CALayer layer];
    [maskLayer setFrame:self.waveView.bounds];
    maskLayer.contents = (id)[UIImage imageNamed:@"TwitterLogo_white"].CGImage;
    self.waveView.layer.mask = maskLayer;
y =Asin(ωx φ) C 
四.Demo地址

欢迎star :

规律解释

图片 10

6.png

解释一下,首先无可反驳APP运行一开始体现 LaunchScreen 。接下来 LaunchScreen 消失了,将在步向 NavigationController 时,我们为其设置遮罩,何况把遮罩的职位节制在和 LaunchScreen 中式茶食滴同一个地点,那样看起来就恍如星星平素停在原地。然而尽管个别的地点不动了,然则LaunchScreen 一旦结束未来就能够显示叁个黑底(UIWindow卡塔尔国, 立即就露馅。解决方法也是简简单单残暴,只要把 UIWindow 的背景象改成和 LaunchScreen 近似的颜色就可以了。

A 表示振幅,也正是接受那个变量来调动波浪的万丈 ω表示周期,约等于接收那些变量来调治在荧屏内显示的波浪的数码 φ表示波浪横向的撼动,也正是采用这一个变量来调治波浪的流动 C表示波浪纵向的职分,也正是接收这一个变量来调动波浪在显示屏中竖直的职位。

五.参谋资料

1.

有别的难点请私信也许留言,可能有更加好的落到实处情势,也请告诉作者.

达成步骤

珍视原理

CADisplayLink的靶子也是一个电磁打点计时器。适用于UI的不停刷新,如自定义动漫引擎恐怕录制的渲染。CADisplayLink 对象注册到Runloop之后。荧屏刷新的时候机械漏刻就能被触发。iOS设备的根基代谢频率是60HZ相当于60帧约等于每秒刷新陆拾三遍,也得以由此设置frameInterval属性为2那么两帧才会刷新三回。 CAShapeLayer 的对象是一个自己并未有形状,他的造型来源于你加以的Path,它依赖于path,所以必需给定path,即便path残缺也会自动终止相接,strokeStart以致stroleEnd代表着那些path中所占的百分比(能够动用storkeStart和stroleEnd来做曲线进程的卡通片)。

本文由澳门威利斯人发布于澳门威利斯人,转载请注明出处:动画分享,类似淘宝个人信息状态栏

关键词: 澳门威利斯人 动画 淘宝 个人信息 波浪