播放按钮动画

最新推荐文章于 2023-01-29 23:26:14 发布
最新推荐文章于 2023-01-29 23:26:14 发布
阅读量699 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/flg1554112450/article/details/77868287
版权

@property (nonatomic, strong) CAShapeLayer *line1; 绘制三角形

@property (nonatomic, strong) UIBezierPath *line1Path;

@property (nonatomic, strong) CAShapeLayer *line2; 绘制过度弧线

@property (nonatomic, strong) UIBezierPath *line2Path;

@property (nonatomic, strong) CAShapeLayer *line3; 左竖线

@property (nonatomic, strong) UIBezierPath *line3Path;

@property (nonatomic, strong) CAShapeLayer *line4; 右竖线

@property (nonatomic, strong) UIBezierPath *line4Path;



- (void)createView{

    // 添加三角形

    self.line1 = [CAShapeLayer layer];

    self.line1.fillColor = [UIColor clearColor].CGColor;

    self.line1.strokeColor = [UIColor colorWithRed:0.03 green:0.13 blue:0.96 alpha:1.00].CGColor;

    self.line1.lineCap = kCALineCapButt;

    self.line1.lineJoin = kCALineJoinRound;

    self.line1.lineWidth = 20;

    self.line1Path = [[UIBezierPath alloc] init];

    [self.line1Path moveToPoint:CGPointMake(50, 100)];

    [self.line1Path addLineToPoint:CGPointMake(50, 43)];

    [self.line1Path addLineToPoint:CGPointMake(150, 100)];

    [self.line1Path addLineToPoint:CGPointMake(50, 157)];

    [self.line1Path addLineToPoint:CGPointMake(50, 100)];

    [self.line1Path closePath];

    self.line1.path = self.line1Path.CGPath;

    [self.layer addSublayer:self.line1];

    self.line1.strokeEnd = 0;

    /// 添加过度圆弧

    self.line2 = [CAShapeLayer layer];

    self.line2.fillColor = [UIColor clearColor].CGColor;

    self.line2.strokeColor = [UIColor colorWithRed:0.03 green:0.13 blue:0.96 alpha:1.00].CGColor;

    self.line2.lineCap = kCALineCapRound;

    self.line2.lineWidth = 20;

    self.line2Path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 110) radius:50 startAngle:M_PI endAngle:0 clockwise:NO];

    self.line2.path = self.line2Path.CGPath;

    [self.layer addSublayer:self.line2];

    self.line2.strokeStart = 1;

    添加左边竖杠

    self.line3 = [CAShapeLayer layer];

    self.line3.fillColor = [UIColor clearColor].CGColor;

    self.line3.strokeColor = [UIColor colorWithRed:0.03 green:0.13 blue:0.96 alpha:1.00].CGColor;

    self.line3.lineCap = kCALineCapRound;

    self.line3.lineWidth = 20;

    self.line3Path = [[UIBezierPath alloc] init];

    [self.line3Path moveToPoint:CGPointMake(50, 43.0)];

    [self.line3Path addLineToPoint:CGPointMake(50, 157)];

    self.line3.path = self.line3Path.CGPath;

    [self.layer addSublayer:self.line3];

    self.line3.strokeEnd = 1;

    /// 添加右边竖杠

    self.line4 = [CAShapeLayer layer];

    self.line4.fillColor = [UIColor clearColor].CGColor;

    self.line4.strokeColor = [UIColor colorWithRed:0.03 green:0.13 blue:0.96 alpha:1.00].CGColor;

    self.line4.lineCap = kCALineCapRound;

    self.line4.lineWidth = 20;

    self.line4Path = [[UIBezierPath alloc] init];

    [self.line4Path moveToPoint:CGPointMake(150, 157)];

    [self.line4Path addLineToPoint:CGPointMake(150, 43)];

    self.line4.path = self.line4Path.CGPath;

    [self.layer addSublayer:self.line4];

    self.line4.strokeEnd = 1;


}

/// 主要麻烦的地方是 要不停地实验找到动画衔接自然的延时时间。。。

