Shimmer–为应用任意视图添加闪烁效果



Shimmer,可以给你的应用任意视图添加闪烁效果.它可以用于指示一种加载中的状态.

项目主页:Shimmer

安装

通过CocoaPods安装

    pod 'Shimmer', '~> 1.0.2'

手动安装

Shimmer文件夹中的所有源代码拽入项目中即可.

使用

创建一个 FBShimmeringView FBShimmeringLayer对象,并添加内容,即可使用Shimmer.为了开始使用闪烁效果,将属性shimmering设为YES即可.


下面是一个让标签闪烁的例子:


FBShimmeringView *shimmeringView = [[FBShimmeringView alloc] initWithFrame:self.view.bounds];

[self.view addSubview:shimmeringView];

UILabel *loadingLabel = [[UILabel alloc] initWithFrame:shimmeringView.bounds];

loadingLabel.textAlignment = NSTextAlignmentCenter;

loadingLabel.text = NSLocalizedString(@"Shimmer",nil);

shimmeringView.contentView = loadingLabel;

// 开始闪烁.

shimmeringView.shimmering = YES;

FBShimmeringView*shimmeringView=[[FBShimmeringViewalloc]initWithFrame:self.view.bounds];

[self.viewaddSubview:shimmeringView];

UILabel*loadingLabel=[[UILabelalloc]initWithFrame:shimmeringView.bounds];

loadingLabel.textAlignment=NSTextAlignmentCenter;

loadingLabel.text=NSLocalizedString(@"Shimmer",nil);

shimmeringView.contentView=loadingLabel;

// 开始闪烁.

shimmeringView.shimmering=YES;

你可以下载最新的示例工程.点击FBShimmering.xcworkpace运行示例工程后,你可以水平或竖直清扫来查看不同参数下闪烁的效果;也可以轻击来开始或停止闪烁效果.

FBShimmering 协议

FBShimmeringView FBShimmeringLayer均遵循协议,可以很灵活地定制他们的行为:

@protocol FBShimmering

//! @abstract 设置为YES,开始闪烁;设置为NO,停止闪烁.默认NO.

@property (assign,nonatomic, readwrite,getter = isShimmering) BOOL shimmering;

//! @abstract 两次闪烁的时间间隔,单位为秒.默认0.4.

@property (assign,nonatomic, readwrite) CFTimeInterval shimmeringPauseDuration;

//! @abstract 内容闪烁时的透明度.默认 0.5.

@property (assign,nonatomic, readwrite) CGFloat shimmeringAnimationOpacity;

//! @abstract 内容闪烁前的透明度,默认1.0.

@property (assign,nonatomic, readwrite) CGFloat shimmeringOpacity;

//! @abstract 内容闪烁的速度,单位/.默认230.

@property (assign,nonatomic, readwrite) CGFloat shimmeringSpeed;

//! @abstract 闪烁区中高亮显示的范围.取值[0,1],默认1.0.

@property (assign,nonatomic, readwrite) CGFloat shimmeringHighlightLength;

//! @abstract 闪烁动画的方向.默认FBShimmerDirectionRight.

@property (assign,nonatomic, readwrite) FBShimmerDirection shimmeringDirection;

//! @abstract 闪烁开始时的淡出时间.默认0.1.

@property (assign,nonatomic, readwrite) CFTimeInterval shimmeringBeginFadeDuration;

//! @abstract 闪烁结束时的淡出时间.默认0.3.

@property (assign,nonatomic, readwrite) CFTimeInterval shimmeringEndFadeDuration;

/**

 @abstract 闪烁渐出时,CoreAnimation的绝对媒体时间.

 @discussion 只在设置 {@ref shimmering}NO时有效.

 */

@property (assign,nonatomic, readonly) CFTimeInterval shimmeringFadeTime;

/**

 @abstract 闪烁简要开始时,CoreAnimation的绝对媒体时间.

 @discussion 只在设置 {@ref shimmering}YES时有效.

 */

@property (assign,nonatomic) CFTimeInterval shimmeringBeginTime;


@end


@protocolFBShimmering

//! @abstract 设置为YES,开始闪烁;设置为NO,停止闪烁.默认NO.

