优酷播放按钮动画原理解析

2023-10-08 02:59

本文主要是介绍优酷播放按钮动画原理解析,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一、动画过程分析

1、拆分动画

正常动画效果如下:

正常动画效果

操作现象结论
放慢动画放慢后的动画效果可以看出动画是由外侧的蓝色部分和中间的红色三角组成。
去掉旋转去掉旋转后的效果可以看出核心的东西就是竖和弧线的缩进、三角形的透明度变化。
只保一侧留竖线和圆弧竖线、圆弧可以看出竖线的动画时长大概是圆弧动动画时长的一半;弧线的运动角度是π/2,两个弧线正好组成一个完整的圆环。
只保留三角动画三角动画三角动画比较简单,就是两条半透明直线组成的三角,交叉处颜色会变深。然后添加改变其透明度的动画。

2、总结

动画是由四部分组成:

1、直线的缩放
2、弧线的缩放
3、三角的透明度变化
4、整体的旋转。

三个部分中执行时间最长的是弧线的缩放,找到这个很重要,这样就可以确定其他动画的开始时间和持续时间了,这个会在下面解释。

二、动画开发

1、竖线动画

在开发这类动画的时候,一般是先在外面个框框和辅助线,帮助我们更好的完成开发。
这里设整个“容器”的边长是a,坐标系的原点为容器的左上角。
设从暂停—>播放的状态为正向,从播放—>暂停为逆向。

效果入下:

添加坐标系

确定好坐标系后,我们来添加一条竖线。并且给竖线添加一个缩放的动画。

分析:这个动画的整体只不过是从暂停状态到播放状态的转换过程以及逆向过程。所以不能单单的通过bounds和position属性来绘制这个layer,需要用到的是CAShapeLayer+UIBezierPath来创建这个layer,并通过改变layer的strokeEnd属性进行对竖线的缩放操作。

设左侧直线的起点为:(a*0.2,a*0.9),终点为:(a*0.2,a*0.1)
(之所以这样设定是为了更贴近原版优酷按钮的效果,以及计算上的方便。)

- (void)addLeftLineLayer {CGFloat a = self.layer.bounds.size.width;//创建竖线路径UIBezierPath *path = [UIBezierPath bezierPath];[path moveToPoint:CGPointMake(a*0.2,a*0.9)];[path addLineToPoint:CGPointMake(a*0.2,a*0.1)];//创建竖线显示层_leftLineLayer = [CAShapeLayer layer];_leftLineLayer.path = path.CGPath;_leftLineLayer.fillColor = [UIColor clearColor].CGColor;_leftLineLayer.strokeColor = BLueColor.CGColor;_leftLineLayer.lineWidth = [self lineWidth];//终点类型为圆形_leftLineLayer.lineCap = kCALineCapRound;//连接点为圆形_leftLineLayer.lineJoin = kCALineJoinRound;[self.layer addSublayer:_leftLineLayer];
}

这样就添加了一条竖线,且竖线的起点在下,终点在上,是因为从暂停向播放转换时是向下缩放,逆向时是向上缩放。

为了代码的简洁性,写了一个单独的strokeEnd属性动画方法:

/**执行strokeEnd动画参数为执行时间,起始值,被添加的layer*/
- (CABasicAnimation *)strokeEndAnimationFrom:(CGFloat)fromValue to:(CGFloat)toValue onLayer:(CALayer *)layer duration:(CGFloat)duration{CABasicAnimation *strokeEndAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];strokeEndAnimation.duration = duration;strokeEndAnimation.fromValue = @(fromValue);strokeEndAnimation.toValue = @(toValue);//这两个属性设定保证在动画执行之后不自动还原strokeEndAnimation.fillMode = kCAFillModeForwards;strokeEndAnimation.removedOnCompletion = NO;[layer addAnimation:strokeEndAnimation forKey:nil];return strokeEndAnimation;
}

在正向动画的过程中左侧竖线strokeEnd属性从1到0:

[self strokeEndAnimationFrom:1 to:0 onLayer:_leftLineLayer duration:animationDuration/2];

在逆向动画的过程中左侧竖线strokeEnd属性从0到1:

[self strokeEndAnimationFrom:0 to:1 onLayer:_leftLineLayer duration:animationDuration/2];

效果如下:

竖线动画

同理添加右侧竖线,注意右侧竖线的终点在下,起点在上。并添加动画后效果如下:

两条竖线

2、圆弧动画

再确定两条直线后,弧线就比较容易添加了,在正向动画过程中:

左侧弧线是从左侧竖线的起点逆时针到右侧竖线的起点
右侧弧线是从右侧竖线的起点顺时针到左侧竖线的起点

如下图所示,添加左侧弧线效果
圆弧动画

要绘制一个圆弧最好的方式是通过半径和起始角度+结束角度这种方式来确定的。
下面看一下示意图
示意图