- (void)playAnimation{

    /// 右竖线平移

    self.line4.path = [self pingyiWithMovePoint:CGPointMake(150, 120) addPoint:CGPointMake(150, 20)].CGPath;

    [self.line4 addAnimation:[self pathAnimationWithDuration:0.2] forKey:nil];

    /// 左竖线平移

    self.line3.path = [self pingyiWithMovePoint:CGPointMake(50, 60) addPoint:CGPointMake(50, 160)].CGPath;

    [self.line3 addAnimation:[self pathAnimationWithDuration:0.2] forKey:nil];

    ----延时0.2s执行-----------

    dispatch_time_t delayTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.2/*延迟执行时间*/ * NSEC_PER_SEC));

    dispatch_after(delayTime, dispatch_get_main_queue(), ^{

        // 右直线缩短消失

        [self addAnimationStrokeEndWithLayer:self.line4 duration:0.2 from:1 to:0];

    });

    ----延时0.4s执行-----------

    dispatch_time_t delayTime2 = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.4/*延迟执行时间*/ * NSEC_PER_SEC));

    dispatch_after(delayTime2, dispatch_get_main_queue(), ^{

        // 左竖线上移缩短

        self.line3.path = [self pingyiWithMovePoint:CGPointMake(50, 43) addPoint:CGPointMake(50, 100)].CGPath;

        [self.line3 addAnimation:[self pathAnimationWithDuration:0.2] forKey:nil];

        // 弧线动画

        [self addAnimationStrokeStartWithLayer:self.line2 duration:0.2 from:1 to:0];

        self.line4.hidden = YES;

    });

    ----延时0.5s执行-----------

    dispatch_time_t delayTime1 = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5/*延迟执行时间*/ * NSEC_PER_SEC));

    dispatch_after(delayTime1, dispatch_get_main_queue(), ^{

        // 弧线动画

        [self addAnimationStrokeEndWithLayer:self.line2 duration:0.2 from:1 to:0];

        // 绘制三角形

        [self addAnimationStrokeEndWithLayer:self.line1 duration:0.6 from:0 to:1];

    });

}

- (void)pauseAnimation{

    // 绘制三角形

    [self addAnimationStrokeEndWithLayer:self.line1 duration:0.6 from:1 to:0];

    ----延时0.2s执行-----------

    dispatch_time_t delayTime = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.2/*延迟执行时间*/ * NSEC_PER_SEC));

    dispatch_after(delayTime, dispatch_get_main_queue(), ^{

        // 弧线动画

        [self addAnimationStrokeEndWithLayer:self.line2 duration:0.2 from:0 to:1];

    });

    ----延时0.3s执行-----------

    dispatch_time_t delayTime1 = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.3/*延迟执行时间*/ * NSEC_PER_SEC));

    dispatch_after(delayTime1, dispatch_get_main_queue(), ^{

        self.line4.hidden = NO;

        // 右直线缩短消失

        [self addAnimationStrokeEndWithLayer:self.line4 duration:0.2 from:0 to:1];

    });

    ----延时0.4s执行-----------

    dispatch_time_t delayTime2 = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.4/*延迟执行时间*/ * NSEC_PER_SEC));

    dispatch_after(delayTime2, dispatch_get_main_queue(), ^{

        // 弧线动画

        [self addAnimationStrokeStartWithLayer:self.line2 duration:0.2 from:0 to:1];

        /// 右竖线平移

        self.line4.path = [self pingyiWithMovePoint:CGPointMake(150, 120) addPoint:CGPointMake(150, 20)].CGPath;

        [self.line4 addAnimation:[self pathAnimationWithDuration:0.2] forKey:nil];

        /// 左竖线平移

        self.line3.path = [self pingyiWithMovePoint:CGPointMake(50, 60) addPoint:CGPointMake(50, 160)].CGPath;

        [self.line3 addAnimation:[self pathAnimationWithDuration:0.2] forKey:nil];

    });

    ----延时0.6s执行-----------

    dispatch_time_t delayTime3 = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.6/*延迟执行时间*/ * NSEC_PER_SEC));

    dispatch_after(delayTime3, dispatch_get_main_queue(), ^{

        /// 左竖线平移

        self.line3.path = [self pingyiWithMovePoint:CGPointMake(50, 43) addPoint:CGPointMake(50, 157)].CGPath;

        [self.line3 addAnimation:[self pathAnimationWithDuration:0.1] forKey:nil];

        /// 右竖线平移

        self.line4.path = [self pingyiWithMovePoint:CGPointMake(150, 157) addPoint:CGPointMake(150, 43)].CGPath;

        [self.line4 addAnimation:[self pathAnimationWithDuration:0.2] forKey:nil];

    });

}

