爱奇艺、优酷的播放/暂停按钮动画效果
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
GIF
XLPlayButtonExample
LICENSE
README.md

README.md

XLPlayButton

爱奇艺播放、暂停按钮动画效果

image

优酷播放、暂停按钮动画效果

image

实现原理

实现原理是利用贝塞尔曲线和CAShapeLayer绘制出三角、圆弧、直线,然后通过核心动画实现的动态效果。

使用方法

  • XLPlayButton 是继承UIButton的,只是创建方式和UIButton不同,其他的使用方法均一致。
  • 创建方法
_iQiYiPlayButton = [[iQiYiPlayButton alloc] initWithFrame:CGRectMake(0, 0, 60, 60) state:iQiYiPlayButtonStatePlay];
  • 唯一属性
/**
 通过setter方式控制按钮动画
 设置XLPlayButtonStatePlay显示播放按钮
 设置XLPlayButtonStatePause显示暂停按钮
 */
@property (nonatomic, assign) XLPlayButtonState buttonState;
  • 切换状态方法
- (void)iQiYiPlayMethod {
    //通过判断当前状态 切换显示状态
    if (_iQiYiPlayButton.buttonState == iQiYiPlayButtonStatePause) {
        _iQiYiPlayButton.buttonState = iQiYiPlayButtonStatePlay;
    }else {
        _iQiYiPlayButton.buttonState = iQiYiPlayButtonStatePause;
    }
}

优酷播放按钮动画实现原理 CSDN / 简书

爱奇艺播放按钮动画实现原理 CSDN / 简书

个人开发过的UI工具集合 XLUIKit