@property(assign,nonatomic,readwrite,getter=isShimmering)BOOLshimmering;

//! @abstract 两次闪烁的时间间隔,单位为秒.默认0.4.

@property(assign,nonatomic,readwrite)CFTimeIntervalshimmeringPauseDuration;

//! @abstract 内容闪烁时的透明度.默认 0.5.

@property(assign,nonatomic,readwrite)CGFloatshimmeringAnimationOpacity;

//! @abstract 内容闪烁前的透明度,默认1.0.

@property(assign,nonatomic,readwrite)CGFloatshimmeringOpacity;

//! @abstract 内容闪烁的速度,单位/.默认230.

@property(assign,nonatomic,readwrite)CGFloatshimmeringSpeed;

//! @abstract 闪烁区中高亮显示的范围.取值[0,1],默认1.0.

@property(assign,nonatomic,readwrite)CGFloatshimmeringHighlightLength;

//! @abstract 闪烁动画的方向.默认FBShimmerDirectionRight.

@property(assign,nonatomic,readwrite)FBShimmerDirectionshimmeringDirection;

//! @abstract 闪烁开始时的淡出时间.默认0.1.

@property(assign,nonatomic,readwrite)CFTimeIntervalshimmeringBeginFadeDuration;

//! @abstract 闪烁结束时的淡出时间.默认0.3.

@property(assign,nonatomic,readwrite)CFTimeIntervalshimmeringEndFadeDuration;

/**

 @abstract 闪烁渐出时,CoreAnimation的绝对媒体时间.

 @discussion 只在设置 {@ref shimmering}NO时有效.

*/

@property(assign,nonatomic,readonly)CFTimeIntervalshimmeringFadeTime;

/**

 @abstract 闪烁简要开始时,CoreAnimation的绝对媒体时间.

 @discussion 只在设置 {@ref shimmering}YES时有效.

*/

@property(assign,nonatomic)CFTimeIntervalshimmeringBeginTime;


@end



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Android上为您的布局和RecyclerView实现面纱骨架和闪烁效果,可以通过以下步骤实现: 1. 首先,您需要使用一个库来实现面纱骨架和闪烁效果。推荐使用Shimmer-android库,它是一个轻量级的库,易于使用,并且具有良好的性能。 2. 在您的build.gradle文件中添加以下依赖项: ``` dependencies { implementation 'com.facebook.shimmer:shimmer:0.5.0' } ``` 3. 在您的布局文件中添加ShimmerFrameLayout视图: ``` <com.facebook.shimmer.ShimmerFrameLayout android:id="@+id/shimmer_view_container" android:layout_width="match_parent" android:layout_height="wrap_content"> <!-- Your layout here --> </com.facebook.shimmer.ShimmerFrameLayout> ``` 4. 在您的代码中,您需要初始化ShimmerFrameLayout并开始/停止动画: ``` ShimmerFrameLayout shimmerFrameLayout = findViewById(R.id.shimmer_view_container); shimmerFrameLayout.startShimmer(); // 开始动画 shimmerFrameLayout.stopShimmer(); // 停止动画 ``` 5. 如果您想在RecyclerView中实现面纱骨架和闪烁效果,则可以在RecyclerView.Adapter中重写onCreateViewHolder方法,并在其中使用ShimmerFrameLayout: ``` @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View itemView = LayoutInflater.from(parent.getContext()) .inflate(R.layout.my_item_layout, parent, false); final ShimmerFrameLayout shimmerFrameLayout = itemView.findViewById(R.id.shimmer_view_container); shimmerFrameLayout.startShimmer(); return new ViewHolder(itemView); } ``` 6. 当您的数据加载完成时,您需要停止ShimmerFrameLayout动画并显示真实数据: ``` @Override public void onBindViewHolder(ViewHolder holder, int position) { // Bind data to views holder.textView.setText(mDataList.get(position).getText()); // Stop shimmer animation and show real data holder.shimmerFrameLayout.stopShimmer(); holder.shimmerFrameLayout.setVisibility(View.GONE); holder.textView.setVisibility(View.VISIBLE); } ``` 这样,您就可以在Android上为您的布局和RecyclerView实现面纱骨架和闪烁效果了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值