/// 平移动画

- (UIBezierPath *)pingyiWithMovePoint:(CGPoint)movepoint addPoint:(CGPoint)addpoint{

    UIBezierPath *linePath = [UIBezierPath bezierPath];

    [linePath moveToPoint:movepoint];

    [linePath addLineToPoint:addpoint];

    return linePath;

}

/// strokeEnd 动画

- (void)addAnimationStrokeEndWithLayer:(CAShapeLayer *)layer duration:(CGFloat)duration from:(CGFloat)from to:(CGFloat)to{

    CABasicAnimation *strokeEndAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];

    strokeEndAnimation.fillMode = kCAFillModeForwards;

    strokeEndAnimation.removedOnCompletion = NO;

    strokeEndAnimation.duration = duration;

    strokeEndAnimation.fromValue = @(from);

    strokeEndAnimation.toValue = @(to);

    [layer addAnimation:strokeEndAnimation forKey:nil];

}

/// strokeStart动画

- (void)addAnimationStrokeStartWithLayer:(CAShapeLayer *)layer duration:(CGFloat)duration from:(CGFloat)from to:(CGFloat)to{

    CABasicAnimation *strokeEndAnimation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];

    strokeEndAnimation.fillMode = kCAFillModeForwards;

    strokeEndAnimation.removedOnCompletion = NO;

    strokeEndAnimation.duration = duration;

    strokeEndAnimation.fromValue = @(from);

    strokeEndAnimation.toValue = @(to);

    [layer addAnimation:strokeEndAnimation forKey:nil];

}


- (CABasicAnimation *)pathAnimationWithDuration:(CGFloat)duration {

    CABasicAnimation *pathAnima = [CABasicAnimation animationWithKeyPath:@"path"];

    pathAnima.duration = duration;

    pathAnima.fillMode = kCAFillModeForwards;

    pathAnima.removedOnCompletion = NO;

    return pathAnima;

}

