前言
hihi,勇敢的小伙伴儿们大家好,今天想给大家分享的是一个动画效果,我在简书上看的,参考文章地址,怎么说呢,我看了代码,实现是很简单的,但是呢,这个代码里硬性条件比较多,比如说需要准备几个图片资源,所以我选择了与之有所差异的方式实现,尽量减少图片的使用,当然,我这个效果是比较简单的,如图:
所以才可以这样做,如果换做参考文章博主的风格,用这种简单的方式的确很难实现,还需要设计师的支持。如图:
虽然我这个很简单,但我还是要分享给有需要的小伙伴儿们~
这里主要是组合动画,一个是后面闪烁一下的轮廓感,一个是前面闪烁一下的流光,话不多说上代码~
正文
首先我们需要研究一下这个按钮或者View的组成。
这里自定义了一个View叫做FlowButton,它由两个子视图组成,一部分是有点击事件的按钮UIButton,一部分是提供流光效果的图片UIImageView,那负责闪烁的轮廓光我们不放在子视图里,原因是轮廓是由layer的shadow的效果形成的轮廓感,如果被包含在FlowButton里面,shadow被裁剪了,就没有阴影效果了。
分析到这里,着手实现。
FlowButton.h
#import <UIKit/UIKit.h>
@interface FlowButton : UIView
@property (nonatomic, strong) UIButton *flowLightBtn; //按钮
@property (nonatomic, strong) UIImageView *flowLightImageView; //流光图
@end
FlowButton.m
#import "FlowButton.h"
@implementation FlowButton
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
//按钮
self.flowLightBtn = [[UIButton alloc] init];
//这里设置默认颜色 无需一致
[self.flowLightBtn setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[self.flowLightBtn setTitleColor:[UIColor lightTextColor] forState:UIControlStateHighlighted];
//添加约束必要条件
self.flowLightBtn.translatesAutoresizingMaskIntoConstraints = NO;
[self addSubview:self.flowLightBtn];
//流光
self.flowLightImageView = [[UIImageView alloc] init];
//设立设置默认颜色 无需一致
self.flowLightImageView.backgroundColor = [UIColor whiteColor];
//添加约束必要条件
self.flowLightImageView.translatesAutoresizingMaskIntoConstraints = N