如图所示,直角三角形的边长为0.3a、0.4a、0.5a,
所以根据反三角函数,角θ为acos(0.4a/0.5a)
通过这几点可以确定:
弧线的半径为0.5a
起始角度为:CGFloat startAngle = acos(4.0/5.0) + M_PI_2;
结束角度为:CGFloat endAngle = startAngle - M_PI;

添加弧线代码:

- (void)addLeftCircle {CGFloat a = self.layer.bounds.size.width;UIBezierPath *path = [UIBezierPath bezierPath];[path moveToPoint:CGPointMake(a*0.2,a*0.9)];CGFloat startAngle = acos(4.0/5.0) + M_PI_2;CGFloat endAngle = startAngle - M_PI;[path addArcWithCenter:CGPointMake(a*0.5, a*0.5) radius:0.5*a startAngle:startAngle endAngle:endAngle clockwise:false];_leftCircle = [CAShapeLayer layer];_leftCircle.path = path.CGPath;_leftCircle.fillColor = [UIColor clearColor].CGColor;_leftCircle.strokeColor = LightBLueColor.CGColor;_leftCircle.lineWidth = [self lineWidth];_leftCircle.lineCap = kCALineCapRound;_leftCircle.lineJoin = kCALineJoinRound;_leftCircle.strokeEnd = 0;[self.layer addSublayer:_leftCircle];
}

*这里注意弧线暂停时是隐藏的,所以strokeEnd为0;

正向过程执行strokeEnd动画:

[self strokeEndAnimationFrom:0 to:1 onLayer:_leftLineLayer duration:animationDuration];

逆向过程:

[self strokeEndAnimationFrom:1 to:0 onLayer:_leftCircle duration:animationDuration ];

*这里需要注意的是,弧线动画执行的时长是直线动画的二倍,即整个动画的执行时间就是弧线的动画时间animationDuration,所以直线的动画时间为:animationDuration/2。后面的旋转动画时长也是通过animationDuration确定的。

添加左右弧线后的动画效果:

3、三角动画

三角动画相对于之前的竖线和圆弧的动画比较简单,就是通过两条直线确定一个三角形
添加这个三角形前,还是先创建一个放置三角形的“容器”,然后通过这个容器确定三角形两条边的起点和终点,如图所示:
三角辅助线

如图可以看出,三角两条边的起点为“容器”的底边中点,两条边的终点分别为“容器”的左上角及右上角。
代码如下:

- (void)addCenterTriangleLayer {CGFloat a = self.layer.bounds.size.width;//初始化容器_triangleCotainer = [CALayer layer];_triangleCotainer.bounds = CGRectMake(0, 0, 0.4*a, 0.35*a);_triangleCotainer.position = CGPointMake(a*0.5, a*0.55);_triangleCotainer.opacity = 0;_triangleCotainer.borderWidth = 1;[self.layer addSublayer:_triangleCotainer];//容器宽高CGFloat b = _triangleCotainer.bounds.size.width;CGFloat c = _triangleCotainer.bounds.size.height;//第一条边UIBezierPath *path1 = [UIBezierPath bezierPath];[path1 moveToPoint:CGPointMake(0,0)];[path1 addLineToPoint:CGPointMake(b/2,c)];CAShapeLayer *layer1 = [CAShapeLayer layer];layer1.path = path1.CGPath;layer1.fillColor = [UIColor clearColor].CGColor;layer1.strokeColor = RedColor.CGColor;layer1.lineWidth = [self lineWidth];layer1.lineCap = kCALineCapRound;layer1.lineJoin = kCALineJoinRound;layer1.strokeEnd = 1;[_triangleCotainer addSublayer:layer1];//第二条边UIBezierPath *path2 = [UIBezierPath bezierPath];[path2 moveToPoint:CGPointMake(b,0)];[path2 addLineToPoint:CGPointMake(b/2,c)];CAShapeLayer *layer2 = [CAShapeLayer layer];layer2.path = path2.CGPath;layer2.fillColor = [UIColor clearColor].CGColor;layer2.strokeColor = RedColor.CGColor;layer2.lineWidth = [self lineWidth];layer2.lineCap = kCALineCapRound;layer2.lineJoin = kCALineJoinRound;layer2.strokeEnd = 1;[_triangleCotainer addSublayer:layer2];
}

添加透明度动画

- (void)actionTriangleOpacityAnimationFrom:(CGFloat)from to:(CGFloat)to duration:(CGFloat)duration{CABasicAnimation *alphaAnimation = [CABasicAnimation animationWithKeyPath:@"opacity"];alphaAnimation.duration = duration; // 持续时间alphaAnimation.fromValue = @(from);alphaAnimation.toValue = @(to);alphaAnimation.fillMode = kCAFillModeForwards;alphaAnimation.removedOnCompletion = NO;[alphaAnimation setValue:@"alphaAnimation" forKey:@"animationName"];[_triangleCotainer addAnimation:alphaAnimation forKey:nil];
}