flg_iOS
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
qt动画按钮
03-21
开发环境：qt5.0 实现动画按钮，按钮连贯放大缩小显示
Unity实现持续点击按钮播放帧动画的效果
波波斯维奇
10-28 3827
Unity实现持续点击按钮播放帧动画的效果 前言 在最近的开发中，有这样的一个需求，按住按钮实现帧序列的变化，实现向前播放的动画或者向后倒退的动画。我试了几种方法，最终实现了这一个效果。具体实现方法如下所示： 实现步骤 1.新建工程，导入序列帧，如下图所示。 2.在场景中新建一个Image组件，用于切换帧序列，如下图所示： 3.新建ChangeImage.cs脚本，用于动态切换帧序列，脚本代码如下图所示： using System.Collections; using System.Collection
android 圆角播放暂停按钮 及 动画效果
Runt02的博客
10-16 867
有问题请私信，留言，或者发送邮件到我扣扣邮箱 qingingrunt2010, 再或者加入扣扣群721765299。
给video视频自定义添加中间播放按钮
热门推荐
cpc980209的博客
05-10 1万+
gei实现效果：视频中间添加播放按钮，且鼠标移上去有波浪动画效果，点击可以控制视频播放 播放按钮可以使用盒子绝对定位在视频中间，当点击时触发video的播放事件，同时让盒子隐藏。 <div class="video-right"> <video controls @pause="videoPause" @play="videoPlay" ref="myVideo..
动画状态机
qq_44400944的博客
10-14 349
1、打开【机器人的动画蓝图】 2、双击状态机。创建两个新的状态 3、将之前【活着的状态】放入【Alive】状态中
layui框架学习（3：按钮）
gc_2299的博客
01-29 4498
学习并记录layui框架中页面元素的按钮相关内容。
超炫button按钮动画效果
03-16
超炫button按钮动画效果 附带activity切换动画效果，其实在一个项目里，大家自己体验吧!
CSS实现菜单按钮动画
12-30
要写一个下拉菜单点击按钮 菜单入口就是是点击一个图标按钮 之前都是随便用个图片代替 今天突然想用CSS写个效果 主要参考澎湃移动端右上角的按钮 效果： HTML //vue 中通过点击事件改变class xss=removed ...
SeekButton按钮动画
10-10
效果图地址 http://blog.csdn.net/qq_34709056/article/details/78189191
动画按钮源码实现
09-27
采用了炫彩界面库，代码十分的简单，适合新手和想快速制作出一个动画按钮效果的朋友
动态按钮的创建 按钮动态播放画面
11-29
内容包含如何创建一个动态的按钮，当鼠标涉及按钮范围的时候，按钮就动态显示。。
纯代码播放按钮呼吸效果JS透明动态效果
04-12
纯手写代码播放按钮呼吸效果JS透明动态效果，用于做吸引点击播放效果。
android 两种按钮的动画效果
04-16
NULL 博文链接：https://iaiai.iteye.com/blog/1807774
android按钮点击动画特效，有关注按钮点击效果，有收藏按钮，点赞按钮，评论按钮等各种效果
05-19
android按钮点击动画特效，有关注按钮点击效果，有收藏按钮，点赞按钮，评论按钮等各种效果，适合按钮效果处理。很不错的Android特效，按钮点击效果。大家可以下载看看。
下载→《解决Flash“单击以激活并使用此控件”的办法》文件
07-25
解决Flash“单击以激活并使用此控件”的办法
日常总结 --- 视频播放按钮
帕尼尼的博客
08-23 836
设计 需求： 视频播放按钮居中，hover时样式变化 结构 .video_open { position: absolute; left: 50%; top: 50%; margin-left: -43px; margin-top: -43px; width: 86px; height: 86px; cursor...
html制作自动切换音乐按钮代码,使用 canvas 制作一个动态的音乐播放按钮
weixin_42366954的博客
05-30 476
使用 canvas 制作一个动态的音乐播放按钮效果动图背景按钮需要显示进度、封面、跳动的线条。如果用 canvas 画图片的话，可能存在图片跨域的情况，图片就用 img 标签加载。canvas 需要做的事就只有绘制进度圈、图标。HTML 结构 固定一个区域，图片用一个 div 包裹，超过就隐藏(部分浏览器 img 标签不支持圆角属性)。基础变量const ELE_PROGRESS =...
播放按钮HTML,CSS3实现的player播放按钮_html/css_WEB-ITnose
weixin_42462007的博客
06-20 1406
完成的效果如下查看效果并下载Step 1：先了解border的原理：Step 2：HTML代码结构Html代码Step 3：画背景圆，position：relativeCss代码 .playContainer li { position: relative; float: left; border: 25px solid #404040; color: #404040; height...
layui.open使用例子播放m3u8视频
zxh7770的博客
05-20 2255
阐述： 最近项目需求，使用弹窗播放m3u8视频，本例子中使用了layui.open弹窗方式。 代码例子如下： 语法 layer.open(options) layer.open 根据type不同，类型也就不一样,有五种类型：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层） 其实工作开发中用的最多的就是1、2这两种类型了，这里就只介绍这两种，其他的可以参考官网例子。 页面层(type:1) ：弹出层展示的是某个定义好的页面元素 layer.open({ ty
unity点击按钮播放动画
最新发布
04-30
在 Unity 中，你可以使用按钮组件（Button）和动画控制器（Animator）来实现点击按钮播放动画的功能。 首先，在 Unity 的场景中创建一个按钮。在 Hierarchy 视图中右键点击，选择 UI -> Button。 然后，选中按钮，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值