效果如下:

image

4、旋转动画

- (void)actionRotateAnimationClockwise:(BOOL)clockwise {//逆时针旋转CGFloat startAngle = 0.0f;CGFloat endAngle = -M_PI_2;CGFloat duration = 0.75 * animationDuration;//顺时针旋转if (clockwise) {startAngle = -M_PI_2;endAngle = 0.0;duration = animationDuration;}CABasicAnimation *roateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];roateAnimation.duration = duration; // 持续时间roateAnimation.fromValue = [NSNumber numberWithFloat:startAngle];roateAnimation.toValue = [NSNumber numberWithFloat:endAngle];roateAnimation.fillMode = kCAFillModeForwards;roateAnimation.removedOnCompletion = NO;[roateAnimation setValue:@"roateAnimation" forKey:@"animationName"];[self.layer addAnimation:roateAnimation forKey:nil];
}

最终效果如下:

正常动画效果

三、小结

所有的看起来复杂的动画只要拆分成各个模块都是比较简单的,只要把各个模块做好在拼凑到一起就可以了。

四、代码

Github:https://github.com/mengxianliang/XLPlayButton

五、延伸

爱奇艺播放按钮动画解析

这篇关于优酷播放按钮动画原理解析的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/162245

相关文章

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法

深度解析Java DTO(最新推荐)

《深度解析JavaDTO(最新推荐)》DTO(DataTransferObject)是一种用于在不同层(如Controller层、Service层)之间传输数据的对象设计模式,其核心目的是封装数据,... 目录一、什么是DTO?DTO的核心特点:二、为什么需要DTO?(对比Entity)三、实际应用场景解析

从原理到实战深入理解Java 断言assert

《从原理到实战深入理解Java断言assert》本文深入解析Java断言机制,涵盖语法、工作原理、启用方式及与异常的区别,推荐用于开发阶段的条件检查与状态验证,并强调生产环境应使用参数验证工具类替代... 目录深入理解 Java 断言(assert):从原理到实战引言:为什么需要断言?一、断言基础1.1 语

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次,点赞13次,收藏8次。本文详细介绍了Java分层架构中的几个关键包:DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1

Java中的雪花算法Snowflake解析与实践技巧

《Java中的雪花算法Snowflake解析与实践技巧》本文解析了雪花算法的原理、Java实现及生产实践,涵盖ID结构、位运算技巧、时钟回拨处理、WorkerId分配等关键点,并探讨了百度UidGen... 目录一、雪花算法核心原理1.1 算法起源1.2 ID结构详解1.3 核心特性二、Java实现解析2.

MySQL中的表连接原理分析

《MySQL中的表连接原理分析》:本文主要介绍MySQL中的表连接原理分析,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、背景2、环境3、表连接原理【1】驱动表和被驱动表【2】内连接【3】外连接【4编程】嵌套循环连接【5】join buffer4、总结1、背景

使用Python绘制3D堆叠条形图全解析

《使用Python绘制3D堆叠条形图全解析》在数据可视化的工具箱里,3D图表总能带来眼前一亮的效果,本文就来和大家聊聊如何使用Python实现绘制3D堆叠条形图,感兴趣的小伙伴可以了解下... 目录为什么选择 3D 堆叠条形图代码实现:从数据到 3D 世界的搭建核心代码逐行解析细节优化应用场景:3D 堆叠图

深度解析Python装饰器常见用法与进阶技巧

《深度解析Python装饰器常见用法与进阶技巧》Python装饰器(Decorator)是提升代码可读性与复用性的强大工具,本文将深入解析Python装饰器的原理,常见用法,进阶技巧与最佳实践,希望可... 目录装饰器的基本原理函数装饰器的常见用法带参数的装饰器类装饰器与方法装饰器装饰器的嵌套与组合进阶技巧

解析C++11 static_assert及与Boost库的关联从入门到精通

《解析C++11static_assert及与Boost库的关联从入门到精通》static_assert是C++中强大的编译时验证工具,它能够在编译阶段拦截不符合预期的类型或值,增强代码的健壮性,通... 目录一、背景知识:传统断言方法的局限性1.1 assert宏1.2 #error指令1.3 第三方解决

全面解析MySQL索引长度限制问题与解决方案

《全面解析MySQL索引长度限制问题与解决方案》MySQL对索引长度设限是为了保持高效的数据检索性能,这个限制不是MySQL的缺陷,而是数据库设计中的权衡结果,下面我们就来看看如何解决这一问题吧... 目录引言:为什么会有索引键长度问题?一、问题根源深度解析mysql索引长度限制原理实际场景示例二、五大解决